jQuery基础操作指南

发表时间: 2021-04-02 09:33

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()