前端学习笔记之jQuery选择器一

一 jQuery基本概念

　　1.什么是：第三方，快速，简洁的javascript函数库

　　2.为何：

　　　　　（1）DOM操做的终极简化：

　　　　　　　　学jquery仍是在学DOM，只不过API更简单

　　　　　　　　核心DOM：万能,API太繁琐

　　　　　　　　HTML DOM：简洁，不是万能

　　　　　　jQuery简化了：

　　　　　　1.DOM四大操做：查找，修改，删除，添加

　　　　　　2.事件处理

　　　　　　3.动画操做：

　　　　　　4.Ajax操做：

　　　　　（2）屏蔽浏览器兼容性问题：

　　　　　　凡是jQuery让使用，都没有兼容性问题

　　3.如何：

　　　　第三方：不是浏览器内置的，也不是开发人员本身编写

　　　　由其它第三方组织或我的编写的

　　　下载:jQuery.com

　　　　　　版本：1.x  兼容旧浏览器

　　　　　　　　jquery-1.x.js 为压缩版本  可读写好，体积大

　　　　　　　　　　　　----学习

　　　　　　　　jQuery-1.x.min.js 压缩版本体积小，可读性差

　　　　　　　　　　　　-----生产环境

　　　CDN网络：内容分发网络

　　　　共享的资源在网络中多台服务器上都有副本

　　　　客户端请求资源时，CDN网络会智能选择离客户端最近，网络最近的服务器下载资源。

　　　为何：就近快速得到资源

　　　什么时候:只要公共的/通用的库/框架到从CDN网络中调用

　　　script src="http://CDN地址"

　　使用jQuery以前，必须先引入jQuery.js文件：

二  jQuery对象：

　1.什么是：用jQuery工厂函数包装jQuery简化版API以前，都有将DOM对象包装为jQuery对象

　2.什么时候：只要但愿使用jquery简化版API以前，都要将DOM对象包装为jquery对象

　3.如何：

　　　　(1).将现有DOM对象包装为jQuery对象

　　　　　　var $xxx = jQuery(DOM对象)

　　　　(2)什么时候：如何已经得到了一个DOM对象，想用简化版API。好比：this,  e.target,转化为jQuery对象

　　　　　　var $this=jQuery(this);

　　　　　　var $target = jQuery(e.target);

   4.直接用jquery工厂函数查找：

　　var $xxx= jquery("选择器")

　　　什么时候：绝对多数状况，在未得到任何元素中，首选用jquery工厂函数直接查找元素。

　　引入jquery，js文件时：3件事：

　　　　（1）向window中添加了一个jquery工厂函数，用于建立Jquery类型的对象

　　　　（2）为jquery工厂函数添加了一个原型对象

　　　　　　在jquery工厂函数的原型对象中封装了全部简化版API。

　　　　　　每次使用jquery工厂函数得到的jquery结果中对象继承自jquery原型对象，可直接使用原型对象中保存的简化版API

　　　　（3）向window中添加全局变量$，引用jquery工厂函数。——全部jquery均可用$代替。

问题：若是选择器查找到多个元素，如何保存

　　其实:jquery对象是一个类数组对象

　　　　找到的每一个DOM对象都是类数组对象中的一个元素

　　　　且 Jqeury简化版API都自带forEach效果

　　　　只须要调用一次，便可自动应用到每一个DOM对象上

小知识：

　　　　chrome控制台中也能够使用$("选择器")查找元素：

　　　　chrome控制台也提供了$函数相似于jquery的$,但无需引入jquery也能够使用。

　　　　如何；只查找一个:$("选择器")至关于jquerySelector

　　　　　　　找多个:$$("选择器")至关于querySelectorAll

一.查找

1.选择器：css  jquery新增

　　基本:5个  同css

　　　#id  elemenet .class  *  selector1,selector2,...

　　层级:4个  通css

　　parent child  parent>son

　　prev + next  prev~siblings

实例：1.事件绑定:$(...)事件名(function(){...})

　　　2.修改css样式：$（...）.css("css属性名"，"值")

　　　　强调：对$(...)调用一次API,至关于自动对$(...)找到的每一个DOM元素分别调用API——自带forEach

 

按选择器查找：过滤选择器

1.基本过滤 ：位置过滤--------jquery独有， css没有

　　什么是：根据元素在查找结果集合中的下标位置选择元素

　　强调：1.将全部元素查找到集合中 再按照下标过滤

　　　　　2.下标从0开始

               3.和元素在父元素中的相对位置无关

　　什么时候使用：只要但愿根据元素在结果集合中的位置查找元素

　　如何使用：

　　　　包括：

　　　　（1） elem(s):first/last  获取结果集合中第一个/最后一个元素

