jQuery学习大全

最新推荐文章于 2022-11-29 13:58:04 发布

不想秃头爱敲码的小姐姐

最新推荐文章于 2022-11-29 13:58:04 发布

阅读量381

点赞数

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

本文链接：https://blog.csdn.net/weixin_42917994/article/details/106097649

版权

文章目录

1.jQuery简介

1.1 概念
jQuery是一个“写的更少，做的更多”的轻量级Javascript函数库。从而，简化了javascript的编程。
jQuery库包括：
1. html元素的选取；
2. html元素的操作；
3. css操作；
4. html时间函数；
5. javascript特效和动画；
6. html dom遍历和修改；
7. ajax;
8. utilities;
1.2 jQuery安装
1.直接下载使用

有两个版本可供下载:
            1.Production version：用于实际的网站中，已被精简和压缩。
            2.Development version：用于测试和开发(未压缩，是可读的代码)

下载地址：https://jquery.com/#Download_jQuery
注：可以把下载文件放到与页面相同的目录中，方便使用。
引用方法：

 语法：
 		<head>
			<script type="text/javascript" src="jquery.js"></script>
		</head>
 注：<script>标签应该位于<head>部分；在html5中不需要type="text/javascript"这个标签，因为javascript是html5以及现代浏览器中的默认脚本语言。

2.不用直接下载

不用下载存放jQuery，也可以通过CDN(内容分发网络)引用它。google(谷歌)和Microsoft(微软)的服务器都存有jQuery；
引用goolge的jQuery：(google CDN)

<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</head>
注：可以通过google url来规定jQuery的版本。

Microsoft CDN:(google CDN)

   <head>
       <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
   </head>

优势：使用google和Microsoft的jQuery有很大的优势，许多用户在访问其他站点时，已经从谷歌或者微软加载过jQuery。所以，当他们访问站点时，会从缓存中加载jQuery，这样可以减少加载时间。同时，大多数CDN都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

2.jQuery语法

通过jQuery,您可以选取(查询,query)HTML元素，并对他们执行“操作”(action)
2.1 基本语法
语法: $(selector).action()
参数：
1.美元符号$：定义jQuery，相当于是jQuery的重定义 (简写的方式)。
2.选择符selector:查找和查询HTML元素；
3.jQuery的action()执行对元素的操作；
注：jQuery语法是XPath与CSS选择器语法的组合。
2.2 jQuery选择器
选择器的作用：

1.允许对html元素组或单个元素进行操作。
2.其关键--学习jQuery选择器是如何准确的选取想要的元素。
3.jQuery元素选择器和属性选择器允许通过标签名，属性名，或内容对HTML元素进行选择。
DOM术语：选择器允许对DOM元素组或单个DOM节点进行操作。

jQuery元素选择器：

jQuery使用css选择器来选取html元素。
     $("p"):选取所有<p>元素
     $("p.intro"):选取所有class="intro"的<p>元素
     $("p#demo"):选取所有id="demo"的<p>元素

jQuery属性选择器：

jQuery使用XPath表达式来选择带有给定属性的元素注：
XPath,即XML路径语言，是一种用来确定XML文档中某部分位置的语言。  XPath使用路径表达式来选取XML文档中的节点或者节点集。这些路径表达式和我们常规的电脑文件系统中看到的表达式类似。
      $("[href]")：选取所有带有href属性的元素。
      $("[href='#']")：选取所有带有href值为"#"的元素。
      $("[href!='#']")：选取所有带有href值不等于"#"的元素。
      $("[href$='.jpg']")：选取所有href值以".jpg"结尾的元素。

jQuery CSS选择器：

jQuery CSS选择器可用于改变HTML元素的CSS属性。

常用的选择器：

				*：所有元素；
                #id：所有的id为“”的元素；
                .class：所有class为“”的元素
                element：所有<element>的元素
                .class.class：所有class为”“且class为”“的元素

                :first：什么元素的第一个；$("p:first"),第一个<p>元素；
                :last，
                :even：所有偶数个的元素；
                :odd：所有奇数个的元素；

                :eq(index)：$("ul li:eq(3)"),列表中的第四个元素(index从0开始)
                :gt(no)：大于
                :lt(no)：小于
                :not(selector)：

                :header：所有标题元素<h1><h6>
                :animated：所有动画

                :contains(text)：包含text字符串的所有元素

参考手册：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

2.3 jQuery事件
jQuery是为事件处理特别设计的。jQuery事件处理方法：jQuery中的核心函数。
事件处理程序： 是当HTML中发生某些事件时所调用的方法。术语由事件”触发“经常使用。
文档就绪函数

