0%

jQuery基本操作

jQuery基本操作

首先引入jquery文件库

1
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

jQuery对象

jQuery对象是一个数组,可以通过数组下标转为DOM对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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 标签选择器
  • *匹配所有元素
1
2
3
$("#id")
$(".class")
$("div")

层次选择器

层次选择器根据DOM元素的层次关系来获取元素,主要的层次关系包括后代、父子、相邻、兄弟关系

  • 派生选择器 $(“div span”) 选取div的所有span(后代)元素,关系是祖先和后代

  • 父子选择器 $(“parent > child”) 选取parent元素下的child元素,关系是父子

  • 直接兄弟选择器 $(“prev + next”) 选取紧接在prev元素后的下第一个兄弟关系的next元素

    可以使用.next()来代替,如 $(“div”).next()

  • 后续全部兄弟节点选择器 $(“prev ~ siblings”) 选取prev元素后的所有兄弟关系的siblings元素

    可以使用.nextAll()来代替,如 $(“div”).nextAll()

(“prev ~ siblings”)选择器只能选择”#prev”元素后面的同辈元素,而jquery中的方法siblings()与前后位置无关,只要是同辈节点就可以选取

1
2
3
4
5
6
7
8
9
10
11
12
<div id="content">
<span></span>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(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") 选取所有被选中的选项元素(下拉框)

表单选择器

为表单元素量身定制的

  • :input 获取所有input、textarea、select
  • :text 获取所有单行文本框
  • :password 获取所有密码框
  • :radio 获取所有单选
  • :checkbox 获取所有多选
  • :submit 获取所有提交按钮
  • :image 获取所有图像
  • :reset 获取所有重置按钮
  • :button 获取所有按钮
  • :file 获取所有文件

操作文本节点

使用text()方法

1
2
3
4
// 读取文本
$("#bj").text();
// 修改文本 将文本改成北京
$("bj").text("北京");

操作属性节点

使用attr()方法

1
2
3
4
//获取属性  获取value属性
$("input[name='username']").attr("value");
//修改属性 修改value属性值为张三
$("input[name='username']").attr("value","张三");

创建节点并插入节点

创建节点

使用jquery的工厂函数$(html) 会根据html来创建一个DOM对象,并把这个DOM对象包装成一个jQuery对象

插入节点

创建好节点之后需要将创建的节点插入文档中

  • append() 向每个匹配的元素的内部结尾处追加内容
  • appendTo() 将每个匹配的元素追加到指定元素中的内部结尾处
  • prepend() 向每个匹配元素的内部的开始处插入内容
  • prependTo() 向每个匹配的元素插入到指定的元素内部的开始处
1
$("<li id='bj'>北京</li>").appendTo($("#city"));
  • after() 向每个匹配的元素之后插入内容
  • insertAfter() 向每个匹配的元素的插入到指定的元素之后
  • before() 向每个匹配的元素之前插入内容
  • insertBefore() 向每个匹配的元素的插入到指定的元素之前
1
$("<li id='sh'>上海</li>").insertAfter($("#bj"));

删除节点

  • remove() 删除所有匹配的元素,该节点包括子节点都被删除
  • empty() 清空元素中所有后代节点(不包括属性节点)
1
2
3
$("#bj").remove();

$("#city").empty();

属性操作

可以使用attr()方法来进行属性操作

jQuery中提供了很多方法来实现获取和设置某些属性。

  • attr()
  • html() 读取和设置某个元素中的HTML内容
  • text() 读取和设置某个元素中的文本内容
  • val() 读取和设置某个元素中的值 value属性
  • height()
  • width()
  • css()

removerAttr()可以删除指定元素的指定属性

样式操作

  • addClass() 追加样式
  • removeClass() 移除样式
  • toggleClass() 切换样式
  • hasClass() 判断元素中是否含有某个class

欢迎关注我的其它发布渠道