请选择 进入手机版 | 继续访问电脑版

马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#技术求助 ASP.NET技术求助

【源码下载】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接外包项目】 面试-葵花宝典下载

官方一群:

官方二群:

一篇文章教会你jQuery应用

[复制链接]
查看2024 | 回复1 | 2019-10-17 09:48:50 | 显示全部楼层 |阅读模式

一  认识jQuery

  jQuery是JavaScript Query的缩写情势。jQuery是一款非常良好的JavaScript库,即便是MVVM框架盛行的今天,也有高出半数的网页及应用直接或间接的利用了jQuery。jQuery的设计理念是“Write Less, Do More“,即写的更少,做的更多!利用jQuery可以大大简化我们的JS代码,从而进步开辟服从。

  jQuery如今有3个大的版本,分别是1.x,2.x,3.x。你可以从jQuery官方网站下载必要的版本,然后从本地引入到本身的项目,也可以利用CDN引入。在你下载jQuery时一样平常有两个可选的版本,一个是压缩版(不包罗换行和空格,体积更小,多用于现实项目开辟),另一个是未压缩版(包罗换行和空格,体积稍大,多用于学习和测试)。

  1. 1 <script src="jquery-1.12.4.js"></script>
  2. 2 <!--本地引入-->
  3. 3 <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  4. 4 <!--CDN引入-->
复制代码

  别的,jQuery从第二个大的版本开始,为了优化网络响应和使语法更加简洁,抛弃了对IE6、7、8的支持,而且从2.1.0开始,压缩版本的文件中也不再包罗解释信息了。为了获得更好的兼容性,我们这里利用的jQuery文件版本号是1.12.4。

二  jQuery焦点

  1,$符号

  jQuery现实上是一个函数对象。究竟上,jQuery通过全局变量jQuery引用该函数对象,$符号是jQuery变量的一个别名,为了写的更少,我们通常都利用$符号表现该对象。

  1. 1 window.jQuery === window.$; //true
  2. 2 jQuery === $;// true
  3. 3 typeof($);// 'function'
复制代码

  如果你还利用了其他框架,或自界说了$变量,那么有大概和jQuery的$符号造成冲突。

  1. 1 jQuery.noConflict();
复制代码

  在利用jQuery编程之前,起首调用noConflict()方法,排除jQuery对$符号的占用,如许就可以解决这一问题了。但往后就只能通过变量jQuery来利用jQuery的所有功能了。

  

  2,参数

  $焦点函数可以吸收3种类型的参数,分别是函数引用、字符串、DOM对象。

    a) 吸收一个函数  

  1. 1 $(function(){
  2. 2 //some code
  3. 3 });
  4. 4 //这种方式的完备写法应该是:
  5. 5 //$(document).ready(function(){some code});
复制代码

    这种方式雷同原生JS的window.DOMContentLoaded方法,只要HTML文档剖析完毕并生成DOM tree就会触发该事件。但是在jQuery中可以同时存在多个该方法。

    b) 吸收字符串

  1. 1 var box1 = $('div');
  2. 2 //吸收css选择器字符串,可以拿到DOM tree中相应的DOM元素,并把它包装成jQuery对象
  3. 3 var box2 = $('<div></div>');
  4. 4 //吸收HTML代码片断,可以创建相应的DOM元素,并把它包装秤jQuery对象
复制代码

    c) 吸收DOM元素    

  1. 1 var box = document.getElementById('#box');
  2. 2 var jBox = $(box);//jQuery obj
