jQuery基础&过滤&筛选

今日所学大纲

一、美元符号含义是什么？

  • 传入的参数为【函数】时：表示页面加载完成之后。相当于window.onload = function(){}
  • 传入的参数为【html字符串】时：会帮我创建这个html的【标签对象】
  • 传入的参数为【选择器字符串】时：
    • $(“#id属性值”)：id选择器，根据id查询标签对象
    • $(“标签名【如div等】”)：标签名选择器，根据指定的标签名查询标签对象
    • $(“.class属性值”)：类型选择器，可以根据class属性查询标签对象
  • 传入的参数为【DOM对象】时：会把这个DOM对象转化为JQuery对象

二、区分DOM对象和jQuery对象

DOM对象Alert出来的效果是——-[object HTMLButtonElement]
JQuery对象Alert出来的效果是——-[object object]
JQuery对象的本质：就是DOM对象的数组与JQuery提供的一系列功能函数
JQuery对象与DOM对象的使用区别：JQuery对象不能使用DOM对象的属性和方法，DOM对象也不能使用JQuery对象的属性和方法

三、DOM对象和jQuery对象间相互转化

DOM———>JQuery对象
先有DOM对象后使用———$(DOM对象)就可以转化成JQuery对象

JQuery对象———>DOM
先有JQuery对象后———JQuery对象[下标]取出相应的DOM对象

四、jQuery的选择器

基础选择器：

1
2
3
4
5
6
7
#ID选择器： 根据id查找标签对象
.class选择器： 根据class查找标签对象
element选择器： 根据标签名查找标签对象
*选择器： 表示任意的，所有元素
Selector1,Selector1 组合选择器： 合并选择器1，选择器2的结果并返回

p.myClass ————>表示标签名必须是p标签，并且class类型还要是myClass的（二者同时成立）

层级选择器：

ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素

1
* 例子：$(“form input");

parent > child 子元素选择器：在给定的父元素下匹配所有子元素

1
* 例子：$(“form > input");

prev + next 相邻元素选择器：匹配所有紧接在prev元素后的next元素(同级元素)

1
* 例子：$(“label > input");

prev ～ sibings 之后的兄弟元素选择器：匹配prev元素之后的所有sibings元素(同级元素)

1
* 例子：$(“form ~ input”);
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
   //1.选择 body 内的所有 div 元素
   $("#btn1").click(function(){
      $("body div").css("background", "#bbffaa");
   });


   //2.在 body 内, 选择div子元素  
   $("#btn2").click(function(){
      $("body > div").css("background", "#bbffaa");
   });
}

过滤选择器：

:first 获取第一个元素
:last 获取最后一个元素
:not(selector) 去除所有括号内给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从0开始计数
:odd 匹配所有索引值为奇数的元素，从0开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如h1,h2,h3,h4,h5,h6之类的元素
:animated 匹配所有正在执行动画效果的元素

1
2
3
4
5
6
7
8
9
10
11
$(function () {
   //1.选择 id 为 one 的元素 "background-color","#bbffaa"
   $("#btn1").click(function () {
      // css() 方法 可以设置和获取样式
      $("#one").css("background-color","#bbffaa");
   });
   //2.选择 class 为 mini 的所有元素
   $("#btn2").click(function () {
      $(".mini").css("background-color","#bbffaa");
   });
}

五、jQuery的过滤器

内容过滤器：

:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素。如：


:parent 匹配含有子元素或者文本的元素与:empty相反
:has(selector) 匹配含有选择器所匹配的元素的元素

1
2
3
—>理解：<div><p>JH</p></div>
—>代码：$(“div:has(p)”).addClass(“text”);
—>结果：<div class=“test"><p>JH</p></div>
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
   //1.选择 含有文本 'di' 的 div 元素
   $("#btn1").click(function(){
      $("div:contains('di')").css("background", "#bbffaa");
   });


   //2.选择不包含子元素(或者文本元素) 的 div 空元素
   $("#btn2").click(function(){
      $("div:empty").css("background", "#bbffaa");
   });
}

属性过滤器：

[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用

1
2
3
4
5
6
7
8
9
10
$(function() {
   //1.选取含有 属性title 的div元素
   $("#btn1").click(function() {
      $("div[title]").css("background", "#bbffaa");
   });
    //2.选取 属性title值等于'test'的div元素
   $("#btn2").click(function() {
      $("div[title='test']").css("background", "#bbffaa");
   });
}

表单过滤器：

由于表单过滤器过多，请根据需要查找API即可😊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
   // val()可以操作表单项的value属性值
   // 它可以设置和获取
   $(":text:enabled").val("我是万能的程序员");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
   $(":text:disabled").val("管你可用不可用，反正我是万能的程序员");
});
//each方法是jQuery对象提供的遍历方法
//在下拉列表中加上multiple=“multiple”就会变成多选
//<select multiple=“multiple”></select>

}

六、jQuery的筛选

过滤

eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)1.6*
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])

查找

children([expr])
closest(expr,[con]|obj|ele)1.6*
find(expr|obj|ele)
next([expr])
nextall([expr])
nextUntil([exp|ele][,fil])1.6*
parent([expr])
parents([expr])
parentsUntil([exp|ele][,fil])1.6*
prev([expr])
prevall([expr])
prevUntil([exp|ele][,fil])1.6*
siblings([expr])

串联

add(expr|ele|html|obj[,con])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//(1)eq()  选择索引值为等于 3 的 div 元素
$("#btn1").click(function(){
   $("div").eq(3).css("background-color","#bfa");
});
//(2)first()选择第一个 div 元素
 $("#btn2").click(function(){
    //first()   选取第一个元素
   $("div").first().css("background-color","#bfa");
});
//(3)last()选择最后一个 div 元素
$("#btn3").click(function(){
   //last()  选取最后一个元素
   $("div").last().css("background-color","#bfa");
});
//(4)filter()在div中选择索引为偶数的
$("#btn4").click(function(){
   //filter()  过滤   传入的是选择器字符串
   $("div").filter(":even").css("background-color","#bfa");
});

Tip:
本人学习编程途径为B站-尚硅谷；在此致以崇高的敬意👏👏👏

TOPへ
防止看官们迷路并且便于交流,欢迎大家关注我的公众号啊～⬇️⬇️⬇️⬇️⬇️
公众号