　　　　（2） elem(s):even/odd  获取结果结合中偶数/奇数位置的元素

　　　　（3） elem(s):lt/gt/eq(i)  获取结果集合中小于/大于/等于i位置的元素

　　基本过滤中特殊： animated 选择正在播放动画的元素

　　　　（4） elem(s):animated

　　　　（5） elem(s):not(selector) 否认伪类，同css

　　练习过程当中的问题：

　　　　　一个 .css 只能设置一个css属性

　　　　　解决： $(...). css({

　　　　　　　　css属性 ：值，

　　　　　　　　     ...   :  ...

　　　　　});　

　　　　　强调：1.css属性必须去横线变驼峰

　　　　　强烈建议，只要在js中使用css属性，都去横线变驼峰

　　　　　　　　2.若是属性值为数字，可不加引号，且可省略单位

2.子元素过滤：同css

　　什么是：根据元素在其父元素中的相对位置选择

　　强调：1.序号从1开始

　　　　　2.序号相对于父元素内部编号

　　什么时候：只要根据元素在其父元素中的位置选择

　　如何： 包括：

　　　　　　（1）:first/last-child 获取做为其父元素下一个第一个子元素的全部元素

　　　　　　（2）:nth-child(n|2n|2n+1|eveb|odd)

　　　　　　（3）:only-child  获取做为独生子女的子元素

3.内容过滤：根据元素的内容查找

　　：contains(tetx)   查找内容中包含tetx的元素

　　　　　好比：span:contains("购物车")

　　　　　强调：只能是文字中包含text的，若是是标签中包含，则不选择

　　　　　（1）：empty 查找内容为空的元素

　　　　　（2）：parent 查找内容不为空的元素   -> :not(:empty)

　　　　　　　　强调：只要包含内容(子元素或文本)就选择

　　　　　　（3）：has(selector) 选择包含符合selector要求的子元素的父元素

　　　　　　　　　　好比：li:has(.active) 选择包含class为active的子元素的父元素li

4.可见性过滤：

　　　　　　：hidden ：选择全部不可见的元素

　　　　　　让网页不可见：4种：

　　　　　　　　display:none,

　　　　　　　　visibility:hidden,

　　　　　　　　opactiy:0

　　　　　　　　type="hidden"

　　　　　　可是：

　　　　　　　　：hidden只能选择display :none 的type ="hidden"的

　　　　　　　　：visible :选择全部可见的元素

5.属性过滤：同css的属性选择器

　　　　什么是：按照任意属性的任意值选择元素

　　　　什么时候：只要按除id，元素，class以外的其余属性做为条件查找时，甚至模糊查找时

　　　　如何：

　　　　　　[属性名]  选择包含指定属性的元素

　　　　　　[属性名 = 值]  选择属性的值等于指定值的元素

　　　　　　[属性名 ^=值]  选择属性值以指定值开头的元素

　　　　　　[属性名$= 值]  选择属性值以指定值结尾的元素

　　　　　　[属性名 *=值] 选择属性值包含指定值的元素

　　　　　　[属性名 != 值] 选择属性值不等于指定值的元素

　　　　　　　　其实：：not([属性名 !=值])

　　　　　　　　强调：即选择包含title属性，但值不符合

　　　　　　　　也选择不包含title属性的

　　　　　　特殊：且

　　　　　　　　[属性选择器1][属性选择器2]...

　　　　　　表单元素过滤：

　　　　　　什么是:利用表单元素的标签名和type属性值选择表单中元素

　　　　　　什么时候：只要查找表单中的表单元素时

　　　　　　如何；包含：

　　　　（1）：input 选择全部表单元素:inout selecttextarea button 

　　　　　　每种type都对应一个选择器：

　　　　（2）：text：password :radio  :checkb  ox:submit:reset

　　　　　　:file  :button  :hidden :iamge

6.状态过滤：

　　　　什么是：选择处于三大状态之一的元素

　　　　什么时候：只要根据元素的状态选择元素

　　　　如何：包含

　　　　（1）：disabled  

　　　　（2）：checked  

　　　　（3）:selected

　　　　　练习：问题 1:.css智能修改css属性

　　　　　　　　　　　解决：.attr("属性名"，"新值")

　　　　　　　　　　　可修改标准属性

　　　　　　　　　　　.attr("属性名")  获取属性值

　　　　　　总结：jquery API第二大特色：

　　　　　　　　一个函数两用：没提供新值，就读取属性现有的值

　　　　　　　　　　　　　　　提供了新值，就修改属性为新值

　　　　　　　　问题:2 attr 没法访问三大状态属性

　　　　　　　　解决：pop()专门操做三大状态属性

　　　　　　总结：

　　　　　　何时用选择器查找

　　　　　　没有任何元素，执行首次查找时