前端笔记——jquery（一）选择器

最新推荐文章于 2022-12-14 22:11:19 发布

JohnnyLin00

最新推荐文章于 2022-12-14 22:11:19 发布

阅读量123

点赞数

分类专栏：前端学习文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44855907/article/details/114941422

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是Jquery

JQuery就是JavaScript 库，其口号是：write less， do more.
在这里插入图片描述区别只有文件大小，目的是为了提高相应速度。

若发现页面效果与预期不一致且F12模式下无报错，极有可能是 HTML代码的错误。

引入jquery

<!-- 引入jquery-->必须是：
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    不能是：
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"/>

JavaScript与JQuery

JavaScript 初始化函数

onload 是JavaScript库的初始化函数，该加载函数是当网页的所有dom元素（包括dom元素下关联图片、音频）全部加载完才执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入jquery-->
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>

        //JavaScript的函数声明
        function inint(){
            var title = document.getElementById("myTitle");
            alert(title.innerHTML );
        }
    </script>
</head>
<body onload = "inint()">
    <p id= "myTitle"> 这是一个p标签</p>
</body>
</html>

Jquery 初始化函数

调用jquery的初始化函数（加载函数），该加载函数是当网页的所有dom元素（不包括dom元素下关联图片、音频）加载完才执行。

		
        $(document).ready(function (){
            alert("hello jquery");
        });
        //简便写法
        $(function (){
            alert("hello function ...");
        });

区别：
在这里插入图片描述

dom模型

将html、xml等文档结构的标签看成dom模型
在这里插入图片描述
dom节点有三种类型：
元素节点：

……

属性节点：title src alt
文本节点: 文本
Dom对象：以上三种类型的具体对象就是Dom对象。凡是JavaScript能够直接操作的对象就是Dom对象。

JavaScript对象选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入jquery-->
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        //JavaScript的函数声明
        function inint(){
            var title = document.getElementById("myTitle");
            alert(title.innerHTML );
        }
    </script>
</head>
<body >
    <p id= "myTitle"> 这是一个p标签</p>
</body>
</html>

Jquery对象选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入jquery-->
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var $title = $("#myTitle");
            alert($title.html());
        });
    </script>
</head>
<body >
    <p id= "myTitle"> 这是一个p标签</p>
</body>
</html>

通过ID 选择器获取到p标签对象，从而获得其文本节点内容。

凡是JQuery能够直接操作的对象就是Dom对象

        //JQuery选择器
        $(document).ready(function(){
            var $title = $("#myTitle");
            alert($title.html());
        });
 <body >
    <p id= "myTitle"> 这是一个p标签</p>
</body>

可以看到同样一个元素，即可是dom对象，也可以是jquery对象。但是要注意，两种对象时独立的，dom对象只适用js的各种语法（函数、属性），jquery对象只用于jquery的改革中语法（函数、属性）。

JavaScript与JQuery的互转

JQuery转JavaScript

JQuery是一个数组或者集合

        //JQuery转JavaScript
        $(document).ready(function(){
            var $title = $("#myTitle");

            alert($title[0].innerHTML+ "1111");
            alert($title.get(0).innerHTML+ "2222");
        });

JavaScript转JQuery

通过JQuery转换工厂 : $(dom对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入jquery-->
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        function inint(){
            var title = document.getElementById("myTitle");
            alert(  $(title).html() + " Javascritp 转JQuery");
        }


    </script>
</head>
<body onload="inint()">
    <p id= "myTitle"> 这是一个p标签</p>
</body>
</html>

JQuery选择器

基本选择器

1、标签选择器
$(“标签名”)

要写在函数内部，否则是alert( $(“p”).length );结果是0，alert( $(“p”).html());结果是undefined。

        $(document).ready(function(){
            alert( $("p").html() );
            alert( $("p").length);
        });

2、类选择器
$(".class值")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入jquery-->
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <style type = "text/css">
        .mystyle{
            font-size: 25px;
            color: red;
        }
    </style>
    <script>
        $(document).ready(function(){
            alert( $(".mystyle").html() );
            alert( $(".mystyle").length);
        });


    </script>
</head>
<body>
    <p > 这是一个p标签</p>
    <p class="mystyle" > 这是一个自定义样式的p标签</p>

</body>
</html>

3、id选择器
$("#id值")

<script>
        $(function(){
            alert($("#myTitle3").html());
            alert($("#myTitle3").length);
        });
</script>
</head>
<body>
    <p > 这是一个p标签</p>
    <p class="mystyle" > 这是一个自定义样式的p标签</p>
    <p id = "myTitle3"> 这是一个id选择器</p>

</body>

4、并集选择器
使用",“将各个选择器隔开，表示选择各种符合给定选择器的对象。$(”.class值，#id值,标签名")
5、交集选择器
$KaTeX parse error: Expected 'EOF', got '#' at position 10: (".class值#̲id值")表示选择即有该样式的\dots$ (“p.myStyle”).html()：选中即是p标签，并且class的值是myStyle

6、全局选择器

$("*")选中页面中全部元素

层次选择器

1、兄弟（相邻）选择器。： +
$(“选择器1 + 选择器2”)
只选取选择器1同层的后边第一个出现的选择器2

2、同辈选择器 ~
$(“选择器1~选择器2”)
选取与选择器1同层次的所有选择器2

这样length是6

     $(function(){
            alert($("ul li").length);
        });
    </script>
</head>
<body>
    <p > 这是一个p标签</p>
    <p class="mystyle" > 这是一个自定义样式的p标签</p>
    <p id = "myTitle3"> 这是一个id选择器</p>
    <ul>
        <li> aaa</li>
        <li> bbb</li>
        <li> bbb</li>
    </ul>
    <ul>
        <li> aaa</li>
        <li> bbb</li>
        <li> bbb</li>

    </ul>

</body>

3、后代选择器（空格）
$(“选择器1 选择器2”)
选取选择器1标签下的所有后代（儿子、孙子）是选择器2的节点

属性选择器

	$("[属性名]")
	例如：$("[class]") :选中全部元素中 有class属性的 元素

	$("[属性名=属性值]")
	例如：$("[class=xxx]")  
		$("[class='xxx']")    
	
	$("[class!=a]")  不等于， 包含两种： 有class但值不是a,   没有class
	$("[class^=a]")  class以a开头的元素
	$("[class$=a]")  class以a结尾的元素
	$("[class*=a]")  class有a的元素

JohnnyLin00

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端笔记——jquery（一）选择器

什么是JqueryJavaScript 库write less， do more.区别只有文件大小，目的是为了提高相应速度。若发现页面效果与预期不一致且F12模式下无报错，极有可能是 HTML代码的错误。引入jquery必须是： <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script> 不能是： <script
复制链接

扫一扫