经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery的介绍及选择器
来源:cnblogs  作者:行走的阳光  时间:2019/5/20 8:53:08  对本文有异议

1.什么是JQuery。  

      JavaScript开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

      把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)

常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个

jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。

1.1jQuery的优点好处 

     jQuery设计的宗旨是'Write Less,Do More',即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的操作,优化HTML文档操作、事件处理、动画设计和Ajax交互。
     jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
     极大地简化了 JavaScript 编程。

1.2JQuery中页面加载事件

  1. // 第一种写法
  2. $(document).ready(function() {
  3. });
  4. // 第二种写法
  5. $().ready(function() {
  6. });
  7. // 第三种写法
  8. $(function() {
  9. });

jQuery入口函数与window.onload的对比

   JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
   jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

1.3JQuery优点总结:

  1. -查找元素的方法多种多样,非常灵活
  2. -拥有隐式迭代(自动循环遍历)特性,因此不再需要手写for循环了。
  3. -完全没有兼容性问题。
  4. -实现动画非常简单,而且功能更加的强大。
  5. -代码简单、粗暴。

2.选择器

2.1JQuery基本选择器

名称 用法 描述
ID选择器 $("#id"); 获取指定ID的元素
类选择器 $(".class"); 获取同一类class的元素
标签选择器 $("div"); 获取同一类标签的所有元素
并集选择器 $("div,p,li"); 使用逗号分隔,只要符合条件之一就可
交集选择器 $("div.redClass"); 获取class为redClass的div元素

2.2JQuery层级选择器

名称 用法 描述
子代选择器 $("ul>li"); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $("ul li"); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

2.3JQuery过滤选择器

名称 用法 描述
:eq(index) $("li:eq(2)").css(“color”,"red"); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始
:odd $("li:odd").css("color","red"); 获取到的li元素中,选择索引号为奇数的元素
:even $("li:even").css("color","red"); 获取到的li元素中,选择索引号为偶数的元素

2.4JQuery筛选方法

名称 用法 描述
children() $("ul").children("li"); 相当于$("ul-li"),子类选择器
find() $("ul").find("li"); 相当于$("ul li"),后代选择器
siblings() $("#first").siblings("li"); 查找兄弟节点,不包括自己本身
parent() $("first").parent(); 查找父级元素
eq(index) $("li").eq(2); 相当于$("li:eq(2)"),index从0开始
next() $("li").next(); 找下一个兄弟
prev() $("li").prev(); 找上一个兄弟
closest $("li").closest("ul") 找最近一个祖先元素

 

 

原文链接:http://www.cnblogs.com/shineguang/p/10891537.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号