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属性.