精华内容
下载资源
问答
  • 关于jquery库的作用
    2021-12-30 16:57:41

    一、

    jQuery是什么?


    jQuery是一个JavaScript库,是由John Resig创建于2006年1月的开源项目,jQuery凭借着简介的语法和跨平台的兼容性,极大简化了JavaScript开发人员遍历HTML文档,操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript程序员的设计思路和编写程序的方式。简单地来说:

    1、jQuery是一个优秀的JavaScript库。


    2、jQuery极大地简化了JavaScript编程。


    3、jQuery很容易学习。


    二、jQuery的优点


    jQuery强调的理念是“写得少,做的多”jQuery独特的选择器、链式操作、事件处理机制和封装完善的ajax都是JavaScript望尘莫及的。总结有以下优点:

    1、轻量级。jQuery非常轻巧,经过最好的压缩工具UglifyJS压缩之后,大小保持在30KB左右。
    强大的选择器。jQuery支持CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。


    2、出色的DOM操作的封装。jQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序时能够得心应手。
    可靠地事件处理机制。jQuery的事件处理机制吸收了Javascript事件处理函数的精华,使jQuery在处理事件绑定的时候相当可靠。


    3、完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax时能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
    不污染顶级变量。jQuery 只建立一个名为jQuery 的对象,所有的函数方法都在这个对象之下。
    出色的浏览器兼容性。jQuery 几乎支持所有的主流浏览器,同时jQuery 还修复了一些浏览器之间的差异。


    4、链式操作方式。jQuery 最具有特色的莫过于他的链式操作方式——即同时发生在同一个jQuery 对象的一组动作,可以直接连写而无需重复获取对象。
    隐式迭代。当用jQuery 找到带有“.myClass”类的全部元素,然后隐藏他们时,无需循环遍历每一个返回的元素。相反,jQuery 里的方法都被设计成自动操作对象集合,这使得大量的循环结构变得不再必要,从而大量的减少了代码量。


    5、行为层和结构层的分离。开发者可以使用jQuery 选择器选中元素,然后直接给元素添加事件。这种将行为层和结构层完全分离的思想,可以使jQuery 开发人员和HTML或者其他页面开发人员各司其职。同时,后期维护也非常方便。


    6、丰富的插件支持。jQuery 的易扩张性,吸引了来自全球的开发者来编写jQuery 的扩展插件。目前已经有成百上千的官方插件支持,而且还不断地有新的插件面世。

    更多相关内容
  • 因为个人网站规模与cdn的带宽问题,现在cdn费用虽然下来了,但也有不给力的时候,很多朋友都会选择使用第三方的jquery库,个人推荐几个国内的 百度、新浪、bootcdn 下面的两段代码的作用 如果cdn的jquery没有加载...
  • 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>
    
    展开全文
  • 近来做项目,用的jquery1.6.2,当动态增加div 及select时,事件却不起作用。 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器。而live事件:为当前或未来的匹配元素添加一个或多个事件处理器。 ...
  • 一、在运行这个函数后,可以恢复使用别名 $ ,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用。jQuery Code: 代码如下:jQuery.noConflict();(function($) { $(function() { // 使用 $ 作为 jQuery 别名...
  • 依赖说明依赖的版本版jQuery的artTemplate 3.x :beaming_face_with_smiling_eyes: :beaming_face_with_smiling_eyes: 2.x :beaming_face_with_smiling_eyes: :beaming_face_with_smiling_eyes: 1.x :beaming_face_...
  • jQuery库简介及下载引入

    万次阅读 2018-05-18 11:45:56
    使用jQuery之前要学习...jQuery库可以通过一行简单的标记被添加到网页中。使用jQuery不用担心浏览器的兼容问题jQuery库包含的功能有: HTML元素选取,HTML元素操作(修改,删除、隐藏),CSS操作,HTML事件函数,J...

    使用jQuery之前要学习HTML基础、CSS样式以及JavaScript

    jQuery是一个JavaScript函数库,对JavaScript进行封装,使JavaScript更加简洁。jQuery库可以通过一行简单的标记被添加到网页中。使用jQuery不用担心浏览器的兼容问题

    jQuery库包含的功能有:

        HTML元素选取,HTML元素操作(修改,删除、隐藏),CSS操作,HTML事件函数,JavaScript特效和动画,HTML DOM遍历和修改,AJAX(不刷新页面的同时来修改页面的内容),Utilities(工具类)。

    引入jQuery

    给网页中添加jQuery有两种方法

    1.从jquary.com下载jQuery库

        打开jQuery的官网jquary.com,点击下载,选择合适的版本进行下载,下载完成后将下载的js文件复制到你的所创建的工程当中,并通过<script>标签进行引用,具体步骤如下:

    a,下载

    b,引入




    2.从CDN中载入jQuery

        百度和新浪的服务器存有jQuery,例如:https://libs.baidu.com/jquary/3.3.1/jquary.min.js

    jQuery的基本语法

        $(selector).action()

    美元符号定义jQuery,选择符(selector)查找HTML元素,jQuery的action()执行对元素的操作。

    例如如下代码通过jQuery实现点击p元素隐藏内容的效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.3.1.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <p>hello</p>
        <p>welcome</p>
        <p>jQuary</p>
    </body>
    </html>
    /**
     * Created by dell on 2018/5/14.
     */
    $(document).ready(function() {
        $("p").click(function () {
            $(this).hide();
        })
    });
    注意:使用<script>标签引入jquery库的js文件时一定要放在引入自己定义的js文件的语句之前,否则jQuery库文件是不起作用的。

    展开全文
  • jQuery题库

    千次阅读 2018-12-27 21:12:35
    下面哪种不是jquery的选择器?( ) C。 A、基本选择器 B、层次选择器 C、css选择器 D、表单选择器 当DOM加载完成后要执行的函数,下面哪个是正确的?( ) C A、jQuery(expression, [context]) B、jQue...

    一.选择题

    1. 下面哪种不是jquery的选择器?( ) C。

    A、基本选择器 B、层次选择器

    C、css选择器 D、表单选择器

    1. 当DOM加载完成后要执行的函数,下面哪个是正确的?( ) C

    A、jQuery(expression, [context]) B、jQuery(html,[ownerDocument])

    C、jQuery(callback) D、jQuery(elements)

    1. 下面哪一个是用来追加到指定元素的末尾的?( ) C

    A、insertAfter() B、append() C、appendTo() D、after()

    1. 下面哪一个不是jquery对象访问的方法? ( ) D

    A、each() B、size() C、.length D、onclick()

    1. 在jquery中想要找到所有元素的同辈元素,下面哪一个是可以实现的?() C
      A、eq(index) B、find(expr) C、siblings([expr]) D、next()

    2. 如果需要匹配包含文本的元素,用下面哪种来实现? ( ) B

    A、text() B、contains() C、input() D、attr(name)

    1. 如果想要找到一个表格的指定行数的元素,用下面哪个方法可以快速找到指定元素? ( C)

    A、text() B、get() C、eq() D、contents( )

    1. 下面哪种不属于jquery的筛选? ( ) B

    A、过滤 B、自动 C、查找 D、串联

    1. 下面哪几种是属于jquery文档处理的? (多选) ABCD

    A、包裹 B、替换 C、删除 D、内部和外部插入

    1. 如果想被选元素之后插入 HTML 标记或已有的元素,下面哪个是实现该功能的? ( ) D

    A、append(content) B、 appendTo(content)

    C、insertAfter(content) D、after(content)

    1. 在jquey中,如果想要从DOM中删除所有匹配的元素,下面哪一个是正确的?( ) C

    A、delete() B、empty() C 、remove() D、removeAll()

    1. 在jquery中,想要给第一个指定的元素添加样式,下面哪一个是正确的? ( ) D

    A、first B、eq(1) C、css(name) D、css(name,value)

    1. 在jquery中,如果想要获取当前窗口的宽度值,下面哪个是实现该功能的? ( ) A

    A、width() B、width(val) C、width D、innerWidth()

    1. 为每一个指定元素的指定事件(像click) 绑定一个事件处理器函数,下面哪个是用来实现该功能的? ( ) B

    A、trgger (type) B、bind(type) C、one(type) D、bind

    1. 在jquery中想要实现通过远程http get请求载入信息功能的是下面的哪一下事( C )

    A、 . a j a x ( ) B 、 l o a d ( u r l ) C 、 .ajax() B、load(url) C、 .ajax()Bload(url)C.get(url) D$. getScript(url)

    1. 在一个表单中,如果想要给输入框添加一个输入验证,可以用下面的哪个事件实现? ( D)

      A、hover(over ,out) B、keypress (fn) C、change() D、change(fn)

    2. 当一个文本框中的内容被选中时,想要执行指定的方法时,可以使用下面哪个事件来实现? ( ) C

      A、click(fn) B、change(fn) C、select(fn) D、bind(fn)

    18.以下 jquery 对象方法中,使用了事件委托的是( ) D
    A、bind B. 、mousedown C、change D、on

    19.元素的type属性的取值可以是(多选)ABD
    A、image B、checkbox C、select D、button

    20.下列jQuery事件绑定正确的是____。A
    A. bind(type,[data],function(eventObject))
    B. $(‘#demo’).click(function() {})
    C. $(‘#demo’).on(‘click’,function() {})
    D. $(‘#demo’).one(‘click’,function() {})

    21.怎么才能隐藏下面的元素? C
    <input id=”id_txt” name=”txt” type=”text”value=””/>
    A. $(“id_txt”).hide();
    B. $(#id_txt).remove();
    C. $(“#id_txt”).hide();
    D. $(“#id_txt”).remove();

    1. jQuery 的方法get()做什么?A
      A.使用 HTTP GET 请求从服务器加载数据

    B. 返回一个对象
    C. 返回存在jQuery对象中的DOM元素
    D. 触发一个get AJAX请求

    1. 在jQuery中

    $( ‘#hello’ ).css ( “color”,"#f0000" )

    $( ‘#hello’ ).css ( “color”" )

    分别表示的含义是: (多选) AB

    A. $(‘#hello’).css(“color”,#0000)表示选择id为hello 的元素,并设置颜色为"f0000"

    $( ‘#hello’ ).css ( “color”" )表示选择id为hello 的元素,并且取到该元素字体显示的颜色

    $(‘#hello’ )css(“color”"f0000"表示选择CSS类为hello的元素,并且取到该元素字体显示的颜色

    D. $(‘hello’)css(“color”)表示选择CSS类为hello 的元素,并且取到该元素字休显示的颜色

    1. 在jquery中,选择使用myClass类的css的所有元素( )A

    A、 ( &quot; . m y C l a s s &quot; ) B . 、 (&quot;.myClass&quot;) B. 、 (".myClass")B.("#myClass") C、 ∗ D 、 {*} D、 D{‘body’}

    1. 在jquery中指定一个类,如果存在就执行删除功能,如果不存在就执行添加功能,下面哪一个是可以直接完成该功能的?() C

    A、removeClass() B、deleteClass() C、toggleClass(class) D.addClass()

    1. JQuery中,属于鼠标事件方法的选项是( ) B

    A. onclick( ) B. mouseover( ) C. onmouseout( ) D. blur( )

    1. 在Jquery中,既可绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件,又可以切换元素可见状态的方法是( ) B

    A… hide( ) B. toggle( ) C. hover( ) D.slideUp( )\

    1. 关于bind( )方法与unbind( )方法说法正确的是( 多选 ) BC D

    A. bind( )方法可用来移除单个或多个事件
    B unbind( )方法可以移除所有的或被选的事件处理程序
    C. 使用bind( )方法可绑定单个或多个事件

    D. unbind( )方法是与bind( )方法对应的方法

    1. 在Jquery中,关于fadeIn()方法正确的是( ) B

    A. 可以改变元素的高度

    B 可以逐渐改变被选元素的不透明度,从隐藏到可见(褪色效果)

    C 可以改变元素的宽度

    D 与fadeIn( )相对的方法是fadeOn( )

    1. 下面选项中()能获得焦点 A

      A.blur() B.select() C.docus() D.onfocus()

    2. ( )能够动态改变层中的提示内容 A

    A利用html( )方法 B.利用层的id属性

    C.使用onblur事件 D.使用display属性

    1. 在jQuery中,通过jQuery对象.css( )可实现样式控制,以下说法正确的是(多选) AB

    A. css( )方法会去除原有样式而设置新样式

    B. 正确语法:css(“属性”,”值”)

    C. css( )方法不会去除原有样式

    D. 正确语法:css(“属性”)

    1. 下列选项中,不属于键盘事件的是( )。D

    A.keydown B.keyup C.keypress D.ready

    1. 以下jQuery代码运行后,对应的HTML代码变为( ) B

    HTML代码:

    你好

    jQuery代码:$(“p”).append(“快乐编程”);

    A.

    你好

    快乐编程

    B.

    你好快乐编程

    C. 快乐编程

    你好

    D.

    快乐编程你好

    35下列选项中,有关数据验证的说法中正确的是( )。D

    A.使用客户端验证可以减轻服务器压力

    B.客观上讲,使用客户端验证也会受限于客户端的浏览器设置。

    C. 基于JavaScript的验证机制正是将服务器的验证任务转嫁至客户端,有助于合理使用资源。

    D. 以上说法均正确

    1. 以下关于Jquery优点的说法中错误的是( ) C

    A.jquery的体积较小,压缩以后,大约只有100kb

    B.jquery封装了大量的选择器、DOM操作、事件处理,使用起来比JavaScript简单得多

    C.jquery的浏览器兼容很好,能兼容所有的浏览器

    D.jquery易扩展,开发者可以自己编写jquery的扩展插件

    1. 在Jquery中,下列关于DOM操作的说法错误的是( ) AC

    A.$(A).append(B)表示将A追加到B中

    B.$(A).appendTo(B)表示把A追加到B中

    C.$(A).after(B)表示将A插入到B以后

    D.$(A).insertAfter(B)表示将A插入到B以后

    1. 以下()函数不是jQuery内置的与AJAX相关的函数。B

    A、  . a j a x ( ) B . .ajax() B. .ajax()B..get() C. . p o s t ( ) D . .post() D. .post()D..each()

    1. 以下()选项不能够正确地得到这个标签:( ) B

    <input id="btnGo"type=”buttom” value=”点击”class=”btn”>

    A.KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲btnGo”) …(“.btnGo”)

    C. ( “ . b t n ” ) D . (“.btn”) D. (.btn)D.(“input[type=’button’]”)

    1. 以下关于jQuery的描述错误的是()D

    A.jQuery是一个javascript函数库

    B. jQuery极大地简化了JavaScript编程

    C. jQuery的宗旨是“write less,do more”

    D. jQuery的核心功能不是根据选择器查找HTML元素,然后对这些元素执行相关的操作。

    1. 在jQuery中被誉为工厂函数的是()C

      A.ready() B.function() C。$() D.next( )

    二.填空题

    1. jquery访问对象中的size()方法的返回值和jQuery对象的______属性一样. length

    2. jquery中KaTeX parse error: Expected group after '_' at position 18: …his).get(0)的写法和_̲______是等价的。(this)[0])

    3. 现有一个表格,如果想要匹配所有行数为偶数的,用___实现,奇数的用_____实现

      even odd

    4. 在一个表单里,想要找到指定元素的第一个元素用____实现,那么第二个元素用_____

    实现。 first eq(1)

    1. 在jquery 中,用一个表达式来检查当前选择的元素集合,使用_____来实现,如果这个表达式失效,则返回____值。 is(expr) false

    2. 在编写页面的时候,如果想要获取指定元素在当前窗口的相对偏移,用____来实现,该方法的返回值有两个属性,分别是____和_____ offset, top, left

    3. 在一个表单中,如果将所有的div元素都设置为绿色,实现功能是_______ $( “div”).css( “color”,”green’ )

    4. 在jquery 中,当鼠标指针悬停在被选元素上时要运行的两个方法,实现该操作的是_____ $(selector).hover(inFunction,outFunction)

    5. 在jquery中,想让一个元素隐藏,用_____实现,显示隐藏的元素用____实现

    hide(), show()

    1. 在div元素中,包含了一个元素,通过has选择器获取

      元素中的 元素的语法是____ $(“div:has(span)”);

      • 元素中,添加了多个
      • 元素,通过jquery选择器获取最后一个
      • 元素的方法是______ $(“li:last”)

    2. 在三个

      • 元素中,分别添加多个
      • 元素,通过jQuery中的子元素选择器,将这三个
        • 元素中的第一个
        • 元素隐藏,代码是______ $(“li:first-child”).hide();

    3. 在页面的表单中增加了多个类型的复选框元素,其中有的处于选中状态,通过jQuery选择器,将这些选中状态的元素隐藏,代码为_____ $(“forminput:checked”).hide()

    4. 在ajax中data主要有______. _______ . ___________三种方式 html拼接的,json数组,form表单经serialize()序列化的

    5. ______方法用于模拟光标悬停事件 hover()

    6. jQuery中提供了__________方法可以停止冒泡 stopPropagation()

    7. 可以用_______,阻止这些默认的行为例如单击超链接后会自动跳转,单击"提交"按钮后表单会提交等 event.preventDefault()

    8. formData:返回一个________,可以通过循环调用来校验 数组

    9. jQuery的______可以给现在元素附加新的元素 html()

    10. jQuery中的选择器大致分为:________ . ________ ._____ .___________

    基本选择器,层次选择器,过滤选择器,表单选择器

    1. _______方法用于处理命名冲突 conflict()

    三.判断题

    1. window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行(✔)

    2. on()方法在被选元素及子元素上添加一个或多个事件处理程序(✔)

    3. $(“this”)是使用标签选择器,查找名为this的标签(✔)

    4. nextAll() 不能替代$(‘prev~siblindgs’)选择器(×)

    5. 在一个网页中一个Id可以用很多次(×)

    6. 在jquery中可以用 replaceWith() 和 replaceAll() 替换节点(✔)

    7. $(‘prev~div’) 能选择’所有的的同辈

      元素 (×)

    8. jQuery中addClass()方法 可以来设置和获取 样式 (✔)

    9. $.getScript()方法可以加载.js文件,需要对javascript文件进行处理 (×)

    10. delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数(✔)

    11. jquery的load()方法中data 参数是必须的(×)

    12. nextAll() 方法返回被选元素的所有跟随的同胞元素(✔)

    13. parent() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素(×)

    14. toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。(✔)

    15. $(‘div > span’).css(‘color’, ‘#FF0000’);的作用是选取div下的所有span元素,将字体颜色设为红色(×)

    16. jQuery是一个javascript库(✔)

    17. 通过 jQuery,$(“div.intro”) 能够选取的元素是class=“intro” 的首个 div 元素(×)

    18. jQuery.ajaxAsync()方法用于执行异步 HTTP 请求(×)

    19. jQuery 是 W3C 标准(×)

    20. jQueryget请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。(✔)

    四.简答题

    1.什么是jQuery?
    答案:jQuery是继prototype之后又一个优秀的Javascrīpt框架

    2.简述domready和onload事件的区别?图片的onloaddomready页面onload的先后顺序,并简述原因。

    答案:domready在DOM加载完毕时触发;onload在页面所有元素都已经准备好时触发,包括图片、脚本、样式,首先domready,其次图片的onload,最后页面的onload

    3.请解释 XMLHttpRequest 对象,并简要说明 jQuery 中的 $.ajax 方法使用。

    答案:XMLHttpRequest对象为我们提供了一个访问http协议的接口,可以与服务器交互数据,实现页面的局部刷新。$.ajax是JQ中封装好的使用ajax的方法,使用时传入URL、数据类型、失败成功的调用函数等等;
    $.ajax({
    url:’’,
    type:‘get/post’,
    data:{},
    dataType:’’,
    success:function(data){
    //…
    }
    });

    4.图片懒加载技术会让图片进入视野之后延迟一小段时间才让用户看到图片,体验不好。如何改进?

    答案:图片预加载,将所有图片设定一个src,提前缓存在本地,当用户需要的时候直接从本地加载。牺牲了性能换得了更好的用户体验.

    1. jquery中的选择器 和 css中的选择器有区别吗?

    答案:jQuery选择器支持CSS里的选择器,jQuery选择器可用来添加样式和添加相应的行为,CSS 中的选择器是只能添加相应的样式

    1. jquery中 . g e t ( ) 提 交 和 .get()提交和 .get().post()提交有区别吗?

    答: 1 $.get() 方法使用GET方法来进行异步请求的。 $.post() 方法使用POST方法来进行异步请求的。 2 get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体 内容发送给Web服务器的,这种传递是对用户不可见的。 3 get方式传输的数据大小不能超过2KB 而POST要大的多 4 GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。

    1. 如何来设置和获取HTML 和文本的值?

    答案:html()方法 类似于innerHTML属性 可以用来读取或者设置某个元素中的HTML内容 注意:html() 可以用于xhtml文档 不能用于xml文档 text()类似于innerText属性 可以用来读取或设置某个元素中文本内容。 val() 可以用来设置和获取元素的值

    1. 选择器中 id,class有什么区别?

    答案:在网页中 每个id名称只能用一次,class可以允许重复使用

    1. .jquery表单提交前有几种校验方法?分别为??

    答案:formData:返回一个数组,可以通过循环调用来校验 jaForm:返回一个jQuery对象,所有需要先转换成dom对象 fieldValue:返回一个数组 beforeSend()

    1. jQuery的美元符号$有什么作用?

    答案:其实美元符号$只是”jQuery”的别名,它是jQuery的选择器,如下代码:

    Html代码

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

    当然你也可以用jQuery来代替$,如下代码:

    Html代码

    jQuery(document).ready(function(){});

    jQuery中就是通过这个美元符号来实现各种灵活的DOM元素选择的,例如$(“#main”)即选中id为main的元素。

    1. window.onload()函数和jQuery中的document.ready()有什么区别?

    答案:1.执行时间

        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
    
        $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
    
        $(document).ready()在 window.onload之前执行
    

    2.编写个数不同

     window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
    
     $(document).ready()可以同时编写多个,并且都可以得到执行
    

    3.简化写法

         window.onload没有简化写法
    
        $(document).ready(function(){})可以简写成$(function(){});
    

    4.浏览器兼容性

      $(document).ready()可以跨浏览器,例如在使用ajax请求的时候自动会处理兼容
    

    5.出现地方不同

      window.onload是js标准,可出现在任何js脚本中
    
      $(document).ready只有在jq库中出现
    
    1. 编写一段代码请使用jQuery将页面上的所有元素边框设置为2px宽的虚线?
      答案:

    展开全文
  • jquery v1.7 beta1.zip

    2019-07-09 17:31:13
    jQuery 是一个JavaScript ,它有助于简化 JavaScript™ 以及 Asynchronous JavaScript XML (Ajax) 编程。与类似的 JavaScript 不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。学习 jQuery ...
  • jQuery库是什么

    2020-11-04 23:25:52
    jQuery是什么 JavaScript类库 JavaScript类库简称JS,**是为了简化JavaScript的开发或者是DOM的操作等。**其中一些JS也会根据特定的场景封装一系列的操作,例如日期控件等。 JavaScript类库会预定义一系列对象和...
  • 大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单。...第一种方法:将jQuery库下载到电脑上,然后引用,我下
  • jquery作用

    2021-08-01 18:21:55
    jQuery本身是一个基于插件的JavaScript,它的各种功能可以通过新的插件进行增强。jQuery为Web编程提供了一个抽象的层,使得它可以兼容于任何浏览器,并且大大简化了原先用JavaScript做的工作,总而言之, jQuery...
  • jQuery 插件封装的方法

    2020-11-28 07:53:10
    扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。 一、入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处...
  • 大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的,那么...第一种方法:将jQuery库下载到电脑上,然后引用,我下载的是jquery-1.7.1.min.js这个版本。 例如: 
  • jQuery的具体作用

    千次阅读 2018-09-04 09:23:27
    下面是就jQuery的具体作用: 1 、取得页面中的元素。如果不使用JavaScript ,遍历DOM (Document Object Model ,文档对象模型)树,以及查找HTML 文档结构中某个特殊的部分,必须编写很多行代码。jQuery 为准确地...
  • jQuery.preload ...导入 jQuery 后导入此插件: < script type =" text/javascript " src =" jquery.min.js " > </ script > < script type =" text/javascript " src =" jquery.
  • jQuery是目前使用最广泛的前端框架之一,有大量的第三方和插件基于它开发。为了避免全局命名空间污染,jQuery提供了jQuery.noConflict()方法解决变量冲突。这个方法,毫无疑问,非常有效。遗憾的是,jQuery的官方...
  • 1、如果设置了errorContainer、errorLabelContainer、wrapper,则errorPlacement不起作用 代码如下:… $(document).ready(function(){ $(“#myform”).validate({ errorContainer: “#messageBox1, #messageBox2...
  • 1.1 定义: jQuery是JavaScript的程序之一,它是JavaScript对象和实用函数的封装, 1.2 作用: 许多使用JavaScript能实现的交互特效,使用jQuery都能完美地实现,下面通过五个用途来更多的了解。 1.2.1 访问和操作...
  • jQuery:顾名思义,也就是javaScript和查询(Query),即是辅助Javascript开发的 jQuery的特点 JQuery是一个快速简洁的javaScript框架,可以简化查询DOM 对象、处理事件、制作动画、处理AJAX交互过程。 具体如下:...
  • spin.js是一款非常实用的jQuery Ajax loading spin旋转指示器插件。在页面进行ajax调用的时候,需要一个指示器来告诉用户当前正处于加载状态。该旋转指示器的作用就类似于一个无线循环的进度条。
  • jquery Image Player是一款可以像视频播放一样逐张播放图片的图片播放器jQuery插件。当你需要介绍你的某个产品和项目的时候,这个插件就可以发挥它的强大作用。你可以将产品或项目的各个功能做成图片,然后使用该...
  • 这个jQuery插件的作用是在缩略图模式和列表模式之间可以来回切换。这种缩略图模式和列表模式的切换效果在大多数的商城网站上都可以看到。使用该jQuery插件就可以实现这个效果。
  • 今天被这一个低级问题困扰了好一会,最基本的$(function(){});...妈蛋,jquery-1.10.2.js用的1.10.2的这个版本的文件没导入..... 要用jqeury,先要导个包 要用jqeury,先要导个包 要用jqeury,先要导个包
  • 资料这是针对存储,此分支的目的是使用新的作用域和功能刷新该Gem中的开发,因此,如果您在此处有任何请求请求,请在此导入所有问题原始回购。来自主存储的变更日志展示了很多jQuery Raty插件添加了可以自定义...
  • 超实用的jQuery代码段

    2019-03-04 10:20:41
    11.7 加载Google CDN的jQuery库 11.8 Cookies应用方法 11.9 使用cookie.js管理Cookies 11.10 让Cookies在N分钟后过期 11.11 如何删除Cookies 11.12 获取当前页面的URL并添加样式 11.13 向表格追加一行数据 11.14 ...
  • 随着时间的推移,我们将更新存储以包含一些非常基本的演示,以帮助您开始使用这些事件,但是现在,我们汇总了所提供事件及其作用的列表。 如所解释的,每个事件都由本机触摸事件或单击事件触发。 该插件会自动...
  • ![![图片说明](https://img-ask.csdn.net/upload/201710/31/1509426020_349672.png)图片说明](https://img-ask.csdn.net/upload/201710/31/1509426012_572187.png)
  • 要检查是否已加载jQuery库,请使用以下JavaScript代码: if (typeof jQuery != 'undefined') { alert("jQuery library is loaded!"); }else{ alert("jQuery library is not found!"); } 另类? 在一些...
  • 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。 一、入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,524
精华内容 19,809
热门标签
关键字:

关于jquery库的作用