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

Posted .

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了什么是 jQuery 和jQuery的基本选择器,层级选择器,基本筛选器相关的知识,希望对你有一定的参考价值。

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(元素名)  

以上是关于什么是 jQuery 和jQuery的基本选择器,层级选择器,基本筛选器的主要内容,如果未能解决你的问题,请参考以下文章

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq

jQuery

小白入门之前端网页技术JQuery

jQuery之基本选择器

Developer Test-Jquery-选择器大全

jQuery 选择器