jQuery

2024-02-04 22:49:04

jQuery

基本选择器

  • id选择器

  • class选择器

  • 标签选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="d1">
    <p class="c1">
        <span></span>
    </p>
</div>

<script>
    var dEle = $('#d1');     //id选择器
    console.log(dEle);

    var cEle = $('.c1'); // class选择器
    console.log(cEle);

    var sEle = $('span');  //标签选择器
    console.log(sEle)
</script>
</body>
</html>

基本筛选器

:first // 第一个
:last // 最后一个
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    $('ul li').css('color', 'red');  //这个选择器表示ul 下面的li标签

    $('ul li:first ').css('color', 'red');

    $('ul li:last').css('color', 'red');

    $('ul li:even').css('color', 'red');
    $('ul li:odd').css('color', 'red');

    $('ul li:lt(3)').css('color', 'red');

    $('ul li:gt(3)').css('color', 'red');
</script>
</body>
</html>

ps： $('div.c1')  //找到有c1类属性的div标签
	$('div,li')  //同时找到这两个标签

属性选择器--主要针对自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div username="egon">div</div>

<script>
    $('[username]').css('color', 'red');
    $('[username="egon"]').css('color', 'red');  // 属性等于，，还可以是属性不等于

	$('input[type="text"]')              //找input标签，找属性是type="text"的input
</script>
</body>
</html>

表单筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" value="egon">

<script>
    $(':text').val('jason')  //设置值
	$(':text').val()       //获取值
</script>
</body>
</html>

JQ链式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="d1">div
    <p class="c1">p</p>
    <p class="c2">p2
        <a href="">a2</a>
        <a href="">a</a>
    </p>
</div>
<p>p3</p>
<span>span</span>
<script>
    var aEle = $('#d1').next().next().css('color', 'red');  // 获取与div同级的下一个在下一个元素，也就是span
    console.log(aEle);

    $('div a').prev().css('color', 'red');  // 获取div里面a标签的同级的上一个元素，也就是<a href="">a2</a>
</script>
</body>
</html>


下一个元素：
	$("#id").next()
	$("#id").nextAll()
上一个元素：
	$("#id").prev()
	$("#id").prevAll()


/*
这里是jq的链式操作，之所以可以一直往下点next，那是因为点这个方法得到的是一个对象，对象又可以继续点这个方法，
python里面也是有的，而想要在python里面实现链式操作，那么没点一次就要继续得到一个对象，那么也就是说，类的每一个返回值都是对象，，也就是return self
*/

标签操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="d1" class="c1"></div>

<script>
    $('#d1').addClass('c2');   //增加class
    $('#d1').removeClass('c1'); //删除class
    $('#d1').toggleClass('c1'); //有就删除，没有就新增

    console.log($('#d1').hasClass('c1'))//判断是否存在
 
    $('#d1').text('div')  //添加普通文本
    $('#d1').html('<h1>div</h1>') //添加可以识别标签的文本
</script>
</body>
</html>

设置属性--自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="d1"></div>
<script>
    $('#d1').attr('username', 'lyh');   //设置属性
    console.log($('#d1').attr('username'))  //获取属性
</script>
</body>
</html>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button id="d1">click me</button>

<script>
    $('#d1').click(function () {   //这个就是点击事件
        alert(213)
    })
</script>
</body>
</html>

###############################################################################################
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<select name="" id="d1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<script>

    $('#d1').change(function () {   //获取select框的选的值
        alert($(this).val())   //这里固定写法记住就行，，this指代的是当前对象，但是当前对象不是jq对象，所以需要加一个$符号转化成jq对象
    })
</script>
</body>
</html>
上一篇：三种基本选择器


下一篇：【jQuery从入门到精通】04-jQuery对象的过滤与查找