jQuery记忆巩固

Posted 2020-10-11 py小蟒蛇

jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来，jQuery出现的目的是为了优化代码，提高码代码的效率它将很多功能封装。

 

一、jQuery的认识

1、何为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还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2、优势

短小、精悍，写起来简单，省事儿，开发效率高

3、js与jquery关系

jQuery就是JS写的

JS是基础，jQuery是工具

4、jQuery介绍
1）版本
　　1.x　　兼容IE8。。。
　　3.x 　　最新
2）.min.js　　压缩的 生产环境用
3）.js　　没有压缩的 开发用

5、下载即使用

1）下载：https://jquery.com/

2）导入jquery： <script src="jquery-3.2.1.js"></script> 

3）使用：jQuery.xxxxx --> $() .xxx

---

 

二、jQuery对象

1、jquery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法

简单说:

用jQuery选择器查出来的就是jQuery对象

2、jquery对象和Dom对象

jQuery对象，它只可以使用jQuery方法，不能使用DOM的方法，DOM对象也不能使用jquery方法

3、jquery对象和DOM对象的转化

1）jquery对象转DOM对象

　　jquery对象[0]  --> $(".c1")[0]

2）DOM对象转jquery对象

　　$(DOM对象)

4、基础语法

$(selector).action()   

---

 

三、选择器和筛选器

1、选择器

1）基本选择器

- ID选择器        $("#id")          
- 类选择器        $(".class")
- 标签选择器      $("element")
- 所有标签        $("*")
- 组合选择器      $("#id,.class")

2）层级选择器

- 从一个标签的子子孙孙去找    $("父亲 子子孙孙")                      $("#id a")            
- 从一个标签的儿子里面找      $("父亲>儿子标签")                     $("#id>a")  
- 找紧挨着的标签            $("标签+下面紧挨着的那个标签")            $("#id+a")
- 找后面所有同级的           $("标签~兄弟标签")                     $("#id~a")

3）属性选择器

通过属性查找        $("input[type=‘text‘]")

2、筛选器

1）基础筛选器

$(" :first")    获取第一个元素
$(" :not(‘‘)")   去除所有与给定选择器匹配的元素 
$(" :even")   匹配所有索引值为偶数的元素         
$(" :odd")    匹配所有索引值为奇数的元素
$(" :eq")    匹配一个给定索引值的元素
$(" :gt")    匹配所有大于给定索引值的元素
$(" :last")    获取最后个元素
$(" :focus")    匹配当前获取焦点的元素。

2）内容

$(":contains")    匹配包含给定文本的元素
$(" :empty")    匹配所有不包含子元素或者文本的空元素
$(" :has(‘‘)")    匹配含有选择器所匹配的元素的元素
$(" :parent")    匹配含有子元素或者文本的元素

3）可见性

$(" :hidden)    匹配所有不可见元素，或者type为hidden的元素
$(" :visible")    匹配所有的可见元素

4）表单

 View Code

5）表单属性

:enable    匹配所有可用元素
:disable    匹配所有不可用元素
:checked    匹配所有选中的被选中元素
:selected    匹配所有选中的option元素

3、方法形式的筛选

1）过滤

$("").eq()    获取当前链式操作中第N个jQuery对象
$("").first()    获取第一个元素
$("").last()    获取最后一个元素
$("").hasClass()    检查当前的元素是否含有某个特定的类，如果有，则返回true
$("").has()    保留包含特定后代的元素
$("").not()    从匹配元素的集合中删除与指定表达式匹配的元素
$("").slice(start,end)    选取一个匹配的子集

2）查找

$("").children()    所有子元素的元素集合
$("").find()    搜索所有与指定表达式匹配的元素。
$("").next()    取得后一个同辈元素
$("").nextAll()    取得后所有同辈元素。
$("").nextUntil()    查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
$("").offsetParent()    返回第一个匹配元素用于定位的父节点。
$("").parent()    取得一个包含着所有匹配元素的唯一父元素的元素集合。
$("").parents()    取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
$("").parentsUntil()    查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("").prev()    取得前一个同辈元素。
$("").prevall()     取得前所有同辈元素。
$("").prevUntil()    查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
$("").siblings()    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。