选择器

说明

  • 选择器本身只是一个有特定语法规则的字符串,没有实质用处

  • 它的基本语法规则使用的就是CSS的选择器语法,并对此进行扩展

  • 只有调用$(),并将选择器作为参数传入才能起作用

  • $(selector)作用:

    根据选择器规则在整个文档中查找所有匹配的标签的数组,并封装成jQuery对象返回

分类

  • 基本选择器(最基本最常用的选择器)

    • #id
    • element
    • .class
    • *
    • selector1,selector2,selectorN(并集选择器)
    • selector1selector2selectorN(交集选择器)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //需求1:选择id为div1的元素
    $('#div1').css('background','red');//只修改一个样式可以直接传两个字符串,多个样式要传对象
    //需求2:选择所有的div元素
    $('div').css('background','red');
    //需求3:选择所有class属性为box的元素
    $('.box').css('background','red');
    //需求4:选择所有div和span元素
    $('div,span').css('background','red');
    //需求5:选择所有class属性为box的div元素
    $('div.box').css('background','red');
    //需求6:选择所有元素
    $('*').css('background','red');
  • 层次选择器(查找子元素,后代元素,兄弟元素的选择器)

    • ancestor descendant
    • parent > child
    • prev + next
    • prev ~ siblings
    1
    2
    3
    4
    5
    6
    7
    8
    //需求1:选择ul下的所有span
    $('ul span').css('background', 'yellow');
    //需求2:选择ul下的所有子元素span
    $('ul>span').css('background', 'yellow');
    //需求3:选择class属性为box的下一个li
    $('.box+li').css('background','yellow');
    //需求4:选择ul下class属性为box的后面所有兄弟元素
    $('ul .box+li~*').css('background','yellow');
  • 过滤选择器(在原有选择器匹配的元素中进一步进行过滤的选择器)

    • 基本
    • 内容
    • 可见性
    • 属性
    • 子元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    //需求1:选择第一个div
    $('div:first').css('background', 'yellow');
    //需求2:选择最后一个class为box的元素
    $('.box:last').css('background', 'yellow');
    //需求3:选择class属性不为box的div
    $('div:not(.box)').css('background','yellow'); //没有属性也可以
    //需求4:选择第二个和第三个li元素
    $('li:lt(3):gt(0)').css('background','yellow'); //多个过滤选择器是依次执行的,不是同时
    //需求5:选择内容为BBBBB的li
    $('li:contains("BBBBB")').css('background','yellow');
    //选择隐藏的li
    console.log($('li:hidden').length, $('li:hidden')[0]);
    //选择有title属性的li元素
    $('li[title]').css('background','yellow');
    //选择所有属性title为hello的li元素
    $('li[title="hello"]').css('background','yellow');
  • 表单选择器

    • 表单
    • 表单对象属性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //需求1:选择不可用的文本输入框
    $(':text:disabled').css('background', 'yellow');
    //需求2:显示选择爱好的个数
    console.log($(':checkbox:checked').length);
    //需求3:点击提交显示选择城市的名称
    $(':submit').click(function(){
    var city = $('select>option:selected').html();
    alert(city);
    })

$工具方法

$.each():遍历数组或对象中的数据

1
2
3
4
5
6
7
8
9
var obj = {
name: 'Tom',
setName: function(name){
this.name = name;
}
};
$.each(obj, function(key, value){
console.log(key, value);
});

输出结果:

image-20210607164052694

$.trim():去除字符串两边的空格

1
2
var str = '   hello world   ';
console.log("====="+$.trim(str)+"=====");

输出结果:

image-20210607173241987

$.type(obj):得到数据类型

1
console.log($.type($)); //function

$.isArray(obj):判断是否是数组

1
console.log($.isArray($('body')))   //false    应是jQuery对象,伪数组

$.isFunction(obj):判断是否是函数

1
console.log($.isFunction($));   //true

$.parseJSON(json):解析json字符串转换为js对象/数组

1
2
3
4
5
6
7
8
9
10
var json = '{"name":"Tom","age":12}';   //json对象
//json对象 ===》JS对象
console.log($.parseJSON(json));
//json数组 ===》JS数组
var json2 = '[{"name":"Tom","age":12},{"name":"Jack","age":16}]'; //json数组
console.log($.parseJSON(json2));
//上述方法不常用
//常用如下:
JSON.parse(jsonString); //json字符串===》JS对象或数组
JSON.stringify(jsonobj/jsArray); //js对象/数组===》json字符串

输出结果:

image-20210607172832918

效果:多Tab点击切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#tab>li{
list-style-type: none;
float: left;
width: 80px;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
background-color: blue;
}
#container{
position: relative;
background-color: aqua;
clear: both;
width: 240px;
}
</style>
</head>
<body>
<h2>多Tab点击切换功能</h2>
<ul id="tab">
<li id="tab1" value="1" style="background-color: chartreuse;">10元套餐</li>
<li id="tab2" value="2">30元套餐</li>
<li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
<div id="content1" style="display: block;">
10元套餐详情:<br>每月套餐内拨打100分钟,超出部分2毛每分钟
</div>
<div id="content2" style="display: none;">
30元套餐详情:<br>每月套餐内拨打300分钟,超出部分1.5毛每分钟
</div>
<div id="content3" style="display: none;">
10元套餐详情:<br>每月套餐内拨打500分钟,超出部分1毛每分钟
</div>
</div>
<script src="jquery-3.6.0.js"></script>
<script>
var $contents = $('#container>div');
//给3个li加监听
$('#tab>li').click(function () { //隐式遍历
$('#tab>li').css('background-color', 'blue');
$(this).css('background-color', 'chartreuse');
//隐藏所有内容div
$contents.css('display', 'none');
//显示对应内容div
//得到当前点击的li在兄弟中的下标
var index = $(this).index();
//找到对应内容的div,并显示
$contents[index].style.display = 'block';
// $($contents[index]).css('display', 'block'); //上面效率更高
})
</script>
</body>
</html>

