jQuery基本操作
jQuery对象
jQuery对象是一个数组，可以通过数组下标转为DOM对象
// jQuery和DOM对象的互转
// 相当于window.onload
$(function(){
$("button").click(
function () {
alert("helloWorld");
var $btn = $("button");
alert($btn.length);
// 使用数组下标来转为DOM对象
alert($btn[0].firstChild.nodeValue);
var btn = document.getElementById("btn");
// 使用$()进行包装将DOM对象转为jQuery对象
alert($(btn).text());
}
)
})
基本选择器
基本选择器根据id，class和标签名来查找DOM元素
- #id id选择器
- .class class选择器
- element 标签选择器
- *匹配所有元素
$("#id")
$(".class")
$("div")
层次选择器
- 派生选择器 $("div span") 选取div的所有span(后代)元素 不考虑层次
- 父子选择器 $("parent > child") 选取parent元素下的child元素
- 直接兄弟选择器 $("prev + next") 选取紧接在prev元素后的下第一个兄弟关系的next元素
- 后续全部兄弟节点选择器 $("prev ~ siblings") 选取prev元素后的所有兄弟关系的siblings元素
("prev ~ siblings")选择器只能选择"#prev"元素后面的同辈元素，而jquery中的方法siblings()与前后位置无关，只要是同辈节点就可以选取
<div id="content">
<span></span>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
</div>
$(function () {
// 派生选择器 $("div span") 选取div的所有span(后代)元素 不考虑层次
var ele = $("div span");
alert(ele.length); // 4
// 父子选择器 $("parent > child") 选取parent元素下的child元素
var ele1 = $("div > span");
alert(ele1.length); // 1
// 直接兄弟选择器 $("prev + next") 选取紧接在prev元素后的下第一个兄弟关系的next元素
var ele2 = $("div span + p");
alert(ele2.length); // 1
// 后续全部兄弟节点选择器 $("prev ~ siblings") 选取prev元素后的所有兄弟关系的siblings元素
var ele3 = $("div span ~ p");
alert(ele3.length); // 3
})
过滤选择器
过滤选择器通过特定的过滤规则来筛选出所需的DOM元素，该选择器都以":"开头
按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器
基本过滤选择器
- :first $("li:first") 选取第一个元素
- :last $("li:last") 选取最后一个元素
- :not(selector) $("li:not(.red)") 选取class不是red的li元素
- :even $("li:even") 选取索引(0开始)是偶数的所有元素
- :odd $("li:odd") 选取索引(0开始)是奇数的所有元素
- :eq(index) $("li:eq(2)") 选择索引等于index的元素
- :gt(index) $("li:gt(2)") 选择索引大于index的元素
- :lt(index) $("li:lt(2)") 选择索引小于index的元素
- :header $(":header") 选择标题元素 h1~h6
- :animated $("animated") 选择正在执行动画的元素
- :focus $(":focus") 选择当前被焦点的元素
内容过滤选择器
- :contains(text) $(":contains('com')") 选取含有"com"文本的元素
- :empty $(":empty") 选取不包含子元素或空文本的元素
- :has(selector) $("has(.red)") 选取含有class是red的元素
- :parent $(":parent") 选取含有子元素或文本的元素
可见性过滤选择器
- :hidden $(":hidden") 选取所有不可见元素
- :visible $(":visible") 选取所有可见元素
属性过滤选择器
- [attribute] $("div[id]") 匹配包含给定属性的元素，查找含有id属性的div元素
- [attribute=value] $("input[name='basketball']") 匹配给定属性是某个特定值的元素，查找name属性值为basketball的input元素
- [attribute!=value] $("input[name!='basketball']") 匹配给定属性是某个特定值的元素，查找name属性值不为basketball的input元素
- [attribute^=value] $("input[name^='foot']") 匹配给定的属性是以某些值开始的元素
- [attribute$=value] $("input[name$='end']") 匹配给定的属性是以某些值结尾的元素
- [attribute=value] $("input[name='com']") 匹配给定的属性是包含某些值的元素
- [selector1][selector2] $("input[id][name='aa']") 复合属性过滤选择器，同时满足多个条件，找到含有id属性，且name等于aa的元素
子元素过滤选择器
- :first-child $("li:first-child") 获取每个父元素的第一个子元素
- :last-child $("li:last-child") 获取每个父元素的最后一个子元素
- :only-child $("li:only-child") 获取只有一个子元素的元素
- :nth-child(odd/even/eq(index)) 获取每个自定义子元素的元素(索引值从1开始)
表单对象属性过滤选择器
- :enabled $("#form1:enabled") 选取id为form1所有可用元素
- :disabled $("#form1:enabled") 选取id为form1所有不可用元素
- :checked $("input:checked") 选取所有被选中的input元素(单选框、复选框)
- :selected $("select option:selector") 选取所有被选中的选项元素(下拉框)
操作文本节点
使用text()方法
// 读取文本
$("#bj").text();
// 修改文本 将文本改成北京
$("bj").text("北京");
### 操作属性节点
使用attr()方法
//获取属性 获取value属性
$("input[name='username']").attr("value");
//修改属性 修改value属性值为张三
$("input[name='username']").attr("value","张三");
创建节点并插入节点
创建节点
使用jquery的工厂函数$(html) 会根据html来创建一个DOM对象，并把这个DOM对象包装成一个jQuery对象
插入节点
创建好节点之后需要将创建的节点插入文档中
- append() 向每个匹配的元素的内部结尾处追加内容
- appendTo() 将每个匹配的元素追加到指定元素中的内部结尾处
- prepend() 向每个匹配元素的内部的开始处插入内容
- prependTo() 向每个匹配的元素插入到指定的元素内部的开始处
$("<li id='bj'>北京</li>").appendTo($("#city"));
- after() 向每个匹配的元素之后插入内容
- insertAfter() 向每个匹配的元素的插入到指定的元素之后
- before() 向每个匹配的元素之前插入内容
- insertBefore() 向每个匹配的元素的插入到指定的元素之前
$("<li id='sh'>上海</li>").insertAfter($("#bj"));
删除节点
- remove() 删除所有匹配的元素，该节点包括子节点都被删除
- empty() 清空元素中所有后代节点(不包括属性节点)
$("#bj").remove();
$("#city").empty();
属性操作
可以使用attr()方法来进行属性操作
jQuery中提供了很多方法来实现获取和设置某些属性。
- attr()
- html() 读取和设置某个元素中的HTML内容
- text() 读取和设置某个元素中的文本内容
- val() 读取和设置某个元素中的值 value属性
- height()
- width()
- css()
removerAttr()可以删除指定元素的指定属性
样式操作
- addClass() 追加样式
- removeClass() 移除样式
- toggleClass() 切换样式
- hasClass() 判断元素中是否含有某个class
事件操作
加载事件
$(document).ready() 网页中所有的DOM绘制完毕后执行，可能DOM元素关联的东西并没有加载完，简写$() 与window.onload类似
事件绑定
对匹配的元素进行特定的事件绑定 bind()
$(".class").bind("click",function(){
alert("点击事件绑定");
})
合成事件
- hover() 模拟光标悬停事件，当光标移到元素上时，会触发指定的第一个元素，光标移出这个元素时，触发第二个函数
- toggle() 模拟鼠标连续单击事件，第一次单击元素，触发指定的第一个函数，再次单击同一个元素，触发指定的下一个函数
移除事件
- 移除某个元素上的某类事件 $("#btn").unbind("click")
- 移除某个元素的所有事件 $("#btn").unbind()
