快速学会jquery的基础使用

jQuery的选择器

选择器 — 用来获取DOM元素的方法

Id选择器 $("#box");
Class选择器 $(".box");
标签选择器 $(“span”);
包含选择器 $("#box p");
子选择器 $("#box>p");
群组选择器 $("#box,.cont,p");
属性选择器 $(“input[type=button]”);


特殊选择器
$("#box:first");
$("#box:last");
$("#box:eq(3)");
$("#box:odd");
$("#box:even");

jQuery的筛选器

筛选器方法 — 对选择器获取到的一组标签对象进行筛选-------- 便于链式编程

.first() 匹配第一个
.last() 匹配最后一个
.eq() 匹配指定下标
.find() 匹配指定的后代元素
.children() 匹配指定的子元素
.prev() 匹配上一个兄弟
.prevAll() 匹配上面所有的兄弟
.next() 匹配下一个兄弟
.nextAll() 匹配下面所有兄弟
.siblings() 匹配所有兄弟,不管上下
.parent() 匹配直接父级
.parents() 匹配所有父级
.end() 匹配链式编程选择器的上一级

jQuery的属性操作

1. .prop()方法

标签对象.prop(属性) 获取指定属性的属性值
标签对象.prop(属性 , 属性值) 设定属性和属性值
标签对象.prop(自定义属性 , 属性值) 设定自定义属性和属性值
注意：
设置内置属性时，可以直接显示在标签上，为 可见的内置属性
设置自定义属性时，不会直接显示在标签上，为 不可见的自定义属性

2. .attr()方法

标签对象.attr(属性) 获取指定属性的属性值
标签对象.attr(属性 , 属性值) 设定属性和属性值
标签对象.attr(自定义属性 , 属性值) 设定自定义属性和属性值
注意：
设置属性时，直接显示在标签上，为 可见的内置 或 自定义

3. .removeProp()方法

标签对象.removeProp(属性) 删除指定的属性，多用于自定义属性

4. .removeAttr()方法

标签对象.removeAttr(属性) 删除指定的属性

jQuery的样式操作

1. 常用操作方式

标签对象.css(属性) 获取指定属性的属性值
标签对象.css(属性 , 属性值) 设定属性以及属性值
标签对象.css({属性 : 属性值}) 以对象的形式,设定属性以及属性值
也可以同时设定多个属性
属性定义的方式比较灵活

标签对象的内容操作

1 .html()

效果类似于原生JavaScript的 innerHTML
标签对象.html() 没有参数是获取标签内容
标签对象.html(内容) 带有参数是设定标签内容

2 .text()

效果类似于原生JavaScript的 innerText
标签对象.text() 没有参数是获取标签内容
标签对象.text(内容) 带有参数是设定标签内容

3 总结

.html —> innerHTML
.text —> innerText
区别 : 都是小写字母
没有参数是获取,有参数是设定

标签对象的class操作

1 总结

.html —> innerHTML
.text —> innerText
区别 : 都是小写字母
没有参数是获取,有参数是设定

2常用操作方式

.hasClass() 判断标签是否具有某个class，返回布尔值
.addClass() 给标签添加class，可以添加多个
.removeClass() 删除标签的class，可以删除多个
.toggleClass() 判断当前标签是否具有某个class，有就删除，没有就添加