jQuery简介及选择器

一、jQuery简介

1、JS的onload事件只能实现一次,而且实现的是最后一次

2、jQ可以实现多次,按代码顺序实现

3、基本语法 通过$ 符定义jQuery, $( 选择器 ) . 方法 ( )

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<script>

    // JS onl oad事件只能实现一次,而且是最后一次

    window.onload = function(){

        alert("hello js");

    }

    window.onload = function(){

        alert("hello js--1");

    }

    window.onload = function(){

        alert("hello js--2");

    }

    // jQuery  可以实现多次加载

    $(document).ready(function(){

        alert("hello jQuery");

    })

    $(document).ready(function(){

        alert("hello jQuery--1");

    })

    $(document).ready(function(){

        alert("hello jQuery--2");

    })

    // 基本语法

    // 通过$符定义jQuery

    // $(选择器).方法()

</script>

</body>

</html>

4、在jQuery中声明变量需在变量前加$

5、Jq转为JS对象 var jsDiv = $jqObj[0];

6、js转为jq var $jqDiv = $(jsdiv);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<div id="box"></div>

<script>

    $(document).ready(function(){

        // $区别 jQ和JS的变量

        var $jqObj = $("#box");

        $jqObj.html("hello");

        // jq转换为JS对象,函数不能转

        var jsDiv = $jqObj[0];

        // JS转为jQ对象

        var $jqdiv = $ (jsDiv)

    })

</script>

</body>

</html>

7、Jquery的三种书写方法

①$(document).ready( function () {} )

②$().ready( function () {} )

③$( function () {} )

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<div id="box"></div>

<div class="cls"></div>

<script>

    // 页面加载函数

    // 第一种方法

    $(document).ready(function (){

    })

    // 第二种方法

    $().ready(function(){

    })

    // 第三种方法

    $(function(){

        

    })

</script>

</body>

</html>

二、jQuery选择器

Ⅰ、基本选择器

①ID选择器