效果如下:

moretab

属性

  • 读取第一个div的title属性

    1
    console.log($('div:first').attr('title'));
  • 给所有div设置name属性(value为atguigu)

    1
    $('div').attr('name', 'atguigu');
  • 移出所有div的title属性

    1
    $('div').removeAttr('title');
  • 给所有的div设置class=“guiguClass”

    1
    $('div').attr('class', 'guiguClass');
  • 给所有的div添加class=“abc”

    1
    $('div').addClass('abc');
  • 移除所有div的guiguClass的class

    1
    $('div').removeClass('guiguClass');
  • 得到最后一个li的标签体文本

    1
    console.log($('li:last').html());
  • 设置第一个li的标签体文本

    1
    $('li:first').html('<h1>mmmmmmmm</h1>');
  • 得到输入框的value值

    1
    $(':text').val();
  • 设置输入框的值为atguigu

    1
    $(':text').val(atguigu);
  • 全选按钮实现全选功能

    1
    2
    3
    4
    var $checkboxs = $(':checkbox');
    $('button:first').click(function(){
    $checkboxs.prop('checked', true);
    })
  • 全不选按钮实现全不选功能

    1
    2
    3
    $('button:last').click(function(){
    $checkboxs.prop('checked', false);
    })

attr():操作属性值为非布尔值的属性

prop():专门操作属性值为布尔值的属性

CSS

  • 得到第一个p标签的颜色

    1
    console.log($('p:first').css('color'));
  • 设置所有p标签的文本颜色

    1
    $('p').css('color', 'red');
  • 设置第二个p标签的字体颜色(#ff0011),背景(blue),宽(300px),高(30px)

    1
    2
    3
    4
    5
    6
    $('p:eq(1)').css({
    color: '#ff0011',
    background: 'blue',
    width: 300,
    height: 30 //jQuery可不加px
    });

位置

获取/设置标签的位置数据

​ offset():相对于页面左上角的坐标

​ position():相对于父元素左上角的坐标

  • 点击id为btn1的元素

    • 打印div1相对于页面左上角的位置
    • 打印div1相对于父元素左上角的位置
    1
    2
    3
    4
    5
    6
    7
    8
    $('#btn1').click(function(){
    //打印div1相对于页面左上角的位置
    var offset = $('.div1').offset();
    console.log(offset.left, offset.top);
    //打印div1相对于父元素左上角的位置
    var position = $('.div').position();
    console.log(position.left, position.top);
    })
  • 点击btn2

    • 设置div2相对于页面的左上角的位置
    1
    2
    3
    4
    5
    6
    $('#btn2').click(function(){
    $('.div2').offset({
    left: 50,
    top: 100
    })
    })

scroll

scrollTop():读取/设置滚动条的Y坐标

$(document.body).scrollTop()+$(document.documentElement).scrollTop()

​ 读取页面滚动条的Y坐标(兼容IE,Chrome)

$(‘body,html’).scrollTop(60);

​ 滚动到指定位置(兼容IE,Chrome)

1
2
3
4
5
6
7
8
9
10
11
$('#btn1').click(function(){
//得到div滚动条坐标
console.log($('div').scrollTop());
//得到页面滚动条的坐标
console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop());
})
//让div或页面的滚动条滚动到指定位置
$('#btn2').click(function(){
$('div').scrollTop(200);
$('html,body').scrollTop(300);
})

效果:回到顶部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#to_top').click(function(){
var $page = $('html,body');
var distance = $('html').scrollTop() + $('body').scrollTop();
var time = 500; //花费总时间
var intervalTime = 10; //每次调用时间
var itemDistance = distance/(time/intervalTime);
var intervalId = setInterval(function(){
distance -= itemDistance;
if(distance <= 0){
distance = 0;
clearInterval(intervalId);
}
$page.scrollTop(distance);
}, intervalTime)
})

尺寸

  • 内容尺寸

    • height():height
    • width():width
  • 内部尺寸

    • innerHeight():height+padding
    • innerWidth():width+padding
  • 外部尺寸

    • outerHeight(false/true):height+padding+border

    • outerWidth(false/true):width+padding+border

      如果是true,加上margin

过滤

  • ul下的li标签第一个

    1
    2
    var $lis = $('ul>li');
    $lis.first().css('background', 'red');
  • ul下li标签最后一个

    1
    2
    var $lis = $('ul>li');
    $lis.last().css('background', 'red');
  • ul下li标签的第二个

    1
    2
    var $lis = $('ul>li');
    $lis.eq(1).css('background', 'red');
  • ul下li标签中title属性为hello的

    1
    2
    var $lis = $('ul>li');
    $lis.filter('[title=hello]').css('background', 'red');
  • ul下li标签中title属性不为hello的

    1
    2
    var $lis = $('ul>li');
    $lis.not('[title=hello]').css('background', 'red');
  • ul下有span子标签的li标签

    1
    2
    var $lis = $('ul>li');
    $lis.has('span').css('background', 'red');

查找