复制代码

    如果焦点函数吸收一个DOM元素,那么它会把该DOM元素包装成一个jQuery对象,并返回。

  jQuery对象究竟上是一个类数组,生存了获取到的DOM元素。只有通过jQuery对象才可以访问jQuery提供的属性和方法。

  

  3,静态方法

  jQuery提供了一些静态方法,比方遍历数组,字符串去空格,判断数据类型等等,这些方法在ES5之前都是很实用的方法,但ES5之后,原生JS就已经实现了这雷同的方法,所以这里就不再详细解说了,有兴趣可以自行查看官方文档。jQuery把ajax干系操纵也封装为静态方法,稍后会专门解说。这里要讲的只有holdReady方法。

  1. 1 $.holdReady(true);
  2. 2 $(function(){
  3. 3 //some code
  4. 4 });
  5. 5 $.joldReady(false);
  6. 6 //参数true,停息ready方法的实行,参数false,恢复ready方法的实行
复制代码

三  jQuery 属性和节点

  

  1,选择器

  选择器是jQuery的焦点功能。绝大多数css支持的选择器都可以在jQuery得到支持。

  1. 1 $('p');//标签选择器
  2. 2 $('.class');//类选择器
  3. 3 $('#id');//id选择器
  4. 4 $('[type=text]');//属性选择器
  5. 5 $('input[type=email]');//组合选择器
  6. 6 $(#id p);//子女选择器
  7. 7 $(#id p:first-child);//筛选选择器
  8. 8 //...
复制代码

  通过焦点函数获取到的DOM元素都被包装成jQuery对象,以类数组的情势存储。我们可以通过eq方法获取此中某一个,还可以通过get方法获取DOM对象。

  1. 1 var divList = $('div');//获取所有div
  2. 2 var domDiv = divList.get(0);//获取第一个Dom元素,如果有的话
  3. 3 var jqDiv = divList.eq(0);//获取第一个jq对象,如果有的话
  4. 4 var another = $(domDiv);//<strong>把Dom元素转化成jq对象</strong>
复制代码

  别的jQuery还提供了一些通过层级结构查找元素的方法。

  1. 1 $('div').find('span');//查找div内部的span,等同于$('div span')
  2. 2 $('li').first();//获取匹配的元素中的第一个
  3. 3 $('li').last();//获取匹配的元素中的最后一个
  4. 4 $('div').next();//获取所有匹配到的div的下一个兄弟元素的集合
  5. 5 $('div').prev();//获取所欲匹配到的div的上一个兄弟元素的集合
  6. 6 $('div').parent();//获取匹配到的div的共同父元素
  7. 7 $('div').children();//获取div的子元素集合
  8. 8 $('div').siblings();//获取div的兄弟元素集合
  9. 9 //...
复制代码

  2,属性操纵

  获取DOM元素之后,jQuery把它们包装成jq对象,然后你就可以通过jQuery提供的方法修改相应的DOM元素了,包括CSS,文本,属性节点,HTML结构等等。

  属性及属性节点干系:

  1. 1 $('div').attr('name','test');//设置属性名:name,属性值:test
  2. 2 $('div').attr('name');//获取属性name的值
  3. 3 $('div').removeAttr('name');//删除属性name
  4. 4
  5. 5 ******************************
  6. 6
  7. 7 $('div').prop('name','test');
  8. 8 $('div').prop('name');
  9. 9 $('div').removeProp('name');
  10. 10 //prop的用法和attr千篇一律,唯一差别的是prop既可以操纵DOM元素的属性,也可以操纵它的属性节点
复制代码

  当属性没有被表现的设置时,通过attr()方法获取将返回undefined,而prop()方法可以返回true大概false,所以,如果你要检索和更改DOM属性,比如元素的checked,selected,或disabled状态,推荐利用prop()方法,其他时间都利用attr方法

  注意,利用上诉方法获取属性值时,返回的只是第一个匹配的DOM元素的相应属性值。但是设置的时间却是为所有匹配的DOM元素都添加该属性。

  class类干系:

  1. 1 $('div').addClass('test');//添加类,如需添加多个类,利用空格隔开即可
  2. 2 $('div').removeClass('test');//删除类,如需删除多个类,也用空格隔开即可
  3. 3 $('div').toggleClass('test');//切换类,如果DOM元素已经有该类了,那么就删除,如果没有则添加
复制代码

  文本及结构干系:

  1. 1 $('div').html();//获取第一个匹配到的div的内容
  2. 2 $('div').html('<p>我是段落</p>');//设置所有匹配到的div的内容
  3. 3 $('div').text();//获取所有匹配元素的文本内容
  4. 4 $('div').text('hello');//设置所有匹配到的div的文本内容
  5. 5 $('input').val();//获取匹配元素value值
  6. 6 $('input').val('hello');//获取匹配元素value值
复制代码

  css干系:

  1. 1 $('div').css('background-color','red');//设置元素的单个css属性
  2. 2 $('div').css({
  3. 3 width:'200px',
  4. 4 height:'200px',
  5. 5 background-color:'red'
  6. 6 });//通过对象设置多个css属性
复制代码

  尺寸及位置干系:

  1. 1 $('div').width();//获取div的内容区宽度,可传参设置
  2. 2 $('div').height();//获取div的内容区高度,可传参设置
  3. 3 //innerWidth,innerHeight表现content+padding的宽高
  4. 4 //outerWidth,outerHeight表现content+padding+border的宽高
  5. 5 $('div').offset();//获取div相对视口的偏移量,返回值是一个包罗top和left属性,且值为数字的对象
  6. 6 $('div').position();//获取div相对父元素的偏移量,返回值是一个包罗top和left属性,且值为数字的对象
  7. 7 //offset和position都以像素计,而且只对可见的元素起作用
复制代码

  

  3,节点

  jQuery也提供了节点的增、删、改、查干系方法。

  1. 1 $("div").append("<p>Hello</p>");//在div内部的末端插入元素
  2. 2 $("div").prepend("<p>Hello</p>");//在div内部的开头插入元素
  3. 3 $("div").after("<p>Hello</p>");//紧挨着div的背面插入元素
  4. 4 $("div").before("<p>Hello</p>");//紧挨着div的前面插入元素
  5. 5 $("div").remove();//删除div元素,但是会保留文本
  6. 6 $("div").empty();//清空div中的所有内容
复制代码

四  jQuery 事件

  1,事件绑定和移除

  jQuery提供了两种绑定事件的方式,第一种是on+事件名称的具体事件方法,第二种是直接利用on方法。

  1. 1 $('div').onclick(function(){});
  2. 2 $('div').on('click',function(){});
  3. 3 //事件处置惩罚函数可以是匿名函数,也可以是函数引用,如果涉及到排除事件绑定,建议利用函数引用的方式
复制代码

  jQuery的事件绑定雷同原生JS的addEventListener方法,可以同时绑定同一类型的多个事件,而不会相互覆盖。

  jQuery通过off方法排除事件绑定。

  1. 1 function test(){};
  2. 2 $('div').on('click',test);
  3. 3 $('div').off();//移除div绑定的所有事件
  4. 4 $('div').off('click');//移除div绑定的所有click事件
  5. 5 $('div').off('click',test);//移除div绑定的具体事件
复制代码

  

  2,制止事件冒泡和默认举动

  利用jQuery制止事件冒泡和默认举动与原生JS一样。不太清晰的可以查看我的《DOM之事件(一)》。

  1. 1 $('div').on('click',function(){
  2. 2 //some code
  3. 3 e.stopPropagation();
  4. 4 });
  5. 5 //制止事件冒泡
  6. 6 $('a').on('click',function(){
  7. 7 //some code
  8. 8 return false;//简朴方式
  9. 9 //e.preventDefault();//W3C标准方式
  10. 10 });
  11. 11 //制止默认举动
复制代码

  

  3,一次性事件和自动触发事件

  通常我们给元素绑定的事件处置惩罚程序必要特定的事件才能触发,比如click,mouseover等等,jQuery提供了triggerHandler方法,你可以通过该方法手动触发元素绑定的事件处置惩罚程序,而不用比及特定事件发生。

  1. 1 $('div').on('click',function(){
  2. 2 //some code
  3. 3 });
  4. 4 //一样平常必要比及用户点击div,函数才会被实行
  5. 5 $('div').triggerHandler('click');
  6. 6 //自动触发div的click事件,不用比及用户点击
复制代码

  jQuery还提供了另一个方法:trigger。它的功能和triggerHandler方法一样。他们的差别之处在于triggerHandler不会触发事件的默认举动和冒泡。

  1. 1 $('div').one('click',function(){
  2. 2 //some code
  3. 3 });
  4. 4 //jQuery通过one方法绑定一个只会被触发一次的事件处置惩罚程序
复制代码

  

  4,事件委托

  jQuery通过delegate方法实现事件委托。该方法利用上和原生JS有一些区别,原生JS实现事件委托也请移步《DOM之事件(一)》。

  1. 1 $("ul").delegate("li", "click", function(){
  2. 2 $(this).toggleClass("test");
  3. 3 });
  4. 4 //把li的点击事件委托给ul,被委托元素一样平常是委托元素的父元素
复制代码

五  jQuery 动画

  

  1,表现和潜伏

  jQuery通过show方法和hide方法实现元素的表现和潜伏。它的原理是修改元素的display和宽高及opacity属性。

  1. 1 $('div').show(1000);
  2. 2 //使div表现,1000表现整个过程持续时间,单元是ms
  3. 3 $('div').hide(1000);
  4. 4 //使div潜伏
复制代码

  这两个方法还可以接受一个回调函数作为第二个参数,用于设置动画完成后必要实行的操纵。

  

  2,睁开和收起

  jQuery通过slideDown,slideUp实现平缓的睁开和收起元素。该方法是通过高度变化(向下增大或减小)来动态地表现元素,在表现完成后可选地触发一个回调函数。

  1. 1 $("p").slideDown(1000);
  2. 2 //睁开,可以设置一个时间,表现整个过程持续时间,单元ms
  3. 3 $("p").slideUp(1000);
  4. 4 //收起
  5. 5 $("p").slideToggle(1000);
  6. 6 //切换
复制代码

  睁开后收起动画常用来做下拉菜单。

  

  3,淡入淡出

  jQuery通过fadeIn和fadeOut实现淡入淡出效果。该方法的原理是修改元素的opacity属性,不会改变元素的宽高。也可吸收一个回调函数。

  1. 1 $("div").fadeIn(1000);
  2. 2 //淡入,可一吸收一个数字作为参数,表现过程持续时间,单元ms
  3. 3 $("div").fadeOut(1000);
  4. 4 //淡出
  5. 5 $("div").fadeTo(1000,0.5);
  6. 6 //调解到指定值
  7. 7 $("div").fadeToggle(1000);
  8. 8 //切换
复制代码

  

  4,自界说动画

  jQuery通过animate方法实现自界说动画效果。

  1. 1 $('div').animate({
  2. 2 width:500px,
  3. 3 opacity:0.8
  4. 4 },1000);
  5. 5 //该方法吸收一个对象,表现动画竣事时元素的状态,第二参数是一个数字,表现持续时长,单元ms,也可以吸收一个回调函数作为第三个参数
复制代码

  注意,jQuery的动画接纳队列情势,每编写一个动画,就向动画队列中插入一个,只能等前面的实行完后才实行背面的。

  

  5,停止和延伸

  jQuery的stop方法可以停息正在实行的动画。

  1. 1 $('div').stop();
  2. 2 //立即停止当前动画,直接开始实行队列中后续的动画,如果有的话
  3. 3 $('div').stop(true,true);
  4. 4 //stop方法可以吸收两个blloean值作为参数。第一个规定在停止当前动画的同时对否清除队列中的其他动画,第二个规定在停止当前动画的同时是否要直接完成队列中其他动画。
复制代码

  介于jQuery通过队列情势控制动画实行,我们建议在调用jQuery动画之前都先调用一次stop方法,以免造成动画杂乱。

  1. 1 $('div').stop();
  2. 2 $('div').animate({
  3. 3 //some code
  4. 4 },1000);
复制代码

  jQuery通过delay延伸动画的实行。

  1. 1 $('div').animate({
  2. 2 width:200px;
  3. 3 height:200px;
  4. 4 },1000).delay(1000).animate({
  5. 5 background-color:red;
  6. 6 },1000);
  7. 7 //在改变宽高后等待1000ms再改变背景颜色
复制代码

六  jQuery Ajax

  jQuery封装了功能完备的Ajax方法,我们常用的jQuery方法有3个,分别是$.ajax()、$.get()、$.post()。

  

  1,ajax()方法

  ajax方法吸收一个对象作为参数,对象的属性名为ajax的设置参数,属性值为ajax的设置值。

  1. 1 $.ajax({
  2. 2 type: "POST",
  3. 3 url: "some.php",
  4. 4 data: "name=ren&age=12",
  5. 5 cache: false;
  6. 6 dataType:"text",
  7. 7 success: function(msg){
  8. 8 //some code
  9. 9 },
  10. 10 error:function(msg){
  11. 11 //some code
  12. 12 }
  13. 13 });
复制代码

  常用的参数有:

    type:请求类型,可选值有post和get。

    url:发送请求的地点。

    data:发送到服务器的数据。必须是“key0=value0&key1=value1“或键值对的情势(对象)。

    cache:规定是否读取缓存数据,true表现读取,false表现不读取,直接从服务器获取。

    dataType:盼望服务器返回的数据类型,可选值有xml,html,script,json,text。

    success:ajax请求成功回调函数。

    error:ajax请求失败回调函数。

  利用ajax()方法时,所有的设置参数都是可选的,除了上诉参数外,还有许多其他的参数可选,这让我们在通过jQuery实现ajax时有了更大的机动性。如果你想了解更多干系参数的信息,请到jQuery官网查询。

  

  2,get()方法

  如果你以为ajax()方法发送简朴get请求照旧太贫困,那么你可以直接利用$.get()方法。

  1. 1 $.get(
  2. 2 "url",
  3. 3 { name: "ren", age: "12" },
  4. 4 function(msg){
  5. 5 //some code
  6. 6 },
  7. 7 "text"
  8. 8 );
复制代码

  该方法只必要4个参数,发送请求的url,发送的数据,请求成功的回调函数,盼望的返回值类型。

  

  3,post()方法

  利用$.post()方法和$.get()一样,他们都只必要4个参数。

  1. 1 $.post(
  2. 2 "url",
  3. 3 { name: "ren", age: "12" },
  4. 4 function(msg){
  5. 5 //some code
  6. 6 },
  7. 7 "text"
  8. 8 );
复制代码

  

  4,load()方法

  load()方法可以直接请求服务器的数据并添加到DOM元素中。默认利用get方式,如果你向服务器发送了数据,将自动转换为post方式。

  1. 1 $("div").load(
  2. 2 "test.html",
  3. 3 {name:"ren",age:"12"},
  4. 4 function(){//some code}
  5. 5 );
  6. 6 //载入一份新的html文档到div中,并向服务器发送了数据。
复制代码

  load()方法可以有3个参数,请求的url,向服务器发送的数据,请求成功后的回调函数。

写在最后:jQuery作为一款工具库,我们只必要知道它夺目什么和怎么干就好,不必完全深入的学习它。当我们必要用它的时间共同官方文档编写干系代码即可。如果你在技术上有所寻求,那么你照旧可以细致研读jQuery源码,信赖肯定会有不少收获。其实不光jQuery,在你学习其他框架或库或工具的时间,也可以按照这种方式学习,作为一个软件工程师,盘算机原理,操纵系统,网络技术等等才是构造你上升的基石,其次才是各种编程语言,热门框架及工具等等。







来源:https://www.cnblogs.com/ruhaoren/p/11670211.html
C#论坛 www.ibcibc.com IBC编程社区
C#
C#论坛
IBC编程社区
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则