语法 $(“#id”)

相当于JS中的document.getElementById(“id”)

②元素选择器

语法 $(“标签名称”)

相当于JS中的document.getElementsByTagName(“标签名称”)

③类名选择器

语法 $(“.class”)

相当于JS中的document.getElementsByClassName(“class”)

④复合选择器

语法$(“selector1, selectpr2,  ... ”)

⑤通配符选择器

语法 $(“ * ”)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery 基本选择器 </title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<div id="box"></div>

<div class="cls"></div>

<span> </span>

<p></p>

<script>

    $(function () {

        // id选择器

        var $jqDiv = $("#box");

        $jqDiv.html("ID选择器");

        // 元素选择器

        var $jqDiv1 = $("div");

        $jqDiv1.html("元素选择器");

        // 类选择器

        var $jqDiv2 = $(".cls");

        $jqDiv2.html("类选择器");

        // 复合选择器

        var $jqfh = $("span, p");

        $jqfh.html("复合选择器");

        // 通配符选择器

        var $jqt = $("*");

        $jqt.html("通配符选择器");

    })

</script>

</body>

</html>

Ⅱ、层次选择器

①父子(先辈后辈)选择器

语法 $(“ancestor descendant”)

②父子选择器

语法 $(“parent>child”)

③兄弟选择器

语法 $(“prev+next”)

④同级选择器

语法 $(“prev ~ siblings”)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery 层次选择器</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<div id="box">

    <p> HELLO </p>

    <div>

        <p> WORLD</p>

    </div>

</div>

<ul id="l">

    <li> 111 </li>

    <li> 222 </li>

</ul>

<div id="d"> aaa </div>

<div > bbb </div>

<div > ccc </div>

<div > ddd </div>

<script>

    $(function(){

        // 先辈后辈选择器(父子选择器)

        var $jqObj = $("#box p");

        console.log($jqObj.html());

        // 父子选择器

        var $jqObj1 = $("ul>li");

        console.log($jqObj1.html());

        var $jqObj2 = $("#l>li");

        console.log($jqObj2.html());

        // 兄弟选择器,只匹配一个

        var $jqObj3 = $("#d+div");

        console.log($jqObj3.html());

        // 同级选择器

        var $jqObj4 = $("#d~div");

        $jqObj4.html("---");

    })

</script>

</body>

</html>

Ⅲ、过滤选择器

①简单过滤器

:first 只匹配第一个元素

:last 只匹配最后一个元素

:even 所有的奇数

:odd 所有的偶数

:eq(index) 指定元素(从0开始)

:gt(index) 比...大

:lt(index) 比...小

:header 匹配标签

:not() 去除

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery简单过滤选择器</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<p class="p1"> aaa </p>

<p class="p1"> bbb </p>

<p class="p1"> ccc </p>

<p class="p1"> ddd </p>

<p class="p1"> eee </p>

<p class="p2"> fff </p>

<h2> 二级标题 </h2>

<script>

    $(function(){

        // :first,只匹配第一个元素

        $(".p1:first").html("first");

        // :last,只匹配最后一个

        $(".p1:last").html("last");

        // :even,所有的奇数

        $(".p1:even").html("even");

        // :odd,所有的偶数

        $(".p1:odd").html("odd");

        // :eq(index),指定元素,从0开始

        $(".p1:eq(2)").html("第三个");

        // :gt(index),比...大

        $(".p1:gt(2)").html("比第三个大");

        // :lt(index),比...小

        $(".p1:lt(2)").html("比第三个小");

        // :header,匹配标签

        $(":header").html("标题过滤");

        // :not(),去除

        $("p:not(.p1)").html("hello");

    })

</script>

</body>

</html>

②内容过滤器

contains(xx) 匹配包含的元素

empty  匹配空的,有空格则不是空

has(xx) 匹配含有的元素

parent 匹配父标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery内容过滤选择器</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<p class="p1"> aaa </p>

<p class="p1"> bbb </p>

<p class="p1"> ccc </p>

<p class="p1"></p>

<table>

    <tr>

        <td>

            <p>this is a text</p>

        </td>

        <td>

            <p> today is a good day</p>

            <span></span>

        </td>

    </tr>

</table>

<script>

    $(function(){

        // contains(xx) 匹配包含的元素

        $(".p1:contains('b')").html("包含b");

        // empty 匹配空的,有空格则不是空的

        $(".p1:empty").html("空的");

        // has(xx) 匹配含有的元素

        console.log($("td:has(span)"));

        // parent 匹配父标签的元素

        $(".p1:parent").html("haha");

    })

</script>

</body>

</html>

③可见性过滤器

:visible 匹配可见元素

:hidden 匹配不可见元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery可见性过滤选择器</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<input type="text" value="aaa"/>

<input type="hidden" value="bbb"/>

<input type="text" style="display: none" />

<script>

    $(function(){

        // :visible 匹配可见元素

        console.log($("input:visible").val());

        // :hidden 匹配不可见元素

        console.log($("input:hidden").val());

        // 匹配最后一个不可见元素

        console.log($("input:hidden:last").val());

    })

</script>

</body>

</html>

④表单过滤器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery表单过滤选择器</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<form>

    <input type="checkbox" checked="checked" value="复选框1"> 选框1

    <input type="checkbox" checked="checked" value="复选框2"> 选框2

    <input type="checkbox" value="复选框3"> 选框3

    <input type="button" value="不可用按钮" disabled> 按钮

    <select>

        <option selected="selected"> aaa </option>

        <option> bbb </option>

    </select>

</form>

<script>

    $(function(){

        // :checked 匹配所有选中的标签

        console.log($("input:checked:eq(0)").val());

        // :disabled

        console.log($("input:disabled").val());

    })

    $(function(){

        console.log($("select option:selected").val());

    })

</script>

</body>

</html>

⑤子元素过滤器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery子元素过滤选择器</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

<script>

    $(function(){

        // first-child

        $("ul li:first-child").html("first-child");

        // last-child

        $("ul li:last-child").html("last-child");

        // nth-child 从1开始

        $("ul li:nth-child(2)").html("2th-child");

    })

</script>

</body>

</html>

Ⅳ、属性选择器

[attr] 匹配指定属性的元素

[attr=val] 选择指定值的元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery属性过滤选择器</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

    <style>

        div{

            width: 100px;

            height: 50px;

            margin: 10px;

        }

    </style>

</head>

<body>

<div name="div1"></div>

<div name="div2"></div>

<div name="div3"></div>

<div name="div4"></div>

<div name="div1"></div>

<div name="div1hello"></div>

<div name="div1world"></div>

<div ></div>

<script>

    $(function(){

        // [attr] 匹配指定属性的元素

        $("div[name]").css("background-color", "blue");

        // [attr=var] 选择指定值的元素

        $("div[name='div2']").css("background-color", "red");

        // $("div[name!='div1']").css("background-color", "green");

        // 全部匹配

        $("div[name*='div1']").css("background-color", "green");

        // 匹配以div开头的

        $("div[name^='div1']").css("background-color", "green");

        // 完全匹配div1

        $("div[name$='div1']").css("background-color", "green");

    })

</script>

</body>

</html>

Ⅴ、表单选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery表单过滤选择器</title>

    <script type="text/javascript" src="js/jQuery3.6.0.js"></script>

</head>

<body>

<form>

    <input type="checkbox" >

    <input type="radio" >

    <input type="file" >

    <input type="image" >

    <input type="password" >

    <input type="text" >

    <input type="reset" >

    <input type="submit" >

    <input type="button" >

</form>

<script>

    $(function(){

        var $jqObj1 = $(":checked")

        

        var $jqObj1 = $(":password")

    })

</script>

</body>

</html>

上一篇:jQuery基础


下一篇:jQuery 教程