《锋利的JQuery》notes

Chapter 1    认识jQuery

  • jQuery对象和DOM对象的相互转换

获取jQuery对象:

var $variable = JQuery对象;
获取DOM对象:
var variable = DOM对象;

jQuery对象转换成DOM对象:

var $cr = $("#cr");    //jQuery对象
var cr = $cr[0];    //DOM对象

Chapter 2    jQuery选择器

$('#tt')  获取的是对象,即使网页上没有这个元素也不会报错。应该根据获取的元素长度来判断是否存在

if ( $("#tt").length > 0) {
    //do something
}

  • 过滤选择器: 以一个冒号(:)开头

:first    选取第一个元素

:even    选取索引是偶数的所有元素

:odd     选取索引是奇数的所有元素

:eq(index)    选取索引等于index的元素,从0开始计算(只匹配一个元素)

  • 内容过滤选择器    

:empty     选取不包含子元素或者文本的空元素

:has(selector)    选取含有选择器所匹配的元素的元素

  • 属性过滤选择器

$("div[id]")     选取拥有属性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(){...});



猜你喜欢

转载自blog.csdn.net/weixin_41892205/article/details/80447591