前端之jQuery

Posted 2021-01-04 dong-

一. jQuery介绍

　　1. jQuery是一个轻量级的,兼容多种浏览器的javascript库.

　　2. jQuery可以更方便的处理html Document,Events,实现动画效果,更方便的进行Ajax交互,能够极大的简化JavaScript编程.

　　3. 具有丰富的DOM选择器,jQuery的选择器使用非常方便,jQuery用几行代码就可以实现JS多行代码要实现的功能.

　　4. 链式表达式,jQuery的链式操作可以把多个操作写在一行,更加简洁.

　　5. 事件,样式,动画支持.jQuery还简化了JS操作css代码,并且代码段的可读性也比JS要强.

　　6. Ajax操作支持.jQuery简化了Ajax操作,后端只需返回一个json格式的字符串就能完成与前端的通信.

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

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

二. jQuery对象

　　jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.

　　如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法.

三. 查找标签

　　1. 选择器

　　　　①. id选择器

　　　　　　$( "#id" )

　　　　②. 标签选择器

　　　　　　$( "标签名" )

　　　　③. class选择器

　　　　　　$( ".classname" )

　　　　④. 配合使用

　　　　　　$( "div.c1" )　　//找到有c1样式类的div标签

　　　　⑤. 所有元素选择器

　　　　　　$( "*" )

　　　　⑥. 组合选择器

　　　　　　$( "#id, .classname, 标签名" )

　　　　⑦. 层级选择器

　　　　　　$( "x y" )　　//x标签下的所有y标签

　　　　　　$( "x > y" )　　//x标签的所有次一级y标签

　　　　　　$( "x + y" )　　//找到所有紧挨在x标签后面的y标签(只能找一个)

　　　　　　$( "x ~ y" )　　//x标签之后所有的同级兄弟y标签

　　　　⑧. 基本筛选器　　(简写)

　　　　　　$( ":first" )　　筛选页面内第一个父标签

　　　　　　$( ":last" )　　筛选页面内最后一个标签

　　　　　　$( ":eq(index)" )　　索引为index的那个元素(元素从上至下按索引排序)

　　　　　　$( ":even" )　　匹配所有索引值为偶数的元素,从0开始计算

　　　　　　$( ":odd" )　　匹配所有索引值为奇数的元素,从0开始计算

　　　　　　$( ":gt(index)" )　　匹配所有索引值大于index索引的元素

　　　　　　$( ":lt(index)" )　　匹配所有索引值小于index索引的元素

　　　　　　$( "div:not()" )　　选择满足div的标签但不包括含有not后()内的条件的标签

　　　　　　$( "div:has()" )　　选择所有后代中含有has后()内条件的的div标签