$(document).ready(function){
            //jQuery函数
        }

注：该函数为了防止文档在完全加载(就绪)之前运行jQuery代码。因为，在文档没有完全加载前就运行函数，操作可能失败。

jQuery名称冲突noConflict()方法
jQuery使用 $ 符号作为jQuery的简介方式。(相当于使用 $ 代替jQuery)。但是有些javascript库中的函数(比如prototype)同样使用$符号，所以存在冲突。
例如:var jq=jQuery.noConflict();//使用jq代替 $ 符号；
如果 $ 冲突，也可以直接用jQuery，不用其他代替。

另外： 如果你的代码块使用了$的缩写，但是你也不愿意改变这个 $ 的便捷方式，那么可以把 $ 符号作为变量传给ready方法。这样可以在函数内使用 $，而在函数外还得用"jQuery"

					$.noConflict();
                    jQuery(document).ready(function($){
                     $("button").click(function(){
                        $("p").text("jQuery 仍在运行！");
                       });
                     });

jQuery事件参考手册：https://www.w3school.com.cn/jquery/jquery_ref_events.asp

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="1.js">
        //事件处理部分
    </script>

</head>
<body>
    <button>点击按钮对其隐藏</button>
    <p>查找段落p对其隐藏</p>
    <p id="p">查找#p进行隐藏,隐藏id="p"元素</p>
    <p class="p">查找.p进行隐藏</p>
    <div class="p">隐藏所有class="p"的元素</div>
    <a href="jQuery名称冲突.html">属性选择器</a>
    <a href="#">属性选择器</a>
    <a href="1.jpg">属性选择器</a>
    <a href="2.jpg">属性选择器</a>
</body>
</html>

1.js:

$(document).ready(function(){
        $("button").click(function(){
            //$(".p").hide();//隐藏所有class="p"的元素
            //$("p.p").hide();//隐藏所有class="p"的<p>元素
            //$("#p").hide();//隐藏 id="p" 的元素。
            //$("p").hide();//隐藏标签pd的所有元素
            // $(this).hide();//隐藏当前的html元素，在此处是隐藏按钮button
            //$("[href]").hide();//隐藏所有带有href属性的元素。
            // $("[href='#']").hide();//隐藏所有带有href属性为#的元素。
            //$("[href!='#']").hide();//隐藏所有带有href属性不为#的元素。
            $("[href$='.jpg']").hide();//隐藏所有带有href属性不为#的元素。
        });
    }
);

一般规则：

				1.把所有的jQuery代码置于事件处理函数中；
                2.把所有的事件处理函数代码置于文档就绪事件处理器中；
                3.把jQuery代码置于单独的.js文件中；
                4.如果存在名称冲突，则重命名jQuery库；

3.jQuery效果

3.1 隐藏/显示

隐藏：hide(speed,callback)---参数speed规定隐藏的速度，可以取值：slow,fast,毫秒，可选；参数callback是隐藏完之后执行的函数
显示：show(speed,callback)
切换：toggle(speed,callback)---切换hide()和show()；

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                //$("div").toggle();//切换
                $("div").hide(1000,function () {
                    $("div").show(1000);
                });
            });
        });
    </script>
    <style>
        .ex{
            background-color: #e5eecc;
            padding:7px;
            border: solid 1px #c3c3c3;
            width: 500px;
        }
    </style>
</head>
<body>
    <button class="ex">点击这里，隐藏显示</button>
    <div class="ex">
        <p>君不见黄河之水天上来，<br>
            奔流到海不复回,<br>
            又不见高堂明镜悲白发，<br>
            朝如青丝暮成雪,<br>
            人生得意需尽欢,<br>
            莫使金樽空对月，<br>
            天生我材必有用，<br>
            千金散尽还复来。<br>
        </p>
    </div>
</body>
</html>

效果：
在这里插入图片描述

最低0.47元/天解锁文章

不想秃头爱敲码的小姐姐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习大全

文章目录1.jQuery简介2.jQuery语法3.jQuery效果4.jQuery HTML5.jQuery遍历6.jQuery AJAX7. 参考补充1.jQuery简介 1.1 概念jQuery是一个“写的更少，做的更多”的轻量级Javascript函数库。从而，简化了javascript的编程。jQuery库包括：1. html元素的选取；2. html元素的操作；3. css操作；4. html时间函数；5. javascript特效和动画；6. html dom
复制链接

扫一扫

专栏目录