jQuery相关知识点2

Posted 2020-09-27 艳阳天

1-jQuery-

jQuery是一个javascript库，通过封装原生对象的JavaScript函数得到一套定义良好的方法。

jQuery主旨：以更少的代码，实现更多的功能。

 

2—jQuery优势

可以像css一样访问和操作dom；修改css控制页面外观；简化js代码操作；事件处理更容易；动画效果使用方便；ajax技术更加完美；大量的基于jQuery的插件；可以自定义扩展功能插件

 

3—jQuery语法

$(selector).action()

 

4—多库冲突

jQuery.onConflict()

 

5—原生js对象和jQuery对象之间的转换

 

Js对象=>jQuery对象

var p=document.getElementById(‘p’);

$(p);  //转换成jQuery对象

 

jQuery对象=>js对象

 $(p).get(0)或者$(p)[0]  //这样就得到js原生对象

 

6—dom操作

（1）设置元素及内容

html()  获取元素中的html内容

html(value) 设置元素中的html内容

text()   获取元素中文本内容

text(value) 设置元素中文本内容

val()   获取表单元素中的文本内容

val(value) 设置表单元素中的文本内容

  （2）操作元素属性：对标签元素属性的操作

attr（key） 获取元素key的属性值

attr(key,value)设置元素key属性的属性值

attr({key1:value,key2:value}) 设置元素多个key属性的属性值，方法的参数就是一个object对象

（3）操作css样式

Css({name1:value1,name2:value2})  设置元素多个css样式

addClass(class)   给每个元素添加一个css

addClass(class1,class2,class3)  给元素添加多个css类

remove(class)    删除元素的一个css类

removeClass(class1,class2,class3) 删除元素的多个css类

 

toggleClass(class)  来回切换默认样式和指定样式

 

7—如何使用jQuery来提取一个html标记的属性，如链接的href

attr()方法被用来提取任意一个html元素的一个属性的值。首先需要

利用jQuery选择到所有的链接或者一个特定的链接，然后应用attr()方法来获取它们的href属性的值。

$(‘a’).each(function(){

   alert($(this).attr(‘href’));

});

 

8—jquery中的detach()和remove()方法的区别

   都被用来移除一个dom元素，两者之间的主要不同在于detach()会保持对过去被解除元素的跟踪，因此可以取消解除；而remove()方法则会保持过去被移除对象的引用。

 

9—jQuery选择器

 

（1）基本选择器

 

