JQuery 选择器
JQuery概述:
1.jquery是一个优秀的JavaScript框架,它是一个轻量级的js库。
( 轻量级的含义十分简单 。一个jquery的库文件大概只有100+k,jquery1.9下载地址)
2. jquery更方便的处理HTML document,events,CSS代码,实现各种动画效果,方便地为网站提供AJAX交互。
JQuery可以满足下列需求:
1.获取页面中的元素(不需要遍历)
(主要的操作就是用ID选择器 或者class选择器进行获取)
2.方便地修改页面的外观(调用CSS代码)
$("选择器名").css();
3.方便地改变页面的内容
改变的方式有很多方法(隐藏:hide; 显示:show ;显示在html中:html)
4.提供了操作页面的各种事件
事件的话 可以去表里面查。
(1).read: 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 $("document").ready(function(){})
(2)例如blue (焦点) change() mouseover和mousemove的用法是一致的 都是当鼠标划过的时候触发
mouseout 和mouselesve用法是一致的都是鼠标离开的时候触发 这些的用法和javascript的区别就是没有了on
$("选择器"),blue(funtion(){});
5.为页面添加动画效果
6.无需刷新页面与服务器进行交互。
好的 说了这么多 。大家可能对选择器比较迷茫吧。
下面来写一个元素选择器的例子。
我现在来解析一下 这里用到了mouseOver事件 当鼠标划入的时候标签会出现我们在上面定义的css的样式
(原谅我只会用这种最简单的方式来生成网页用图了)
基础选择器
元素选择器 $("元素名")
class选择器 $(".class选择名") 所有属性为class标注的元素
id 选择器 $("#id选择名") 选中所有属性为id标注的元素
多选择器 $("选择器1,选择器2,...")
*选择器 $("*") 选择所有元素
(这里的选择器的不同 用法只需改变第9行的(“a”)中的a替换掉)
层次选择器:
祖先---子孙 $("祖先元素 子孙元素")选中所有祖先元素中所有指定的子孙元素
如:$("form input")
父---子 选中所有父元素下所有的指定的子元素
如:$("ol > li");
同一层次中:
相邻的唯一元素 选择所有指定元素之后的相邻的一个元素
如:$("选择器+选择器")
相邻的所有指定元素 选择所有指定元素之后的相邻的所有指定选择器
如:$("选择器 ~ 选择器")
下面我来贴一张关于层次选择图的做法
总结一下 就是选择元素 (也就是被操作的元素 我更愿意用影响这个词)
1.祖先 和子孙一般就发生在form 表单与input之间 (中间是 空格)
2.父子值得是包含关系 例如有序列表(ur>li) (中间是 大于号)
3.仅仅选择的是相邻的下一个元素 例如(可能会有很多img元素在a元素的下面 但是仅仅只需影响下一个元素,就需要用(选择器a+选择器img))要注意的就是 我们中间用的是+号
4. 选择所有的指定元素 与3不同的就是 中间的+ 换成了"~" 这个符号就在esc键下面哦
基本过滤器:
:first 匹配找到的一个元素 $("tr:first") 找到第一行
:last 匹配找到的最后一个元素
:not(selector) 去除所有给定选择器匹配的元素
:even 匹配所有索引值未偶数的元素(索引从0开始计数)
:odd 匹配所有索引值为奇数的元素
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有给定元素大的元素
:lt() 匹配所有给定元素小的元素
下面贴的图是对于偶数与奇数的用法 (记住even是偶数 以及even是奇数 。并且要注意的地方就是 是从零开始记数的)
下面贴的图是索引值的变化
- eq是给定的索引值
- gt是给定元素大
- lt给定元素小的情况
- 要注意的情况就是一定要区别自己写的不同情况下的不同操作 不能搞混了
属性过滤器:
[属性名] 匹配包含给定属性的元素
[属性名=属性值] 匹配指定属性有指定取值的元素
[属性名!=属性值] 匹配属性不包含特定值的元素
[属性名^=属性值] 属性值以某些值开始
[属性名$=属性值] 属性值是以某些值结尾的元素
下面我要来说明一个问题
那就是 如果进行属性选择的时候 会不止选择一个元素 所以最后返回的是一个数组 (这就是js最不规范的地方,他没有数据类型啊。所有的类型都是var这也是最麻烦的地方了)
下面给出两种解决方法
1.方法一 就是简单的对数组进行遍历 要注意的地方就是 获取Input中text中输入的数据方法是.value 而不是.val()函数
2.方法二 重新写一个数组 将得到的选择器写入数组中 然后在对数组进行遍历(这个方法虽然和第一种类似 )但是更有利于理解获取的是数组元素
表单选择器:
注意 用到这里时还是要注意 会有数组元素的出现 因此要学会遍历数组
:input 匹配所有input 元素,textarea ,select ,button元素
:text 匹配所有的文本框
:password 匹配所有的密码框
:radio 匹配所有的密码框
:button 匹配所有的button按钮
$(":input") 选择所有的表单输入元素,包括input,textarea,select和button
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域