【文章根据 尚硅谷 教学材料 总结】
发博备查。
1.
. class选择器
# id选择器
: 选取
2. $(function(){})相当于 window.onload 方法.
window.onload = function(){...}
3. 加载DOM的两种方式: jQuery 和 window.onload
$(document).ready(function(){...})
$(function(){...}
4. 选取button 并添加 onClick 响应函数. $("button").click(function(){}
5. jQuery 和 DOM 对象
[1]. 由 jQuery 对象转为 DOM 对象.
1). 获取一个 jQuery 对象.
var $btn = $("button");
2). jQuery 对象是一个数组.
alert($btn.length);
3). 可以通过数组下标转为 DOM 对象.
alert($btn[1].firstChild.nodeValue);
[2]. 由 DOM 对象转为 jQuery 对象.
1). 选取一个 DOM 对象.
var btn = document.getElementById("btn");
2). 把 DOM 对象转为一个 jQuery 对象:使用 $() 进行包装.
alert($(btn).text());
6. 使用 id 选择器选择 id=btn1 的元素, 并为选择的 jQuery 对象添加 onclick 响应函数.
$("#btn1").click(function(){...});
7. jQuery 对象遍历的方式是 each , 在 each 内部的 this 是得到的 DOM 对象, 而不是一个jQuery 对象
$("#btn5").click(function(){
var leng = $(":checkbox[name=‘newsletter‘:checked]").each(function(){
alert(this.value);
});
});
8. 选取子元素需要在选择器前添加空格. div.one 同 .one .
$(".one :nth-child(2)").css("backgroud" ,"#ffbbaa");
9. 选择的是一个数组, 当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选中第一个被选中的值了.
10. jQuery 对象可以进行隐式迭代:
$("p").click(function(){...})
为选取的所有的 p 节点都添加了 click 响应函数.
jQuery 对象本身就是一个 DOM 对象的数组.
11. 在响应函数中, this 是一个 DOM 对象, 若想使用jQuery 对象的方法, 需要把其包装为 jQuery 对象:
使用 $() 把 this 包起来.
12. text() 方法是一个读写的方法:
不加任何参数, 读取文本值；
加参数, 为属性节点添加文本值(文本节点).
和 text() 方法类似的:attr() ,val().
13. 使用 jQuery 操作文本节点, 属性节点 及查找元素节点.
1). 操作文本节点:通过 jQuery 对象的 text() 方法
alert($("#bj").text());
$("#bj").text("TEST");
2). 操作属性节点:通过 jQuery 对象的 atter() 方法.
注:直接操作 value 属性值可以使用共便捷的 val() 方法.
alert($(":text[name=‘username‘]").attr("value"));
$(":text[name=‘username‘]").attr("value","TEST");
14. 创建节点:
使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽返回对应节点的 jQuery 对象 :
$("<li id=‘TEST‘>测试</li>")
15. 添加节点:
1). appendTo() 和 append():主语和宾语的位置不同:
("<li id=‘TEST‘>测试</li>").appendTo($("#city"));
$("#city").append("<li id=‘TEST‘>测试</li>");
2). prependTo() 和 prepend():主语和宾语位置不同:
$("<li id=‘TEST‘>测试</li>").prependTo($("#city"));
$("#city").prepend("<li id=‘TEST‘>测试</li>");
16. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false 可以取消指定元素的默认行为,比如 submit , a 等.
17. val() 方法,相当于 attr("value"),获取表单元素的 value 属性值
18. $.trim(str) 可以去除 str 的前后空格.
19. jQuery 对象的 remove() 方法:
将把jQuery 对象对应的DOM节点直接删除
$("#bj").remove();
20. 清空 game 节点:
jQuery 对象的 empty() 方法: 清空jQuery对象对应的 DOM 对象的所有的子节点.
$("#game").empty();
21. jQuery 调用jQuery 提供的方法的返回值如果是一个对象的话那么这个对象一定是一个 jQuery 对象
22. find() 方法:查找子节点,返回值为子节点对应的 jQuery 对象.
23. jQuery clone 方法:复制节点.
1). clone 节点时需要注意克隆后的节点的 id 属性.若原节点有 id 属性, 则克隆后,会在一个文档中出现两个相同 id 的节点的情况.
2). clone(true):在克隆节点的同时,克隆节点包含的事件.
24. jQuery replaceWith (replaceAll) 方法:替换节点.
1). repalceWith ,replaceAll 一对方法完成相同功能,只是主宾位置不同.
2). 以上的两个方法还有移动的功能.
3). 节点互换需要先克隆节点.
4). var $rl = $("rl").replaceWith($bj2); 返回的是被替换的节点 rl .
25.
1). 创建一个<li>测试</li> 节点,替换 #city 的最后一个 li 子节点.
$("<li>测试</li>").repalceAll($("#citi li:last"));
2). 创建一个<li>测试</li> 节点,替换 #city 的第二个 li 子节点.
$("#city li:eq(1)").replaceWith($("<li>测试</li>"));
3). 互换以下两个节点: #rl 和 #bj .(互换节点有移动的功能).
var $bj2 = $("#bj").clone(true);
var $rl = $("rl").replaceWith($bj2);
$("#bj").replaceWith($rl);
26. 使用 jQuery wrap ,wrapAll ,wrapInner:
1). 包装 li 本身.
#("#game li").wrap("<font color=‘red‘></font>");
2). 包装所有 li .
$("#city li").wrapAll("<font color=‘red‘></font>");
3). 包装 li 里边的文字.
$("#language li").wrapInner("<font color=‘red‘></font>");
27. val 不能直接获取 checkbox 被选择的值.若直接获取, 只能得到第一个被选择的值.
因为 $(":checkbox[name=‘c‘]:checked") 得到的是一个数组, 而使用val()方法只能获取数组元素的第一个值, 若希望打印被选择的所有值, 需使用 each 遍历
28. jQuery 样式相关的方法.
1). hasClass():某元素是否有指定的样式.
alert($("div").hasClass("SubCategoryBox"));//true
2). 移除样式.
$("div").removeClass("SubCategoryBox");
3). 添加样式.
$("div").addClass("SubCategoryBox");
4). 切换样式:存在则去除；没有则添加.
$(".showmore").click(function(){
$("div:first").toggleClass("SubCategoryBox");
return false;
});
5). 获取和设置元素透明度: opacity 属性.
alert($("div:first").css("opacity"));
$("div:first").css("opacity".0.5);
6). width() & height() .
alert($("div:first").width());
alert($("div:first").height());
$("div:first").width(400);
$("div:first").height(80);
7). 获取元素在当前视窗中的相对位移:offset() .
其返回对象包含了两个属性: top ,left .该方法只对可见元素有效.
alert($("div:first").offset().top);
alert($("div:first").offset().left);
29. onclick 事件的另一种写法: bind: 为某 jQuery 对象绑定事件.
$(".head").click(function(){...});
$(".head").bind("click" ,function(){...})
30. 事件冒泡:什么是事件的冒泡.
$("body").click(function(){
alert("1");
});
$("#content").click(function(){
alert("2");
});
$("span").click(function(){
alert("3");
//如何解决事件冒泡:通过在响应函数的结尾返回 false ,可以阻止冒泡.
return false;
});
31. toggle() 可以切换元素是否可见.
slideToggle():通过高度变化来切换匹配元素的可见性.
fadeToggle():通过透明度变化来切换匹配元素的可见性.
fadeTo():把不透明度以渐进的方式调整为透明的值.
32. var $category = $("li:gt(5):lt(7)");
此时的lt 是在 li:gt(5) 基础上运行的.
33. 总结:
[1]. jQuery 是 JavaScript 的一个函数库,非常方便,非常主流
[2]. 利用 jQuery 开发的步骤:
1). 导入 jQuery 库
2). 在 $(function(){}) 中编辑代码
[3]. jQuery 对象 vs DOM 对象
1). 两者不能使用对方的属性和方法
2). jQuery 对象是一个 DOM 数组对象, 所以可以使用下标的方式转为DOM对象.
var $btn = $("button");
var btn = $btn[0];
3). jQuery 对象是使用 $() 包装 DOM 对象后产生的对象。
$("select :selected").each(function(){
alert($(this).value);
})
[4]. jQuery 的选择器。
1). 选取被选中的 select 的 option 需要使用选取子节点的方式
$("select[name=‘test‘] :selected").each(funtion(){...})
2). jQuery 选择器可以综合使用
3). 如果选择器搞不定,可以调用方法实现
[5]. jQuery 对象的几个方法:
1). val():获取或设置表单元素的 value 属性值
设置值
$(":text:enable").val("TEST");
获取值
$(":text:enable".val())
2).attr(): 和val()方法类似
attr(name.val):为 name 属性赋值为 val
attr(name):获取 name 属性值
3).each():对 jQuery 对象进行遍历,其参数为 function, 函数内部的 this 是正在遍历的 DOM 对象
$("select :selected").each(function(){
alert(this.val);
})
4).text():和 val() 方法类似
text():获取元素节点的文本子节点的值
text(str):设置元素节点的文本子节点的值
[6].使用jQuery进行DOM操作:
1).新建（元素、属性、文本）节点:直接使用$()包装即可,返回值是一个jQuery对象。
var $TEST = $("<li id=‘TEST‘>测试</li>");
2).节点插入到文档中:
① append ,appendTo:把节点 A 插入为节点 B 的最后一个子节点
$("<li id=‘TEST‘>测试</li>").appendTo($("#city"));
$("#city").append("<li id=‘TEST‘>测试</li>");
② prepend ,prepenfTo
$("<li id=‘TEST‘>测试</li>").prependTo($("#city"));
$("#city").prepend("<li id=‘TEST‘>测试</li>");
③ before ,insertBefore
$("<li id=‘DDD‘>屌屌的</li>").insertBefore($("#bj"));
$("#bj").before("<li id=‘DDD‘>屌屌的</li>");
④ after ,insertAfter
$("<li id=‘DDD‘>屌屌的</li>").insertAfter($("#bj"));
$("#bj").after("<li id=‘DDD‘>屌屌的</li>");
3).删除节点:
$("#bj").remove();
4).清空节点:
$("#game").empty();
5).克隆节点:
$("#bj").clone(true);
6).替换节点:
$("<li>测试</li>").repalceAll($("#citi li:last"));
$("#city li:eq(1)").replaceWith($("<li>测试</li>"));
7).wrap ,wrapAll ,wrapInner:了解
8).val() ,html() ,text() ,attr() ,width() ,height() 等兼具有读写功能的方法.
//读取某个节点的html内容
alert($("#city").html());
//设置某个节点的html内容
$("#city").html("<li id=‘DDD‘>屌屌的</li>")
[7].技术点之外:
1). jQuery 对象可以进行隐式迭代: $("p").click(function(){...})为选取的所有的 p
节点都添加了 click 响应函数. jQuery 对象本身就是一个DOM对象的数组.
2). 在jQuery 中显示迭代:使用 each() 方法:
$(":checkbox[name=‘c‘]:checked").each(function(){
alert(this.value);
});
可以在显示迭代的响应函数的参数中通过index属性获取到正在遍历的对象的索引.
3).在响应函数中, this 是一个 DOM对象,若想使用jQuery对象的方法,需要把其包装为
jQuery对象:使用 $() 把 this 包起来.
4). defaultValue :DOM 对象的属性,可以获取表单元素的默认值.
5).通过 val() 为 radio 赋值:即便是为一组 radio 赋值,val参数中也应该使用数组,
使用一个值不起作用
6).val 不能直接获取 checkbox 被选择的值.若直接获取,只能得到第一个被选择的值.因
为 $(":checkbox[name=‘c‘]:checked")得到的是一个数组,而使用val()方法只能获取数组元素的第一个值,若希望打印被选择的所有值,需使用 each 遍历.
而 radio 被选择的只有一个,所以可以直接使用 val() 方法获取被选择的值.
7).1. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false 可以取消指定元素
的默认行为,比如 submit , a 等.
8). $.trim(str) 可以去除 str 的前后空格.
9).jQuery 对象的方法的连缀:调用一个方法的返回值还是调用的对象,于是可以在调用方法的后面依
然调用先前那个对象的其他方法.
10).find()方法:查找子节点,返回值为子节点对应的jQuery对象.
var $trNode = $(aNode).parent().parent();
//获取 $tr 的第一个 td 节点的文本节点的文本值.
var textContent = $trNode.find("tr:first").text();