Id选择器：$(“#mydiv”)  返回值为单个元素组成的集合 直接选取html中id为mydiv的元素

 

标签选择器：$(“div”)  返回值为集合元素  选择div元素

 

类选择器：$(“.mydiv”) 返回值为集合元素  选择类名为mydiv的元素/组

 

通配符选择器：$(“*”)  返回值为集合元素 匹配所有元素，多用于结合上下文来搜索

 

组合选择器： $(“div,span,p,.myclass,#mydiv”) 返回值为集合元素 将每一个选择匹配到的元素合并后一起返回，可以指定任意多个选择器，并将匹配到的元素合并到一个结果内

  

（2）层次选择器

 

祖先后代选择器：$(“form input”) 返回值为集合元素  在给定的祖先元素下匹配所有后代元素。

 

父子元素选择器：$(“form>input”) 返回值为集合元素  在给定的父元素下匹配所有子元素

 

相邻元素选择器：$(“div+input”)  返回值为集合元素   匹配所有紧邻着prev元素后的第一个next元素

 

兄弟元素选择器：$(“div~input”) 返回值为集合元素  匹配所有prev元素之后的所有sibling元素

 

（3）过滤选择器

主要通过特定的过滤规则筛选出所需的dom元素，该选择器以:开头

按照不同的过滤规则，过滤选择器可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤器。

 

基本过滤选择器：

:first  $（“tr:first”） 返回值为单个元素  匹配找到的第一个元素

:last   $(“tr:last”)   返回值为单个对象  匹配找到的最后一个元素

:not(selector)   $(“input:not(:checked)”)  返回值为集合元素  去除所有与给定选择器匹配的元素，即没有被选中的input元素

 

:even   $(“tr:even”)  返回值为集合元素   匹配所有索引值为偶数的元素，从0开始计数

 

:odd    $(“tr:odd”)   返回值为集合元素   匹配所有索引值为奇数的元素，从0开始计数

 

:eq(index)  $(“tr:eq(0)”)  返回值为集合元素  匹配一个给定索引值的元素 eq(0)是获取第一个tr元素，括号内的是索引值

 

:gt(index)  $(“tr:gt(0)”)  返回值为集合元素   匹配所有大于给定索引值的元素

 

:lt(index)  $(“tr:lt(2)”)  返回值为集合元素   匹配所有小于给定索引值的元素

 

:header   $(“:header”)  返回值为集合元素   匹配如h1，h2之类的标题元素

 

:animated  $(“:animated”) 返回值为集合元素 匹配所有正在执行动画效果的元素

 

内容过滤选择器：

主要体现在它所包含的子元素和文本内容上

 

:contains(text)   $(“div:contain(‘john’)”)  返回值为集合元素  匹配包含给定文本的元素，其作用是查找被标签围起来的文本内容是否符合指定的内容的

 

:empty  $(“:empty”)  返回值为集合元素  匹配所有不包含子元素或者文本的空元素

 

:has(selector)   $(“div:has(p)”)  返回值为集合元素  匹配含有选择器所匹配的元素的元素

 

:parent   $(“td:parent”)  返回值为集合元素  匹配含有子元素或者文本的元素

 

可见性过滤选择器：

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

:hidden  $(“:hidden”)  返回值为集合元素  匹配所有的不可见元素

 

:visible $(“tr:visible”) 返回值为集合元素  匹配所有的可见元素

 

属性过滤选择器

通过元素的属性来获取相应的元素

[attribute]  $(“div[id]”) 返回值为集合元素  匹配所有包含给定属性的元素，如选取所有带id属性的div标签

 

[attribute=value]  $(“input[name=’newsletter’]”) 返回值为集合元素 匹配给定的属性是某个特定值的元素

 

[attribute!=value] $(“div[title!=’test’]”) 返回值为集合元素 匹配所有不含有指定的属性或者属性不等于特定的元素

 

[attribute^=value] $(“input[name^=’news’]”)  返回值为集合元素 匹配给定的属性是以某些值开始的元素

 

[attribute$=value]  $(“input[name$=’lete’]”) 返回值为集合元素 匹配给定的属性是以某些值结尾的元素

 

[attribute*=value]  $(“input[name*=’name’]”) 返回值为集合元素 匹配给定的属性是以包含某些值的元素

 

[attributeSelector1][attributeSelector2][attributeSelector3]  $("input[id][name$=‘man‘]");返回值：集合元素。 复合属性选择器，需要同时满足多个条件时使用。

 

元素过滤选择器：

:nth-child(index) $(“ul li:nth-child(2)”) 返回值为集合元素 匹配其父元素下的第n个子元素，从1开始的

 

:first-child  $(“ul li:first-child”)  返回值为集合元素  匹配第一个子元素

 

:last-child    $(“ul li:last-child”)   返回值为集合元素 匹配最后一个子元素

 

:only-child    $(“ul li:only-child”)   返回值为集合元素  如果某个元素是父元素中唯一的子元素，将会被匹配到

 

表单对象属性过滤选择器：

:enabled   $(“input:enabled”) 返回值为集合元素 匹配所有可用的元素  查找所有input中不带disabled=”disabled”的input元素

 

:disabled  $(“input:disable”) 返回值为集合元素 匹配所有不可用的元素

 

:checked   $(“input:checked”) 返回值为集合元素 匹配所有被选中的元素

 

:selected  $(“select option:selected”) 返回值为集合元素  匹配所有选中的option元素

 

（4）表单选择器

:input $(“:input”)  返回值为集合元素 匹配所有input textarea select button 元素

 

:text  $(“:text”)  返回值为集合元素  匹配所有的单行文本框

 

:password  $(“:password”)  返回值为集合元素  匹配所有的密码框

 

:radio   $(“:radio”)  返回值为集合元素  匹配所有单选按钮

 

:checkbox  $(“:checkbox”)  返回值为集合元素  匹配所有复选框

 

:submit   $(“:submit”)  返回值为集合元素  匹配所有提交按钮

 

:image   $(“:image”)  返回值为集合元素  匹配所有的图像域

 

:rest  $(“:reset”)  返回值为集合元素  匹配所有重置按钮

 

:button  $(“:button”)  返回值为集合元素  匹配所有按钮

 

:file   $(“:file”)  返回值为集合元素  匹配所有文件域

 

:hidden  $(“:hidden”) 返回值为集合元素  匹配所有不可见的元素