JQuery从0到大技术牛人学习之路！

概述一、JQuery简介 1、Jquery简介
@H_502_9@ 1.1简介@H_502_10@

jquery是继prototype以后又1个优秀的JavaScript库。它是轻量级的Js库 ，它兼容CSS3，还兼容各种阅读器（IE 6.0+, FF1.5+,sans-serif;">Safari 2.0+,sans-serif;">Opera 9.0+），jquery2.0及后续版本将不再支持ie6/7/8阅读器。jquery使用户能更方便地处理HTML（标准通用标记语言下的1个利用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jquery还有1个比较大的优势是，它的文档说明很全，而且各种利用也说得很详细，同时还有许多成熟的插件可供选择。jquery能够使用户的HTML页面保持代码和HTML内容分离，也就是说，不用再在HTML里面插入1堆Js来调用命令了，只需要定义ID便可。

jquery是免费、开源的，使用MIT许可协议。jquery的语法设计可使开发更加便捷，例如 *** 作文档对象、选择DOM元素、制作动画效果、事件处理、使用AJAX和其他功能。除此之外，jquery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

@H_502_9@ 1.2优点@H_502_10@
- （1）写少代码,做多事情【write less do more】
-    （2）免费，开源且轻量级的Js库，容量很小
-         注意：项目中，提倡援用min版的Js库
-    （3）兼容市面上主流阅读器，例如 IE，firefox，Chrome
-         注意：jquery不是将所有Js全部封装，只是有选择的封装
-    （4）能够处理HTML/JsP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
-    （5）文档手册很全，很详细
-    （6）成熟的插件可供选择
-    （7）提倡对主要的HTML标签提供1个ID属性，但不是必须的
-    （8）出错后，有1定的提示信息
-    （9）不用再在HTML里面通过标签插入1大堆Js来调用命令了

2、Jquery的9类选择器
使用jquery，首先我们需要去把jquery的包导入，这个jquery的官网上面是可以下载的，地址：https://jquery.com/，目前最新版本是3.0，1般会有两种版本的，1个是完全的，1个是迷你版本的，两个版本就是大小不1样，里面的实质性东西实际上是1样的，而这个迷你版的合适项目正式上线使用，由于占的体积小啊，1般学习或练习的话就能够尝试使用完全版的。下面以几个案例来实际说明jquery的使用，完全的代码会在文末提供下载链接，欢迎下载学习。选择器的部份在下载的文件中的/Jquery\Webroot\selector目录下。@H_502_9@ 2.1 基本选择器@H_502_10@

[JavaScript] vIEw plain copy  print?

//1)查找ID为"div1ID"的元素个数       alert(  $("#div1ID").size());                     //2)查找div元素的个数        alert( $("div").length);                     //3)查找所有样式是"myClass"的元素的个数       alert($(".myClass").size());                 //4)查找所有div,SPAN,P元素的个数       alert($("div,span,p").size());                 //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数       alert($("#div1ID,.myClass,p").size());  

@H_502_9@ 2.2 层次选择器@H_502_10@ [JavaScript] vIEw plain copy  print?

//1)找到表单form里所有的input元素的个数       alert($("form input").size());              //2)找到表单form下所有的子级input元素个数       alert($(" form > input").size());                     //3)找到表单form同级第1个input元素的value属性值       alert($("form + input").val());                     //4)找到所有与表单form同级的input元素个数       alert($("form ~ input").size());         

@H_502_9@ 2.3 增强基本选择器@H_502_10@ [JavaScript] vIEw plain copy  print?

//1)查找ul中第1个元素li的内容       alert($("ul li:first").HTML());         alert($("ul li:first").text());        //HTML()要用在HTML/Jsp中，不能用在xml中，而text()都可以用                     //2)查找ul中最后1个元素的内容       alert($("ul li:last").text());                      //3)查找所有未选中的input元素个数       alert($(":checkBox:checked").size());  //选中的    2       alert($(":checkBox:not(:checked)").size());  //未选中                     //4)查找表格的1、3、5...奇数行个数       alert($("table tr:odd").size());  //3                     //5)查找表格的2、4、6...偶数行个数       alert($("table tr:even").size());  //3                     //6)查找表格中第2行的内容，从索引号0开始       alert($("table tr:eq(1)").text());       //HTML()强调的是标签中的内容，即使标签中有子标签，也会显示出来，而text()强调的是标签中的文本内容，不会显示子标签                     //7)查找表格中第2第3行的个数，即索引值是1和2，也就是比0大       alert($("table tr:gt(0)").size());  //5                     //8)查找表格中第1第2行的个数，即索引值是0和1，也就是比2小       alert($("table tr:lt(3)").size());                      //9)给页面内所有标题 @H_301_689@ @H_502_10@ 加上红色背风景       alert($(":header").CSS("background-color","red").CSS("color","white"));   2.4 内容选择器

[JavaScript] vIEw plain copy  print?

//1)查找所有包括文本"John"的div元素的个数       alert($("div:contains('John')").size());  //2                     //2)查找所有p元素为空的元素个数       alert($("p:empty").size());  //2                     //3)给所有包括p元素的div元素添加1个myClass样式       $("div:has(p)").addClass("myClass");                     //4)查找所有含有子元素或文本的p元素个数,即p为父元素       alert($("p:parent").size());  //2  

总结

以上是内存溢出为你收集整理的JQuery从0到大技术牛人学习之路！全部内容，希望文章能够帮你解决JQuery从0到大技术牛人学习之路！所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。