jquery.选择器

最新推荐文章于 2024-03-21 06:11:21 发布

liwangdeng

最新推荐文章于 2024-03-21 06:11:21 发布

阅读量1.6k

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/liwangdeng/article/details/123493029

版权

1.本章我们学习jquery，先对jquery做一个简单的概述，jquery与我们之前学习的js类似，jquery不是一门语言，是js的框架也可以说是js的简化版

2.jquery的用途：简单来说jquery是用来简化JavaScript的开发，用于中大型网页开发

先来看看js与jquery的对比

注：1.在使用jquery前要用script标签的src属性来引入jquery

2.jquery-3.5.1.js是需要下载的，官网:http://jquery.com/

3.我们需要将下载的jquery-3.5.1.js，复制在js下面

4.<script src="js/jquery-3.5.1.js"></script>

5.可用$符号调用jquery

从案例可以看出函数fn01()是传统的js函数fn02()是jquery函数两个函数达到的效果都是使div背景颜色改变，显而易见当我们使用jquery是代码变得简单化了

 <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <!--引入jquery-->
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <button onclick="fn02()">点我改变颜色</button>
    <script>
        //jquery 不是一门语言
        //jquery 是js的框架（是js的升级+简化）
        function fn01() {
            let ds=document.getElementsByClassName("container")
            //多个元素
            for(let d of ds){
                d.style.background="blue"
            }
        }

        console.log($) //输出jquery

        function fn02() {
            //$就是jquery
            let div=$(".container")
            //修改样式
            div.css("background","blue")
        }
    </script>

</body>

用css修改样式时：往往会遇到一个问题，当你只需要修改某一个div样式时由于jquery的特性会将其他的同时修改，我们将学习以下选择器：#，.，elemet，*

1.#id id选择器 .class class选择器 element元素选择器 *通配符：拿到所有标签

$("#aa")：指定id为aa的div

$(".dd")：指定class为bb的div

往往id是唯一的，则class是可重复的，那么问题又来了，$(".bb")指定的是哪个class为bb的div

方法一：可用类似于强转$($(".bb")[0])，$(".bb")拿到的是一个数组，可通过坐标拿到想要的div，但$(".bb")[0]不是jquery元素不能调用css方法，那么将它放入一个$()中变成jquery元素。

方法二：有个单词可直接实现这一操作eq()

$(".bb").eq(0)

2.很多时候我们需要拿到标签下某个元素，有两种情景：

情景一：$("div p")

拿到div中的所有p标签

情景二：$("div>p")

拿到div下的第一级子标签中的p标签

 <script src="js/jquery-3.5.1.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            display: inline-block;
            background: red;
        }
    </style>
</head>
<body>
    <p>后天啊积极</p>
    <div id="aa">
        <p>今天啊哈哈</p>
        <p>明天啊喜喜</p>
    </div>
    <div class="bb"></div>
    <div class="bb"></div>
    <script>
        //jquery本身支持css选择器
        console.log($("#aa"))
        console.log($(".bb").eq(0))

        //css是jquery的方法  只有jquery对象才才能调用
        //$(".bb")[0]拿出来的js中的正常对象
        //如何将js对象变成jquery: $(xx)
        // $(".bb")[0].css("background","blue")
        //$(...)[0].css is not a function

        console.log($("div"))

        console.log($("*"))

        //div中所有的p标签
        $("div p").css("color","white")

        //div中的第一级p标签（子标签）
        $("div>p").css("color","white")
    </script>
</div>
</body>

完成表单隔行换色

1.首先接触到几个单词

first 获得第一个元素

last 获得最后一个元素

even 获得偶数下标的元素

odd 获得奇数下标的元素

add.class 增加class元素

:gt 大于

:lt 小于

$("tr:gt(0):odd").addclass("aa")

定义.aa的背景

从大于0行开始奇数行增加class为aa

$("tr:lt(0):even").addclass("bb")

定义.bb的背景

从小于0行开始偶数行增加class为bb

<style>
        .aa{
            background: blue;
            color: white;
        }

        .bb{
            background: green;
            color: orange;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
    <table border>
        <tr>
            <td>商品名字</td>
            <td>商品价格</td>
            <td>商品编号</td>
            <td>商品描述</td>
        </tr>
        <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
    </table>
    <script>
        //第一个
        //$("tr").first().addClass("aa");
        //最后一个
        //$("tr").last().addClass("aa");

        //奇数
        $("tr:gt(0):odd").addClass("aa")
        //偶数
        $("tr:gt(0):even").addClass("bb")

        // $("tr:gt(1):lt(3)").addClass("bb")
    </script>
</body>

表单选择器

checkbox 复选框

radio 单选框

select 下拉框

option 往下拉框中添值

	<body>
		<form>
			<p><input type="text"></p>
			<p><input type="checkbox"></p>
			<p><input type="radio"></p>
			<p><input type="text"></p>
		</form>
		<select>
			<option value="">1</option>
			<option value="" selected="selected">2</option>
			<option value="">3</option>
			<option value="">4</option>
		</select>
		<script src="./jquery-3.5.1.js"></script>
		<script>
		console.log($(":checkbox"))
		console.log($(":radio"))
		console.log($("select option:selected"))
		console.log($("*"))
		</script>
	</body>