jQuery核心技术

最新推荐文章于 2021-09-27 08:50:18 发布

VIP文章云计算&大数据

最新推荐文章于 2021-09-27 08:50:18 发布

阅读量534

点赞数

分类专栏：前端文章标签： java js dom javascript jquery

本文链接：https://blog.csdn.net/m0_46864744/article/details/113037860

版权

jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE、火狐、Safari 2.0+、Opera 、Google等等。

jQuery功能

-HTML 元素选取
-HTML 元素操作
-HTML 事件函数

-JavaScript 特效和动画
-HTML DOM 遍历和修改
-CSS 操作

-AJAX
-Utilities

jQuery的引入方法

方法1. CDN

https://www.bootcdn.cn/jquery/

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

方法2. 下载并放入项目文件，并用js引入（取决于自己的路径）

<script src="jq/jquery.js"></script>

jquery有Production version（压缩后，代码无可读性，用于项目）和Development version（用于开发和学习）

代码基于jquery的话，jquery的引入要在自己的js代码之前

jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(选择器).动作()

jQuery入门例子：

//引入jquery
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<body>
    <input id="username" type="text" value="zhangsan" >
    <script type="text/javascript"> 
        var n=$("#username");               //获取id为username的jQuery对象
        alert(n.val());                     //val函数为获取value属性的值   
    </script>
</body>

在这里插入图片描述

文档就绪事件

我们的js代码都需要等文档加载完毕后才开始执行js代码。

在jQuery中，所有 jQuery 函数位于一个 document ready 函数中，这是文档就绪事件。

$(document).ready(function(){
   
   // 开始写 jQuery 代码...
});

将dom对象转换成jQuery对象

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <body>
            <input id="username" type="text" value="zhangsan" >
            <script type="text/javascript"> 
                //获取的是dom对象
                var n=document.getElementById("username");
                //将dom对象转换成jQuery对象  语法：$(dom对象)  建议：jQuery对象以$符开头命名
                var $n=$(n);
                alert($n.val());
            </script>
        </body>

将jQuery对象转换成dom对象

  //jQuery内部是一个数组，比如我们获取所有文本框，然后得到一个jQuery对象，其实这个对象内部是数组。
    <body>
        <input id="username" type="text" value="zhangsan" >
        <script type="text/javascript">
            var n=document.getElementById("username");
            //获取jQuery对象
            var $n=$(n); 
            //两种方式，将JQuery对象转换成dom对象
            var n1=$n[0];    //直接使用数组下标获得dom对象
            var n2=$n.get(0);//使用jQuery对象的get方法
            alert(n1.value);
            alert(n2.value);
        </script>
    </body>

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1. id选择器

语法：$(“#id”) 通过id获取指定元素。

2. 元素选择器

语法：$(“input”):通过标签名获得元素。

3. 类选择器

语法：$(“.class”):通过class属性来获取元素。

基础选择器例子
例子：传统的js中点击事件需要按钮的onClick()方法指定js函数。jquery能将两者给分离开

<script type="text/javascript">
    $(document).ready(function(){
    
        //使用id选择器
        $("#btn1").click(function(){
    
            alert("hello world");

        }); 
    });
</script>
<body>
    <input type="button" id="btn1" value="按钮">
</body>

其他的几个选择器都差不多，可以自己下去练习。

4. 层级选择器

A  B：获取A元素内部所有的B元素，也包括B元素的子元素
A >B: 获取A元素内部所有的B子元素 
A +B: 获取A元素后面的第一个兄弟B （平级）
A ~B: 获取A元素后面的所有兄弟B

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
		    $(document).ready(function(){
    
		        $("#btn1").click(function(){
    
		            //选择ul1元素所有的li元素
		            $("#ul1 li").css("background-color","red");
		        });
		    });
		</script>
	    <ul id="ul1">
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	    </ul>
	    <ul id="ul2">
	        <li>一</li>
	        <li>二</li>
	        <li>三</li>
	    </ul>
	    <br>
	    <input type="button" id="btn1" value="按钮1">
	</body>
</html>

5. 基本过滤选择器

:first  第一个元素
:last   最后一个元素
:eq(index)  获得指定索引的元素
:gt(index)  大于指定索引的元素
:lt(index)  小于指定索引的元素
:even       查找索引为偶数的元素，从0开始
:odd        查找索引为奇数的元素
:not(selector)   去除所有与给定选择器匹配的元素 


例如：
    $("li:first")    //第一个li
    $("li:last")     //最后一个li
    $("li:even")     //挑选下标为偶数的li
    $("li:odd")      //挑选下标为奇数的li
    $("li:eq(4)")    //下标等于4的li
    $("li:gt(2)")    //下标大于2的li
    $("li:lt(2)")    //下标小于2的li
    $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
		    $(document).ready(function(){
    
		        $("#btn1").click(function(){
    
		            //选择ul1元素所有的li元素
		            $("li:last").css("background-color","red");
		        });
		    });
		</script>
	    <ul id="ul1">
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	    </ul>
	    <ul id="ul2">
	        <li>一</li>
	        <li>二</li>
	        <li>三</li>
	    </ul>
	    <br>
	    <input type="button" id="btn1" value="按钮1">
	</body>
</html>

点击按钮后结果如下：
在这里插入图片描述

6. 内容过滤选择器

:empty   选择为空的元素(是否有标签体，包括子元素，文本等)
:has(selector)  选择含有指定的子元素的元素
:parent        当前元素是否是父元素
:contains(text)  选择含有指定的文本的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
    
                $("#btn1").click(function(){
    
                    //选择含有文本123的div将其背景色变为红色
                    $("div:contains('123')").css("background-color","red");
                });
            });
        </script>
		
            <div>
                123456abc
            </div>
            <input type="button" id="btn1" value="按钮">
	</body>
</html>

点击按钮后结果：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
    
                $("#btn1").click(function(){
    
                    //选择含有input子元素的div 将其背景色改为红色
                    $("div:has('input')").css("background-color","red");
                });
            });
        </script>
		
            <div>
                123456abc
				<input type="" name="" id="" value="" />
            </div>
            <input type="button" id="btn1" value="按钮">
	</body>
</html>

点击按钮后结果如下：
在这里插入图片描述

7. 可见性过滤选择器

:hidden 选取隐藏的元素
:visible 选取可见的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
    
                //点击按钮1使可见的div背景色变为黑色
                $("#btn1").click(function(){
    
                    $("div:visible").css("background-color","black");
                });
                //点击按钮2使隐藏的div背景色变为红色，并且显示 jQuery的show()方法为显示隐藏的元素
                $("#btn2").click(function(){
    
                    $("div:hidden").css("background-color","red").show();
                });

            });
        </script>
		
            <div style="width:100px;height:100px;background:red;"></div>
            <div style="display:none;width:120px;height:120px;"></div>
            <input type="button" id="btn1" value="按钮1">
            <input type="button" id="btn2" value="按钮2">
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
        <script type="text/javascript">
            $(document).ready(function(){
    
                //遍历所有隐藏的input元素的值  each是进行遍历的方法
                $("#btn1").click(function(){
    
                    $("input:hidden").each(function(){
    
                        alert($(this).val());
                    });
                });

            });
        </script>
		
            <input type="hidden" value="1">
            <input type=

最低0.47元/天解锁文章

云计算&大数据

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery核心技术

jQuery简介jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选
复制链接

扫一扫