前端

JQuery基础

略

JQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

我们使用jquery可以更好完成以下操作:

  1. html文档操作，对于dom相关操作优化
  2. jquery提供更加方便与丰富事件处理
  3. jquery提供简单动画特效
  4. jquery提供ajax交互

我们知道，要使用任何一个js框架，都是需要导入相关的js文件。

关于其它常用js框架:

  1. dojo 面向对象的js框架
  2. extjs 学习成本比较高 它提供大量的丰富组件，它效果展示非常好
  3. prototype 早期比较流行js框架
  4. angularJS 它是一个mvc js框架，它提供双向数据绑定.

jquery它的插件机制特别丰富,在开发中可以选择非常多的相关插件，例如，表单校验插件，树型结构。

JQuery核心函数

  1. JQuery(callback)

    页面加载完成后加载JQuery代码.

  2. JQuery(html[,ownerDocument]

    参数一(必选):用于把html代码转换为JQuery对象.

    参数二(可选):设置dom的相关属性

  3. JQuery([slector[,context]])

    参数一(可选):选择器

    参数二(可选):指定要查找的dom集

  4. JQuery对象和dom对象的转换

JQuery选择器

基本选择器

1
2
3
4
$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

层次选择器

1
2
3
4
$("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

过滤选择器(重点)

1
2
3
4
5
6
7
8
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于4的li
$("li:gt(2)")    //下标大于2的li
$("li:lt(2)")    //下标小于2的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

内容过滤选择器

1
2
3
4
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

可见性过滤选择器

1
2
$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素

属性过滤选择器

1
2
3
4
5
6
7
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

状态过滤选择器

1
2
3
4
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

表单过滤选择器

1
2
3
4
5
6
7
8
9
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域