一篇文章教会你jQuery应用-C#代码示例-C#论坛-C#教程-IBC编程社区

ibcadmin 发表于 2019-10-17 09:48:50

一篇文章教会你jQuery应用

一　　认识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 <script src="jquery-1.12.4.js"></script>
2 
3 <script src="//code.jquery.com/jquery-1.12.4.js"></script>
4 

　　别的，jQuery从第二个大的版本开始，为了优化网络响应和使语法更加简洁，抛弃了对IE6、7、8的支持，而且从2.1.0开始，压缩版本的文件中也不再包罗解释信息了。为了获得更好的兼容性，我们这里利用的jQuery文件版本号是1.12.4。
 
二　　jQuery焦点
 
　　1，$符号
　　jQuery现实上是一个函数对象。究竟上，jQuery通过全局变量jQuery引用该函数对象，$符号是jQuery变量的一个别名，为了写的更少，我们通常都利用$符号表现该对象。

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

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

1 jQuery.noConflict();

　　在利用jQuery编程之前，起首调用noConflict()方法，排除jQuery对$符号的占用，如许就可以解决这一问题了。但往后就只能通过变量jQuery来利用jQuery的所有功能了。
　　
　　2，参数
　　$焦点函数可以吸收3种类型的参数，分别是函数引用、字符串、DOM对象。
　　　　a) 吸收一个函数　　

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

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

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

　　　　c) 吸收DOM元素　　　　

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

　　　　如果焦点函数吸收一个DOM元素，那么它会把该DOM元素包装成一个jQuery对象，并返回。
　　jQuery对象究竟上是一个类数组，生存了获取到的DOM元素。只有通过jQuery对象才可以访问jQuery提供的属性和方法。
　　
　　3，静态方法
　　jQuery提供了一些静态方法，比方遍历数组，字符串去空格，判断数据类型等等，这些方法在ES5之前都是很实用的方法，但ES5之后，原生JS就已经实现了这雷同的方法，所以这里就不再详细解说了，有兴趣可以自行查看官方文档。jQuery把ajax干系操纵也封装为静态方法，稍后会专门解说。这里要讲的只有holdReady方法。

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

 
三　　jQuery 属性和节点
　　
　　1，选择器
　　选择器是jQuery的焦点功能。绝大多数css支持的选择器都可以在jQuery得到支持。

1 $('p');//标签选择器
2 $('.class');//类选择器
3 $('#id');//id选择器
4 $('');//属性选择器
5 $('input');//组合选择器
6 $(#id p);//子女选择器
7 $(#id p:first-child);//筛选选择器
8 //...

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

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

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

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

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

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

　　当属性没有被表现的设置时，通过attr()方法获取将返回undefined，而prop()方法可以返回true大概false，所以，如果你要检索和更改DOM属性，比如元素的checked，selected，或disabled状态，推荐利用prop()方法，其他时间都利用attr方法。
　　注意，利用上诉方法获取属性值时，返回的只是第一个匹配的DOM元素的相应属性值。但是设置的时间却是为所有匹配的DOM元素都添加该属性。
　　class类干系：

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

　　文本及结构干系：

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

　　css干系：

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

　　尺寸及位置干系：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　这两个方法还可以接受一个回调函数作为第二个参数，用于设置动画完成后必要实行的操纵。
　　
　　2，睁开和收起
　　jQuery通过slideDown，slideUp实现平缓的睁开和收起元素。该方法是通过高度变化（向下增大或减小）来动态地表现元素，在表现完成后可选地触发一个回调函数。

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

　　睁开后收起动画常用来做下拉菜单。
　　
　　3，淡入淡出
　　jQuery通过fadeIn和fadeOut实现淡入淡出效果。该方法的原理是修改元素的opacity属性，不会改变元素的宽高。也可吸收一个回调函数。

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

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

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

　　注意，jQuery的动画接纳队列情势，每编写一个动画，就向动画队列中插入一个，只能等前面的实行完后才实行背面的。
　　
　　5，停止和延伸
　　jQuery的stop方法可以停息正在实行的动画。

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

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

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

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

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

 
六　　jQuery Ajax
　　jQuery封装了功能完备的Ajax方法，我们常用的jQuery方法有3个，分别是$.ajax()、$.get()、$.post()。
　　
　　1，ajax()方法
　　ajax方法吸收一个对象作为参数，对象的属性名为ajax的设置参数，属性值为ajax的设置值。

1 $.ajax({
2 type: "POST",
3 url: "some.php",
4 data: "name=ren&age=12",
5 cache: false;
6 dataType:"text",
7 success: function(msg){
8 //some code
9 },
10 error:function(msg){
11 //some code
12 }
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 $.get(
2 "url",
3 { name: "ren", age: "12" },
4 function(msg){
5 //some code
6 },
7 "text"
8 );

　　该方法只必要4个参数，发送请求的url，发送的数据，请求成功的回调函数，盼望的返回值类型。
　　
　　3，post()方法
　　利用$.post()方法和$.get()一样，他们都只必要4个参数。

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

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

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

　　load()方法可以有3个参数，请求的url，向服务器发送的数据，请求成功后的回调函数。
 
写在最后：jQuery作为一款工具库，我们只必要知道它夺目什么和怎么干就好，不必完全深入的学习它。当我们必要用它的时间共同官方文档编写干系代码即可。如果你在技术上有所寻求，那么你照旧可以细致研读jQuery源码，信赖肯定会有不少收获。其实不光jQuery，在你学习其他框架或库或工具的时间，也可以按照这种方式学习，作为一个软件工程师，盘算机原理，操纵系统，网络技术等等才是构造你上升的基石，其次才是各种编程语言，热门框架及工具等等。
 来源：<a href="https://www.cnblogs.com/ruhaoren/p/11670211.html" target="_blank">https://www.cnblogs.com/ruhaoren/p/11670211.html</a>

页: [1]

IBC编程社区-C#论坛-C#教程,ASP.NET教程-C#源码's Archiver

一篇文章教会你jQuery应用