JQuery

一、简介

JQuery是一兼容多跨浏览器的、轻量级的javaScript库，简化HTM与JavaScript之间的操作。

优点：1）简化js的操作

2）不再需要关心兼容性

3）提供大量的实用方法

二、使用

$ 是jQuery的核心函数，jQuery的核心功能都是通过这个函数实现
$的四个作用:
    $(function(){})
         相当于window.onoad = function(){}
$(“htm字符串”)
         根据这个htm字符串创建元素节点对象
    $(“选择器”)
         根据这个选择器查找元素节点对象
    $(DOM对象)
         将DOM对象包装为jQuery对象

 /*$就是jQuery，也就量一个函数，$在jquery中被称为jquery的核心函数
        $(function(){
            aert("heo word");
        }); 
         //等同于window.onoad=function(){aert("heo word"); }
         */
         //window.onoad=function(){aert(jQuery); }//测试
         
         $(function(){
             $("#btn").cick(function(){
                 aert("how are you");
             });
         });
         
         window.onoad=function(){
             var btnEe=document.getEementById("btn");
             btnEe.oncick=function(){
                 aert("nice to meet you");
             }
         }
         
        </script>

三、选择器

jQuery最牛的地方就是其强大的选择器, 使用其选择器基本可以快速轻松的找到页面的任意节点

jquery的选择器分类

基本选择器

层次选择器

过滤选择器

基本

内容

可见

属性

子元素

表单

表单属性

1). 基本选择器

基本选择器是jquery中最简单，也是最常用的选择器

它通过标签名,id属性,cass属性来查找匹配的DOM元素

1.1) id选择器

用法:$(‘#id’)

返回值：根据id属性匹配一个标签, 封装成jQuery对象

1.2) 标签选择器

用法: $(‘tagName’)

返回值：根据标签名匹配的一个或多个标签, 封装成jQuery对象

1.3) cass选择器

用法: $(‘.cass’)

返回值：根据cass属性值匹配一个或多个标签, 封装成jQuery对象

1.4) *选择器

用法: $(*)

返回值: 匹配所有标签, 封装成jQuery对象

1.5) seector1,seector2,…

用法: $(”div,span,.myCass”)

返回值: 所有匹配选择器的标签, 封装成jQuery对象

2). 层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。

2.1). ancestor descendant

用法:$(”form input”)

说明:在给定的祖先元素下匹配所有后代元素

2.2) parent > chid

用法: $(”form > input”)

说明: 在指定父元素下匹配所有子元素.注意:要区分好后代元素与子元素

2.3) prev + next

用法: $(”abe + input”)

说明: 匹配所有紧接在prev元素后的next元素

2.4) prev ~ sibings

用法: $(”form ~ input”)

说明: 匹配prev元素之后的所有 sibings元素, 不包含该元素在内,并且sibings匹配的是和prev同辈的元素,其后辈元素不被匹配.

3). 基本过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头

按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤, 表单过滤和表单属性过滤选择器.

3.1). :first

用法: $(”tr:first”) ;

说明: 匹配找到的第一个元素

3.2). :ast

用法: $(”tr:ast”)

说明: 匹配找到的最后一个元素.与 :first 相对应

3.3). :not(seector)

用法: $(”input:not(:checked)”)

说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).

3.4). :even

用法: $(”tr:even”)

说明: 匹配所有索引值为偶数的元素，从0开始计数.js的数组都是从0开始计数的.

3.5). :odd

用法: $(”tr:odd”)

说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.

3.6). :eq(index)

用法: $(”tr:eq(0)”)

说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

3.7). :gt(index)

用法: $(”tr:gt(0)”)

说明: 匹配所有大于给定索引值的元素.

3.8). :t(index)

用法: $(”tr:t(2)”)

说明: 匹配所有小于给定索引值的元素.

4). 内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

4.1). :contains(text)

用法: $(”div:contains(’John’)”)

说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.

4.2). :empty

用法: $(”td:empty”)

说明: 匹配所有不包含子元素或者文本的空元素

4.3). :has(seector)

用法: $(”div:has(p)”).addCass(”test”)

说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上cass=”test”.

4.4). :parent

用法: $(”td:parent”)

说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

5). 可见过滤选择器

根据元素的可见和不可见状态来选择相应的元素

5.1). :hidden

用法: $(”tr:hidden”)

说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中dispay:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.

5.2). :visibe

用法: $(”tr:visibe”)

说明: 匹配所有的可见元素.

6). 属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

6.1). [attribute]

用法: $(”div[id]“)

说明: 匹配包含给定属性的元素. 例子中是选取了所有带id属性的div标签.

6.2). [attribute=vaue]

用法: $(”input[name='newsetter']“).attr(”checked”, true)

说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有name属性是newsetter的 input 元素.

6.3). [attribute!=vaue]

用法: $(”input[name!='newsetter']“).attr(”checked”, true)。

说明：匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=vaue]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=vaue]).之前看到的 :not 派上了用场.

6.4). [attribute^=vaue]

用法: $(”input[name^=‘news’]“)

说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!

6.5). [attribute$=vaue]

用法: $(”input[name$=‘etter’]“)

说明: 匹配给定的属性是以某些值结尾的元素.

6.6). **[attribute*=vaue]**

用法: $(”input[name*=‘man’]“)

说明: 匹配给定的属性是以包含某些值的元素.

7). 子元素过滤选择器

7.1). :nth-chid(index/even/odd/equation)

用法: $(”u i:nth-chid(2)”)

说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤 (Basic Fiters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.

7.2). :first-chid

用法: $(”u i:first-chid”)

说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别的记忆一下区别.

7.3). :ast-chid

用法: $(”u i:ast-chid”)

说明: 匹配最后一个子元素.’:ast’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

7.4). : ony-chid

用法: $(”u i:ony-chid”)

说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

8). 表单选择器

8.1). :input

用法: $(”:input”)

说明:匹配所有 text, textarea, seect 和 button 元素

8.2). :text

用法: $(”:text”)

说明: 匹配所有的单行文本框.

8.3). :password

用法: $(”:password”)

说明: 匹配所有密码框.

8.4). :radio

用法: $(”:radio”)

说明: 匹配所有单选按钮.

8.5). :checkbox

用法: $(”:checkbox”)

说明: 匹配所有复选框

8.6). :submit

用法: $(”:submit”)

说明: 匹配所有提交按钮

8.7). :image

用法: $(”:image”)

说明: 匹配所有图像域.

8.8). :reset

用法: $(”:reset”)

说明: 匹配所有重置按钮.

8.9). :button

用法: $(”:button”)

说明: 匹配所有按钮.这个包括直接写的元素button.

8.10). :fie

用法: $(”:fie”)

说明: 匹配所有文件域.

8.11). :hidden

用法: $(”input:hidden”)

说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些stye为hidden的也会被匹配.

9). 表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

9.1). :enabed

用法: $(”input:enabed”)

说明: 匹配所有可用元素.意思是查找所有input中不带有disabed=”disabed”的input.不为disabed,当然就为enabed啦.

9.2). :disabed

用法: $(”input:disabed”)

说明: 匹配所有不可用元素.与上面的那个是相对应的.

9.3). :checked

用法: $(”input:checked”)

说明: 匹配所有被选中的元素(复选框、单选框等，不包括seect中的option).

9.4). :seected

用法: $(”seect option:seected”)

说明: 匹配所有选中的option元素.

发表于 2017-11-09 19:00 问渠哪得清如许123 阅读(310) 评论(0) 编辑收藏举报