JQuery基础知识总结

1. JQuery的ready和Dom的onload的区别

 (1)onload是所有Dom元素创建完毕、图片、css等都加载完毕后才被触发;而ready则是Dom元素创建完毕后就被触发,这样可以提高网页的响应速度。

 在JQuery中也可以用$(window).load()来实现onload那种事件条用的时机.

 (2)onload只能注册一次,ready可以注册多次.

 (3)JQuery用$(匿名函数)来简写ready事件

2. $.map(array,匿名函数)

   对数组array中每个元素调用匿名函数逐个进行处理,匿名函数将处理返回,就是返回值是处理之后的新的数组

    例如: var arr2 = $.map(arr,function(item){return item*2 ;})

3. $.each(array,匿名函数)

   对数组array每个元素调用匿名函数进行处理,没有返回值.

   例如: $.each(array,function(key,value)) { alert(key+"="+value) }  说明,如果是普通风格的数组,则key的值是序号,value就是值.

   注:元素each只是对$.each的一个简化调用.写法为:array.each(function(key,value) { } )

4. Dom对象要想通过JQuery操作,必须先变成JQuery对象.

   (1) JQuery取元素通过 $("#div1"), 其中div1 是 div 层的一个ID.

   (2) 有Dom对象,转变成JQuery对象, 例如 var div1 = document.getElementById("div1");   之后通过 $(div1) 来获取.

5. JQuery对象转换成Dom对象.

   var div2 = $(div1)[0]

6. html 属性

   相当于Dom的 innerHTML属性.

7. css方法

 (1) 修改样式: $("#div1").css("background","red")

 (2) 获得样式: $("#div1").css("background")

8. value方法

 (1) 修改value: $("#div1").val("abc")

 (2) 获得value: $("#div1").val()

 注: 类似的 innerText和innerHTML 用 text() 和html() .

9. JQuery选择器

   注:选择器表达式中的空格不能多也不能少

 (1) 根据ID来取元素:  $("#div1") //获取ID为div1的标签

 (2) 根据TagName来获取元素: $("div") //获取页面所有div标签

 (3) 根据css选择器来获取元素: $(".test") //获取页面所以运用了.test样式的标签

 (4) 多条件选择器:  $("p,div") //获取页面所以p标签和div标签的元素

 (5) 层次选择器:   

  5.1 $("div li") 获取div下的所有li元素(包括间接的).

     5.2 $("div > li") 获取div下的直接li子元素.

     5.3 $(".test + div")获取样式名为test之后的第一个div元素(不常用).

     5.4 $(".test ~ div")获取样式名为test之后所有的div元素(不常用).

10. next方法  说明:用于获取节点之后挨着的第一个同辈元素.

     例如: $(".test").next(),也可以加过滤,$(".test").next("div")

11. nextAll方法  说明:用于获取节点之后的所有同辈元素.

     例如: $(".test").nextAll(),也可以加过滤,$(".test").nextAll("div")

12. sibings方法  说明:用于获取所有同辈元素

    例如: $(".test").sibings(),也可以加过滤,$(".test").sibings("div")

13.基本过滤

 13.1 :first 选取第一个元素. $("div:first")选取第一个<div>

 13.2 :last 选取最后一个元素. $("div:last")选取最后一个<div>

 13.3 :not 选取不满足"选择器"条件的元素. $("input:not(.test)")选取样式名不是test的<input>

 13.4 :even、:odd,选取索引是奇数、偶数的元素,$("input:even")选取索引是奇数的<input>

 13.5 :eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引等于、大于、小于索引序号的元素,比如   $("input:lt(5)") 选取索引小于5的<input>

      注:如果eq、gt和lt都在的话,先取第一个的序列,之后是在新的序列下取更新的序列.

 13.6 $(":header") 选取所有的h1直h6元素  13.7 $("div:annimated") 选取正在执行动画的<div元素>

14.属性过滤器

 14.1 $("div[id]") 选取有id属性的<div>.

 14.2 $("div[title=test]") 选取title属性为"test"的<div>.

 14.3 $("div[title!=test]") 选取title属性不为"test"的<div>.

 注:还可以选择开头、结束、包含等,条件还可以复合

15.表单对象选择器(过滤器)

 15.1 $("#form1:enabled") 选取id为form1的表单内所有启用的元素.

 15.2 $("#form1:disabled")选取id为form1的表单内所有禁用的元素.

 15.3 $("input:checked")选取所有选中的元素(Radio、CheckBox)

 15.4 $("select:selected")选取所有选中的选项元素(下拉列表) 

 15.5 $(":input")选取所有<input>、<textarea>、<select>和<button>元素.

 15.6 $(":text")选取所有单行文本框

 15.7 $(":password")选取所有密码框.同理还有:radio , :checkbox , :submit , :image , :reset ,     :button , :file , :hidden.

 16.相对定位  $("#div1").click(function()){ $("td",$(this)).css("background","red"); }

 解析: $("td",$(this) 是指取相对this这个对象的td设置它的css属性.

原文地址:https://www.cnblogs.com/Jonish/p/3272601.html