什么是 jQuery 和jQuery的基本选择器，层级选择器，基本筛选器

Posted 2020-10-19 .

jQuery是什么？ 

［1］   jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

［2］   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

［3］  它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

［4］  jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理htmldocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

［5］  jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery的优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用

什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html()

$("#test").html() 
   
         意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

         这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

         虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

         约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

 jquery的基础语法：$(selector).action()     

 参考：http://jquery.cuishifeng.cn/

寻找元素(选择器和筛选器)

选择器

基本选择器 

// 所有元素
$("*")
// 根据ID查找
$("#id")   
// 根据class名查找
$(".class")  
// 根据标签名查找
$("element")  
// 组合选择器
$(".class,p,div")

层级选择器 

// 后代选择器
$(".outer div")  
// 子代选择器
$(".outer>div")   
// 毗邻选择器
$(".outer+div")  
// 兄弟选择器(后面的兄弟标签)
$(".outer~div")

基本筛选器

// 第一个
$("li:first")  
// 索引为2的
$("li:eq(2)")  
// 索引值为偶数的
$("li:even") 
// 索引值为奇数的
$("li:odd") 
// 索引值大于1的
$("li:gt(1)")
// 索引值小于1的
$("li:lt(1)")
// 去除所有与给定选择器匹配的元素,id不为d1的li标签
$("li:not(#d1)")
// 匹配含有选择器所匹配的元素的元素
:has(元素名)