《锋利的JQuery》notes
Chapter 1 认识jQuery[*]jQuery对象和DOM对象的相互转换
获取jQuery对象:
var $variable = JQuery对象;获取DOM对象:
var variable = DOM对象;jQuery对象转换成DOM对象:
var $cr = $("#cr"); //jQuery对象var cr = $cr; //DOM对象Chapter 2 jQuery选择器
$('#tt')获取的是对象,即使网页上没有这个元素也不会报错。应该根据获取的元素长度来判断是否存在
if ( $("#tt").length > 0) { //do something}
[*]过滤选择器: 以一个冒号(:)开头
:first 选取第一个元素
:even 选取索引是偶数的所有元素
:odd 选取索引是奇数的所有元素
:eq(index) 选取索引等于index的元素,从0开始计算(只匹配一个元素)
[*]内容过滤选择器
:empty 选取不包含子元素或者文本的空元素
:has(selector) 选取含有选择器所匹配的元素的元素
[*]属性过滤选择器
$("div") 选取拥有属性id的元素
[*]子元素过滤选择器
:nth-child(index) 选取每个父元素下的第index个子元素
[*]表单选择器
:input 选取所有的<input>、<textarea>、<select>和button元素
$("form :input").length,(注意和$("form input")的区别)
[*]选择器的注意事项
1、 选择器含有特殊符号. 、 [ 等
需要使用转义字符转义
$("#id\\#b") 转义特殊字符“#”,需要两个\\,一个转义用,一个双引号用
2、 选择器含有空格
$('.test :hidden') 带空格的,选取class为"test"的元素里面的隐藏元素
$('.test:hidden') 不带空格,选取隐藏的class为"test"的元素
Chapter 3 jQuery中的DOM操作
[*]属性节点attr()
查找属性节点:$("p").attr("title"); 获取<p>元素的节点属性title
删除节点:removeAttr()
[*]插入节点 (<p>我想说</p>)
向元素内部追加内容:
$("p").append("<b>你好</b>"); <p>我想说 <b>你好</b></p>
在元素之后插入内容:
$("p").after("<b>你好</b>"); <p>我想说 </p><b>你好</b>(insertAfter() 则颠倒了操作)
[*]删除节点
remove() 该节点所包含的所有后代节点将同时被删除,这个方法的返回值的一个指向已被删除的节点的引用。
detach() 也是删除所有匹配的元素,但是和remove()不同的是,所有绑定的事件、附加的数据都会留下来。
empty() 清空节点,只是内容被清空
[*]复制节点
$("li").click(function() { $(this).clone().appendTo("ul");};复制的新元素并不具有任何行为。在clone()方法中传递一个参数true,则复制元素的同时复制元素所绑定的事件。
[*]样式
addClass()方法:追加class类
removeClass():移除样式
toggle():行为的重复切换
toggleClass():类名的重复切换(类名存在则删除,不存在则添加)
[*]设置和获取HTML、文本和值
html() 读取或设置某个元素的HTML内容 (类似innerHTML)
text() 读取或设置某个元素的文本内容 (jQuery的text()方法支持所有浏览器)(类似innerText)
val() 设置和获取元素的值 (类似value属性)
[*]遍历节点
children() 取得匹配元素的子元素集合(不考虑其他后代元素)
next() 取得匹配元素后面紧邻的同辈元素
siblings() 取得匹配元素前后所有的同辈元素
Chapter 4 jQuery中的事件和动画
$(document).ready()方法: 在DOM载入就绪时,就能对其进行操纵。每次调用都会在现有行为上追加新的行为。
简写方式
$(function(){...}) 或 $().ready(function(){...});
https://blog.51cto.com/u_13878755/4721075
页:
[1]