精华内容
下载资源
问答
  • 2021-11-30 01:39:58

    1.远程连接JQuery的库

    站点是在国内,建议使用百度、新浪、又拍云等国内CDN地址,

    站点是在国外,建议使用谷歌和微软的CDN地址
    使用CDN地址引用jQuery的具体方法如下:
    <head>
     百度 CDN:
                <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> 

     新浪 CDN:
            <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
    又拍云 CDN:
                <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
    Staticfile CDN:
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    Google CDN:
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    Microsoft CDN:
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">  

     </script>
    </head>

    2.借助前端页面的开发工具

    也可以使用Hbuilder,创建前端页面的项目时,新建js文件选择带有Jquery库的模板,这样建立Js文件就可以直接使用Jquery,在该文件中写我们的Jquery代码,在需要的前端页面将此Js文件引入就可以了。

    新手学习如何使用Jquery,可以使参照Jquery的菜鸟教程,jQuery 安装 | 菜鸟教程

    更多相关内容
  • jquery文件jquery文件jquery文件jquery文件jquery文件jquery文件jquery文件jquery文件jquery文件
  • JQuery库文件

    2017-06-17 13:21:31
    JQuery库文件
  • jQuery库文件

    2017-07-26 00:17:01
    压缩包包括:jquery-1.11.2.js、jquery-1.11.2.min.js、jquery-2.1.3.js和jquery-2.1.3.min.js;1.x与2.x拥有相同的API(函数名字,以及参数等等都是一样的,我们在使用的时候是没有区别的,只是内部实现可能不一样...
  • 那么如何动态加载 Jquery 呢?一般可以用 Document.write 来打印出,也可以用 Ajax ,也可以用我下面的这种方式: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
  • jquery库文件

    2013-04-06 20:00:26
    这是在网上看到javascript的教程之后,去下的,是一种轻型的js架构,代码优雅实用,不知道作者当时是怎么弄出来的
  • jQuery库3.4.1

    2020-11-28 09:29:10
    这是前端开发技术中Javascript中jQuery的一个,引进这个以后,可以更加快捷的引用中的,各个方法
  • 但是,没有任何一个库可以满足所有的需求,所以,JQuery库提供了丰富的扩展功能。以禁用一组表单元素为例,看看怎么简单有效的在JQuery库中添加自定义的功能扩展。(JQuery没有禁用表单元素的方法哦) 上代码: <...
  • 而使用Wordpress内置jQuery库的话,其末尾防止JS库 冲突而加入的jQuery.noConflict()使得主题中所有jQuery代码都要做一些小修改,更可能导致一些插件效果失效。Paul Irish在HTML5 Boilerplate中使用的方法
  • 介绍了Jquery库及其他库之间的$命名冲突的解决方法,有需要的朋友可以参考一下
  • 在使用jQuery开发的时候,可能还会使用到其他的JS库,比如Prototype,但多库共存时可能会发生冲突,下面这篇文章主要给大家介绍了关于jQuery库冲突的完美解决办法,需要的朋友可以参考借鉴,下面来一起看看吧。
  • jQuery库与其他JS库冲突的解决办法
  • jQuery库的介绍与使用

    千次阅读 2020-07-16 14:32:49
    文章目录1、jQuery库介绍2、jQuery优势3、jQuery的使用4、jQuery入门5、jQuery页面加载方式6、原生的DOM对象和jQuery对象的互转7、jQuery的选择器8、jQuery的属性操作9、jQuery的节点操作10、jQuery事件绑定11、...

    1、jQuery库介绍

    • jQuery是一个JavaScript库(框架),它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。
    • 在线的可以访问:http://t.mb5u.com/jquery/
    • http://www.runoob.com/前端知识的学习网站
    • 最新的文档,英文版的:http://api.jquery.com/
    • jQuery的两种文件解释:

    这里是引用

    2、jQuery优势

    • jQuery 作为 JavaScript 封装的库,他的目的就是为了简化开发者使用 JavaScript。
    • 主要功能有以下几点:

    1.像 CSS 那样访问和操作 DOM;
    2.修改 CSS 控制页面外观;
    3.简化 JavaScript 代码操作;
    4.事件处理更加容易;
    5.各种动画效果使用方便;
    6.让 Ajax 技术更加完美 异步加载;
    7.基于 jQuery 有大量插件;
    8.自行扩展功能插件:jQuery 最大的优势,就是特别的方便。比如模仿 CSS 获取 DOM,比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服,而最常用的 CSS 功能又封装到单独的方法,感觉非常有心。最重要的是 jQuery 的代码兼容性非常好,你不需要总是头疼;

    3、jQuery的使用

    • 搭建环境
      1、首先,下载jQuery库文件;
      2、引入jQuery库文件:<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>,如果你不想下载,也可以在有网络连接的情况下使用引用网上的链接;
      3、之所以可以使用链接,是因为浏览器有缓存;

    4、jQuery入门

    • 入门代码:有自己的一套语法规则;
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<!-- 引入jQuery库文件 -->
    		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(function(){
    				$('button').click(function(){
    					alert("Hello jQuery");
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<button type="button">一个按钮</button>
    	</body>
    </html>
    

    在这里插入图片描述

    • 代码风格:

    1、在jQuery程序中,不管是页面元素的选择、内置的功能函数,都是美元符号$来起始的,而 这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写:

    $(function () {});	 //执行一个匿名函数
    $('#box');	 //进行执行的ID元素选择
    $('#box').css('color', 'red'); 	//执行功能函数
    

    2、由于 $本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:

    jQuery(function () {});
    jQuery('#box');
    jQuery('#box').css('color', 'red');
    

    3、值得一提的是,执行了.css()这个功能函数后,最终返回的还是jQuery对象,那么也就是说,jQuery的代码模式是采用的连缀方式,可以不停的连续调用功能函数。

    $('#box').css('color', 'red').css('font-size', '50px'); //连缀
    

    4、jQuery中代码注释和JavaScript是保持一致的,有两种最常用的注释:单行使用“//...” ,多行使用“/* ... */”

    5、jQuery页面加载方式

    • 我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹,那么为什么必须要包裹这段代码呢?
    • 原因是jQuery库文件是在body元素之前加载的,我们必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。对于延迟等待加载,JavaScript提供了一个事件为load,方法如下:
    window.onload = function () {}; //JavaScript等待加载
    $(document).ready(function () {所有代码都放在这}); //jQuery等待加载
    
    • JS页面加载的时候,比如你有很多图片、视频加载比较慢,等到这些元素都加载完成,你才能执行;而jQuery页面加载是等你这个结构父标签、子标签啊,加载结束就可以,也就是它的加载相对比较快一些

    • 针对上面的写法,有个简写形式:

    $(document).ready(function(){
    
    });
    加载的优点,只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码。
    
    简写方案:
    $(function () {
    	alert("加载了");
    });
    

    6、原生的DOM对象和jQuery对象的互转

    • jQuery 对象虽然是 jQuery 库独有的对象,但它也是通过 JavaScript 进行封装而来的。 我们可以直接输出来得到它的信息。
    alert($); //jQuery 对象方法内部
    alert($()); //jQuery 对象返回的对象,还是 jQuery
    alert($('#box')); //包裹 ID 元素返回对象,还是 jQuery
    
    • 从上面三组代码我们发现:只要使用了包裹后,最终返回的都是 jQuery 对象。这样的好处显而易见,就是可以连缀处理。但有时,我们也需要返回原生的 DOM 对象,比如:
    alert(document.getElementById('box')); //[object HTMLDivElement]
    
    • jQuery 想要达到获取原生的 DOM 对象,可以这么处理:
    alert($('#box').get(0)); //ID 元素的第一个原生 DOM
    
    • 从上面 get(0),这里的索引看出,jQuery 是可以进行批量处理 DOM 的;
    • 有的时候,我们需要操作原生的JS对象,有的时候则需要jQuery对象,原生对象转为jQuery对象,需要使用$或者jQuery进行包裹:

    原生的DOM对象转为jQuery对象:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(function(){
    				//原生的JS对象
    				var btn = document.getElementById("btn");
    				//使用jQuery这个$符号包裹一下原生的JS对象,原生的DOM对象和jQuery对象的转换
    				$(btn).css('background','red');
    
    				//jQuery对象
    				var btn2 = $("#btn");
    				//jQuery对象转为原生的DOM对象,调用get(),里面传入一个索引
    				var jObj = btn2.get(0);
    				//使用这个原生的对象
    				jObj.style.width = "100px";
    
    			});
    		</script>
    	</head>
    	<body>
    		<button type="button" id="btn">一个按钮</button>
    	</body>
    </html>
    

    7、jQuery的选择器

    • 常规选择器
      在这里插入图片描述
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(function(){
    				//jQuery选择一个或者多个标签,采用的是CSS选择器的写法
    				
    				$('h1').css('color','red');
    				
    				//如果你仅仅只想设置第一个h1标签的颜色,使用eq()
    				$('h1').eq(0).css('color','blue');
    			});
    		</script>
    	</head>
    	<body>
    		<h1>aaa</h1>
    		<h1>aaa</h1>
    		<h1>aaa</h1>
    	</body>
    </html>
    
    • 进阶选择器
      在这里插入图片描述
    • 高级选择器
      在这里插入图片描述

    针对高级选择器,如果你不想使用,他有对应的方法,可以使用;

    取代选择器的方法:

    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title></title>
    		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(function(){
    				//$('div p span').css('color','red');
    				//等价于下面的代码
    				$('div').find('p').find('span').css('color','red');
    				//一层一层往下找
    				
    				//选中全部的ul
    				//$('ul>li').css('color','red');
    				//等价于下面的代码
    				$('ul').children('li').css('color','yellow');
    				
    				//如何选中第三个h1
    				$('h1').eq(0).next('h1').next('h1');
    			});
    		</script>
    	</head>
    	<body>
    		<div id="">
    			<p>
    				<span>abc</span>
    			</p>
    		</div>
    		
    		<ul>
    			<li>bbbb</li>
    			<li>bbbb</li>
    			<li>bbbb</li>
    			<li>bbbb</li>
    			<li>bbbb</li>
    		</ul>
    		
    		<h1>ccc</h1>
    		<h1>ccc</h1>
    		<h1>ccc</h1>
    		<h1>ccc</h1>
    	</body>
    </html>
    

    1、选定同级元素的上一个(prev) 或上面所有元素(prevAll)

    $('#box').prev('p').css('color', 'red'); //同级上一个元素
    $('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素
    

    2、nextUntil()prevUnitl()方法是选定同级的下面或上面的所有节点,选定非指定的所有元素,一旦遇到指定的元素就停止选定。

    $('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定,遇到则停止
    $('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定,遇到则停止
    

    3、选定同级元素的 上下所有元素siblings()方法正好集成了prevAll()nextAll()两个功能的效果,及上下相邻的所有元素,进行选定:

    $('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定
    //等价于下面:
    $('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定
    $('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定
    
    • 属性选择器
      在这里插入图片描述

    以上选择器,其实都和原生JS中的选择器一样,用法都类似,比较容易掌握;

    • 过滤选择器
      在这里插入图片描述
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<h1 class="myh">aaaa</h1>
    		<h1 class="myh">bbbb</h1>
    		<h1 class="myh">cccc</h1>
    		<h1 class="myh">dddd</h1>
    		<h1 class="myh">ffff</h1>
    	</body>
    	<script type="text/javascript">
    		//获取第一个h1
    		$('h1').first().css('color', 'red');
    		//获取最后一个h1
    		$('h1').last().css('color', 'yellow');
    		//获取索引为1的h1
    		$('h1').eq(1).css('color', 'blue');
    		//注意区分 eq(1)方法和get(1)方法的意思
    		$('h1').get(1).style.background = "red";
    	</script>
    </html>
    

    在这里插入图片描述

    eq()和get()虽然都是通过索引获取元素,但是前者是获取jQuery对象,后者是通过jQuery对象获取原生的JS对象;

    • DOM是一种文档对象模型,方便开发者对HTML 结构元素内容进行展示和修改。在 JavaScript 中,DOM 不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性、扩展性。在 jQuery 中,已经将最常用的 DOM 操作方法进行了有效封装,并且不需要考虑浏览器的兼容性
    • 获取与设置
      在这里插入图片描述

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                var text=$('div').html(); //innerHTML
                //获取值
                alert(text);
    
                $('div').html("<h1>呵呵</h1>");
                //设置值
    
                //获取文本中的值
                var text1=$('h1').text();//innerText
                alert(text1);
    
                //设置文本中的值
                $('h1').text('ccccc');
    
                //获取表单中的值
                var text2=$('input').val();
                alert(text2);
    
                //设置表单中的值
                $('input').val('李四');
    
            });
        </script>
    </head>
    <body>
        <div>
            <span>
    
            </span>
        </div>
    
        <input type="text" placeholder="请输入内容:" name="username" value="zhangsan">
    </body>
    </html>
    

    在获取值或者设置值的时候,体现了jQuery中方法的重载;

    8、jQuery的属性操作

    • 除了对元素内容进行设置和获取,通过 jQuery 也可以对元素本身的属性进行操作,包括获取属性的属性值、设置属性的属性值,并且可以删除掉属性;
    • 方法:
      在这里插入图片描述
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .mycss{
                color: red;
                font-size: 200px;
            }
        </style>
        <script src="./js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                //获取某个元素的属性值
                var text=$('div').attr('id');
                alert(text);
    
                //如何给div设置属性mycss
                $('div').attr('class','mycss');
    
                //移除属性
                $('div').removeAttr('class');
            });
        </script>
    </head>
    <body>
        <div id="mydiv" class="mycss">
            abc
        </div>
    </body>
    </html>
    

    设置或移除class属性:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .myclass{
                width: 300px;
                height: 800px;
                color: red;
                border: 1px black solid;
            }
        </style>
        <script src="./js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
    
                //添加类属性
                $('div').addClass('myclass');
    
                //移除类属性
                $('div').removeClass('myclass');
            });
        </script>
    </head>
    <body>
        <div>
            abc
        </div>
    </body>
    </html>
    

    切换class属性值:

    在这里插入代码片
    

    css样式的操作

    元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。而在整个 jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握。

    在这里插入图片描述
    在这里插入图片描述

    代码示例1:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
    </head>
    <body>
        <div>
            abc
        </div>
    
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                //在jQuery中,要设置属性值,可以去掉横杠变大写也可以直接写横杠
                //但是原生的JS中不允许这样,他只能去横杠,使用大写字母
                //$('div').css('color','red').css('fontSize','100px');
    
                //这样写比较麻烦,可不可以一次设置完成
    
                //设置一个JSON对象
                var jsonObj={
                    'color':'red',
                    'font-size':'100px',
                    'background':'blue'
                };
    
                //直接传递JSON对象
                $('div').css(jsonObj);
            });
        </script>
    </body>
    </html>
    

    给元素设置属性的时候,我们可以直接传递一个JSON对象,对象中放的是属性与其对应的值;

    代码示例2:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .myclass{
                width: 100px;
                height: 100px;
                background-color: blueviolet;
            }
            .myclass2{
                width: 200px;
                height: 200px;
                background-color: cadetblue;
            }
        </style>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                $('div').click(function (e) { 
                    //因为我们现在要对jquery进行操作,如果你直接写一个this,你选中的还是原生的DOM对象,因为我们要对jquery对象进行操作,因此必须要先包装这个this
                    //this.$(selector).toggle();
    
                    $(this).toggleClass('myclass2');
                });
    
                $('h1').width('200px').css('color','red');
            });
        </script>
    </head>
    <body>
        <div class="myclass"></div>
        <h1>这是一行文字</h1>
    </body>
    </html>
    

    如果需要对当前原生对象进行操作,可以对当前对象this进行包裹,转为jQuery对象,因为this代表的是一个原生对象;

    9、jQuery的节点操作

    • DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M” 。页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建、插入、替换、克隆、删除等等一些列的元素操作。
    • 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点。

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                //现在我想使用jQuery代码给body中设置一个标签进去
    
                //封装一个idv对象
                var mydiv=$('<div>abc</div>');
                //获取Body对象
                var body=$('body').append(mydiv);
            });
        </script>
    </head>
    <body>
        
    </body>
    </html>
    
    • 除了这个方法之余呢,jQuery 提供了其他几个方法来插入节点。
      在这里插入图片描述
      在这里插入图片描述

    代码示例1:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                //现在我想使用jQuery代码给body中设置一个标签进去
    
                //封装一个div对象
                var mydiv=$('<div>abc</div>');
                //获取Body对象
                var body=$('body').append(mydiv);
    
                //我现在把这个h1设置进入div里面,最终他呈现的位置是:h2之后与之并列
                $('h1').appendTo('div');
    
                //在ul之后插入元素
                $('ul').after('<h2>bbbbbbbbbb</h2>');
    
                //将span标签移到div后面去
                $('span').insertAfter("#mydiv2");
            });
        </script>
    </head>
    <body>
        <h1>一行标题</h1>
        <div id="mydiv">
            <h2>22222222222</h2>
        </div>
    
       <ul>
           <li>abc</li>
           <li>abc</li>
           <li>abc</li>
           <li>abc</li>
           <li>abc</li>
       </ul>
    
       <span>这是span标签</span>
    
       <div id="mydiv2">nihao</div>
    </body>
    </html>
    

    在这里插入图片描述
    代码示例2:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                //包裹方式1:如何在span标签外面包裹一层
                $('span').wrap('<div></div>');
    
                //移除包裹
                $('span').unwrap();
    
                //包裹方式2:或者你可以创建一个div元素,然后将这个原生的DOM对象包裹在span标签外面
                var mydiv = document.createElement('div');
                $('span').wrap(mydiv);
            });
        </script>
    </head>
    <body>
        <span>
            abc
        </span>
    </body>
    </html>
    

    10、jQuery事件绑定

    • 在 JavaScript 课程的学习中, 我们用到了很多事件, 常用的事件有: click、 dblclick、mousedown、mouseup、mousemove、 mouseover、mouseout、change、 select、 submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error

    • jQuery 通过.bind()方法来为元素绑定这些事件。 可以传递三个参数:bind(type, [data], fn)

    • type 表示一个或多个类型的事件名字符串;
    • [data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;
    • fn 表示绑定到指定元素的处理函数。

    绑定事件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                $('button').bind('click', function () {
                    alert("弹框");
                });
            });
        </script>
    </head>
    <body>
        <button>一个按钮</button>
    </body>
    </html>
    

    如何一次绑定多个事件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                // $('button').bind('click', function () {
                //     alert("弹框");
                // });
    
                // $('button').bind('mouseover', function () {
                //     $(this).css('background','red');
                // });
    
                //如果觉得这样写比较麻烦,可以连缀着写
                $('button').bind('click',function(){
                    alert("弹框");
                }).bind('mouseover',function(){
                    $(this).css('background','red');
                }).bind('mouseout',function(){
                    $(this).css('background','yellow');
                });
            });
        </script>
    </head>
    <body>
        <button>一个按钮</button>
    </body>
    </html>
    

    解绑事件1:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                // $('button').bind('click', function () {
                //     alert("弹框");
                // });
    
                // $('button').bind('mouseover', function () {
                //     $(this).css('background','red');
                // });
    
                //如果觉得这样写比较麻烦,可以连缀着写
                $('button').bind('click',function(){
                    alert("弹框");
                }).bind('mouseover',function(){
                    $(this).css('background','red');
                }).bind('mouseout',function(){
                    $(this).css('background','yellow');
                });
    
    
                //如何解绑事件
                //如果什么都不写,解绑所有事件
                $('button').unbind('click');
            });
        </script>
    </head>
    <body>
        <button>一个按钮</button>
    </body>
    </html>
    

    解绑事件2:

    我们可以通过给每个点击事件起个别名,用于区分他们,然后通过别名取消该事件;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                //绑定多个单击事件
                $('button').bind('click.abc',function(){
                    alert('第一次弹框');
                }).bind('click.xyz',function(){
                    alert('第二次弹框');
                });
    
                //如果只想移除第一个单击事件,可以给第一个单击事件起个别名,通过这个别名解绑事件
                $('button').unbind('click.abc');
            });
        </script>
    </head>
    <body>
        <button>一个按钮</button>
    </body>
    </html>
    

    事件的简写:

    为了使开发者更加2方便的绑定事件,jQuery 封装了常用的事件以便节约更多的代码。 我们称它为简写事件。

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                $('button').click(function (e) { 
                    e.preventDefault();
                }).mouseover(function(){}).mouseout(function(){});
            });
        </script>
    </head>
    <body>
        <button>一个按钮</button>
    </body>
    </html>
    

    复合事件:

    jQuery 提供了许多最常用的事件效果,组合一些功能实现了一些复合事件,比如切换功能、智能加载等;

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.3.1.js"></script>
    
        <script>
            $(document).ready(function () {
                // $('button').click(function (e) { 
                //     e.preventDefault();
                // }).mouseover(function(){}).mouseout(function(){});
    
                //他把移入移出事件看作是一个动作
                $(selector).hover(function () {
                        // over
                        alert("移出来");
                    }, function () {
                        // out
                        alert("移进来")
                    }
                );
            });
        </script>
    </head>
    <body>
        
    </body>
    </html>
    

    注意要把原生的JS对象转为jQuery对象;

    事件对象

    事件对象就是 event 对象,通过处理函数默认传递接受。之前处理函数的 e 就是 event事件对象,event 对象有很多可用的属性和方法;

    在这里插入图片描述

    事件对象和之前原生的JS中的事件对象一样,比较容易掌握;

    事件之冒泡和默认行为

    • 冒泡行为:页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题;
      在这里插入图片描述

    • 我给 A B C 三个元素都设置了点击事件,那么当我点击 C 时 ,C,B,A 依次都会执行各自的点击事件,这种现象称之为冒泡行为;

    • 默认行为:一些元素本身就具有的行为,比如 a 标签的页面跳转行为提交按钮的提交表单行为,就是默认行为。

    • 有时候,我们是想阻止掉这种冒泡行为,或者元素的默认行为,Jquery封装了一些方法。

    在这里插入图片描述
    阻止冒泡行为:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			#wai{
    				width: 300px;
    				height: 300px;
    			}
    			#zhong{
    				width: 200px;
    				height: 200px;
    			}
    			#nei{
    				width: 100px;
    				height: 100px;
    			}
    		</style>
    		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="wai">
    			aaaaaa
    			<div id="zhong">
    				bbbbbbbbbb
    				<div id="nei">
    					cccccccc
    				</div>
    			</div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		$('div').eq(0).css('background-color','red');
    		$('div').eq(1).css('background-color','yellow');
    		$('div').eq(2).css('background-color','blue')
    		$('div').eq(0).click(function(){
    			//取消事件冒泡
    			$(this).stopPropagation();
    			alert("我是外面");
    		});
    		$('div').eq(1).click(function(){
    			//取消事件冒泡
    			$(this).stopPropagation();
    			alert("我是中间");
    		});
    		$('div').eq(2).click(function(){
    			alert("我是里面");
    		});
    	</script>
    </html>
    

    阻止默认行为:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<a href="http://www.baidu.com">进入百度</a>
    	</body>
    	<script type="text/javascript">
    		$('a').on('click',function(e){
    			//阻止a标签跳转页面的行为
    			e.preventDefault();
    		})
    	</script>
    </html>
    

    高级事件

    浏览器一打开自动触发我们绑定的事件

    $(function() {
            $('button').bind('click', function() {
               alert("点击了");
            });
    
            $('button').trigger('click'); //浏览器一打开自动触发该点击事件
    
             以上两步可以合写在一起如下
              /*$('button').bind('click', function() {
                     alert("点击了");
              }).trigger('click'); */
    });
    

    传递数据

    那么bind在绑定事件的时候也能传递数据,这里要跟trigger传递的数据区分一下,如果是bind传递的数据我们用事件对象e中的data属性取数据;

    $('button').bind('click', function(e, data1, data2, data3) {
    			alert("取出trigger传过来的数据" + data1 + "和" + data2[0] + "和" + data3.name);
    		}).trigger('click', ['abc', [2, 3], { name: 'hello'}]);
    
    		//注意多个数据用[ ] 括起来,data1 ,data2,data3 指的就是[ ]中的数据
    
    // 那么bind在绑定事件的时候也能传递数据, 这里要跟trigger传递的数据区分一下
    // 如果是bind传递的数据我们用事件对象e中的data属性取数据
    	$('button').bind('click', { age: '23' }, function(e, data1, data2, data3) {
    		alert("取出trigger传过来的数据" + data1 + "和" + data2[0] + "和" + data3.name + "和bind中传递的数据要用事件对象e中的data属性去取" + e.data.age);
    }).trigger('click', ['abc', [2, 3], { name: 'hello' }]);
    

    高级事件之自定义事件

    $('button').bind('myEvent',function(){
               alert('自定义事件');
    }).trigger('myEvent');
    

    高级事件之简写事件

    • .trigger()方法提供了简写方案,只要想让某个事件执行模拟用户行为,直接再调用一个空的同名事件即可。
    $('button').bind('click', function() {
         alert("点击了");
    }).trigger('click');
    //上面的可以简写为如下的:
    $('input').click(function () {
    	alert('我的第一次点击来自模拟!');}).click(); 
    //空的 click()执行的是 trigger()
    
    • 这种便捷的方法,jQuery 几乎个所有常用的事件都提供了。
    blur focusin mousedown resize
    change focusout mousenter scroll
    click keydown mouseleave select
    dblclick keypress mousemove submit
    error keyup mouseout unload
    focus load mouseover
    
    • 注意为了语义性更加好,一般不推荐简写方案,当然你要使用也是没有问题的

    高级事件之triggerHandler()

    • jQuery 还提供了另外一个模拟用户行为的方法:.triggerHandler();这个方法的使用和.trigger()方法一样。
    $('input').click(function () {
           alert('我的第一次点击来自模拟!');}).triggerHandler('click');
    
    • 在常规的使用情况下,两者几乎没有区别,都是模拟用户行为,也可以可以传递额外参数。但在某些特殊情况下,就产生了差异:

    1、triggerHandler()方法并不会触发事件的默认行为,而.trigger()会。
    2、triggerHandler()方法只会影响第一个匹配到的元素,而.trigger()会影响所有。
    3、triggerHandler()方法会返回当前事件执行的返回值,如果没有返回值,则返回undefined;而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。
    4、trigger()在创建事件的时候,会冒泡。但这种冒泡是自定义事件才能体现出来,是jQuery 扩展于 DOM 的机制,并非 DOM 特性。而.triggerHandler()不会冒泡。

    11、jQuery动画

    1、显示隐藏

    • jQuery 中显示方法为:.show(),隐藏方法为:.hide()
    • 在无参数的时候,只是硬性的显示内容和隐藏内容;有参代表展示的时长;
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                $('button').eq(0).click(function(){
                    //显示
                    //参数可以表示时常
                    $('div').show(1000);
                });
                $('button').eq(1).click(function(){
                    //隐藏
                    $('div').hide(1000);
                });
                $('button').eq(2).click(function(){
                    //隐藏
                    $('div').toggle(1000);
                });
            });
        </script>
    </head>
    <body>
        <div></div>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
    </body>
    </html>
    

    2、下拉上卷

    jQuery 提供了一组改变元素高度的方法:.slideUp().slideDown().slideToggle()。顾名思义,向上收缩(卷动)和向下展开(滑动)。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                $('button').eq(0).click(function(){
                    $('div').slideUp(1000);
                });
                $('button').eq(1).click(function(){
                    $('div').slideDown(1000);
                });
                $('button').eq(2).click(function(){
                    $('div').slideToggle(1000);
                });
            });
        </script>
    </head>
    <body>
        <div>
    
        </div>
        <button>上卷</button>
        <button>下拉</button>
        <button>开关</button>
    </body>
    </html>
    

    3、淡入淡出

    jQuery 提供了一组专门用于透明度变化的方法:.fadeIn().fadeOut(),分别表示淡入、淡出,当然还有一个自动切换的方法:.fadeToggle()

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                $('button').eq(0).click(function(){
                    $('div').fadeIn(1000);
                });
                $('button').eq(1).click(function(){
                    $('div').fadeOut(1000);
                });
                $('button').eq(2).click(function(){
                    $('div').fadeToggle(1000);
                });
            });
        </script>
    </head>
    <body>
        <div>
    
        </div>
        <button>淡入</button>
        <button>淡出</button>
        <button>切换</button>
    </body>
    </html>
    
    展开全文
  • 一个用于构建用户界面的jQuery库。 通过建立具有纯更新的声明性方法,Nito的助手和约定使jQuery应用程序模块化和可维护。 快速导览 设置Nito就像添加jQuery一样简单: < script src =" ...
  • jquery库

    2014-01-15 17:43:40
    jquery库
  • jQuery库及其相关实例

    2017-09-05 16:55:09
    jQuery库及其相关实例,jQuery库及其相关实例,jQuery库及其相关实例,jQuery库及其相关实例,jQuery库及其相关实例
  • jquery是非常常用的javascript框架,但是官网的运行速度较慢,所以我下载好,上传到这,供大家下载
  • jquery资源 jquery.js

    2020-03-29 11:36:41
    jquery.js文件是存在于html网页开发中不可缺少的文件,能够有效编辑生成html网页代码,操作方便,具有跨浏览器的特性。
  • 用于从 code.jquery.com 快速下载 jQuery 的插件 安装 抗原: antigen bundle voronkovich/get-jquery.plugin.zsh 或者克隆这个 repo 并将其添加到您的 .zshrc 中: fpath=(path/to/cloned/repo $fpath) 用法...
  • 软件包的版本号与jQuery库+打包版本相同。 有关此软件包的最新可用版本,请参见我们的。 Plone <4.3不支持jQuery 1.7。 因此,如果您依赖plone.app.jquery,则应将其固定在构建配置中为1.4.4。 请注意,在...
  • 主要介绍了JavaScript的jQuery库中function的存在和参数问题,包括function的参数传递和检测一个jQuery方法是否存在等,需要的朋友可以参考下
  • 各个版本的JQuery库

    2012-03-19 11:50:37
    jquery-1.1.4.js jquery-1.4.3.js jquery-1.6.2.js jquery-1.7.1.min.js .. 从jquery1.1到jquery1.7.1各个版本的js文件
  • 本篇文章主要介绍了详解webpack3如何正确引用并使用jQuery库,具有一定的参考价值,有兴趣的可以了解一下
  • javascript原生和jquery库实现iframe自适应内容高度和宽度—推荐使用jQuery的代码! ‍<iframe src=index....
  • jquery库文件略庞大,因此在某些情况下就需要用纯js替换jquery,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 182,166
精华内容 72,866
关键字:

jquery库

友情链接: 中断.zip