JQuery基础

第一章:JQuery简介

1.简介

通过$(‘#imooc’)方法会得到一个$p的jQuery对象,$p是一个类数组对象。

这个对象里面包含了DOM对象的信息,然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。

通过标准的JavaScript操作DOM与jQuyer操作DOM的对比,我们不难发现:

  1. 通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。

  2. 通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。

普通处理,通过标准JavaScript处理:

1
2
3
var p = document.getElementById('imooc');
p.innerHTML = '您好!我是JS处理的p标签';
p.style.color = 'red';

jQuery的处理:

1
2
var $p = $('#imooc');
$p.html('您好!我是JQuery处理的p标签').css('color','red');

2. JQuery对象转换为DOM对象

1
2
3
4
var $div = $('div') //jQuery对象
var div = $div[0] //1.转化成DOM对象
var div = $div.get(0) //2.通过get()方法,转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

3.DOM对象转化成jQuery对象

1
2
3
4
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

4.JQuery选择器之层级选择器

img1

第二章:常用方法

1.获取元素

1
2
3
4
5
$(".className")							//通过class	匹配到的是有class名的所有标签,不管标签是否相同
$("#id") //通过id名
$("HTML标签名") //通过标签名
$("HTML标签名" ".className") //匹配class名的所有元素下的 HTML标签名的这个子元素.同$(".className").find("HTML标签名")
$(document.body) //获取body

2.$(document).ready()

JQery的入口

支持多个一起执行,谁在前面谁执行,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 $(document).ready(function() {

});

// 简洁写法:
$(function(){

})

//支持多个一起执行:
$(function(){
console.log('a');
})
$(function(){
console.log('b');
})
=>a
=>b

3. .addClass( )

给标签添加类名

可以在原有的class上再添加class 不会影响原有的class

  1. .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
  2. .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
1
2
3
4
1: 给div 再添加类名 father
<div class = "son"></div>
$('div').addClass("father");
=> <div class = "son father"></div>
1
2
3
4
5
6
7
8
2: 找到类名有 son 的div 给它再添加类名 father
<div class = "son"></div>
<div class = "son2"></div>
$('div').addClass(function(index,className){
if(className.indexOf('son')!=-1){ //找到类名包含son的这个元素
$(this).addClass('father') //this指匹配集合中当前的这个元素
}
})
1
2
3:	也可以同时添加多个类名
$('div').addClass('animated infinite bounce')

4. .removeClass( )

移除class

  1. .removeClass( className ) : 为每个匹配元素所要移除的一个或多个样式名
  2. .removeClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的将要移除的样式名
1
div.removeClass("father");

5. .css( )

获取元素的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1.传入俩个字符串参数,设置单个属性:
$(".father").css("background-color","red");
$('.father').css({"background-color":"red"});
2.传入一个对象,设置多个属性:
$('.father').css({
'font-size' :'15px',
'background-color' :"blue",
'border' :"1px solid red"
})
3.只传入一个字符串参数,获取第一个元素的属性样式的值:
console.log($('.son').css('width'));
=>100px
4.只传入一个数组,获取第一个元素的多个属性样式的值(返回值是一个对象):
console.log($('.son').css(['width','height']));
=>{width: "100px", height: "100px"}

.css( )样式属性优先级高于addClass( )

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.son{
width:100px;
height:100px;
background:red;
}
</style>
<div></div>

$('div').css('background','blue');
$('div').addClass('son');

=>蓝色div 因为css的优先级高于addCalss

注:

1
2
3
当一个数只被作为值(value)的时候, jQuery会将其转换为一个字符串,并添在字符串的结尾处添加px,
例如
.css({"width",50}) 与 .css("width","50px"})一样
1
2
'background-color' 	也可写成	'backgroundColor'
'font-size' 也可写成 'fontSize'
1
2
3
4
5
6
//合并设置,通过对象传设置多个样式
$('.father').css({
'font-size' :'15px',
'background-color' :"blue",
'border' :"1px solid red"
})

6. .prop( )

调整元素的属性

1
$("#target1").prop("disabled","true");

7. .html( )

添加HTML标签和文字到元素,而元素之前的内容都会被方法的内容所替换掉。

获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容,具体有3种用法:

  1. .html() 不传入值,就是获取集合中第一个匹配元素的HTML内容
  2. .html( htmlString ) 设置每一个匹配元素的html内容
  3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
1
$("#target4").html("<em>#target4</em>");			//将id为target4的标签内的内容替换为了强调体的#target4文字

**注:.html( )内部调用的是.innerHTML属性来处理,即针对的是整个HTML的内容(不仅仅是文本内容)

8. .remove( )

移除HTML元素

1
$("#target4").remove();								//将id为target4的这个标签彻底移除

9. .appendTo( )

将元素从一个标签移到另一个标签中

1
$("#target2").appendTo("#right-well");				//将id为target2的这个元素从它原来的地方移到id为right-well的元素中

10 .clone( )

拷贝元素

有参数true,若无参,只是单纯的克隆节点结构;若传参数true进去,把附带的事件和数据一并克隆了

1
$("#target5").clone().appendTo("#left-well");		//将id为target5的这个元素复制一份并添加到id为left-well的元素中

11. .parent( )

某个元素的父元素

参数,可选 target.parent() 匹配target集合中的所有元素的父元素

​ target.parent(“selected”) 匹配target集合中的所有元素的并满足selected要求的父元素

1
$("#target1").parent().css("background-color","red");				//匹配id为target1的父元素
1
$(".target1").parent(":last").css("background-color","red");		//匹配所有class名为target1的父级元素集合中的最后一个

注:与其很像的 .parents( ) 方法,匹配的是所有元素的祖辈元素,查找模式从里向外,包括body html document

12. .children( )

jQuery是一个合集对象,所以通过children是匹配合集中每一个元素的所有第一级子元素(即仅父子关系)

1
2
例1:
$("#right-well").children().css("color","orange"); //匹配id为right-well下的所有子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
2:
class名为father的3个div
<div class = "father">
<p>p标签</p>
</div>
<div class = "father">
<p>p标签</p>
</div>
<div class = "father">
<p>p标签</p>
<span>span标签</span>
</div>
$('father').children().css('color','red') //所有的p标签以及span标签都会被匹配改变颜色

children(.selected)内还可以传参

1
2
3
如例2中,若在最后一步的children()中加入参数

$('father').children(':last').css('color','red') //则只匹配到了所有集合中的最后一个元素,即只有span标签会变色

13. :nth-child(n)

某个元素的指定的子元素(n从1开始)

1
$(".target:nth-child(2)").addClass("animated bounce");	//类名为target的所有元素,他们的第二个子元素

14. :odd

获取元素中索引为奇数的所有元素

索引即为下标,下标从0开始

1
$(".target:odd").addClass("animated shake");

15. :even

获取元素中索引为偶数的所有元素

索引即为下标,下标从1开始

1
$(".target:even").addClass("animated shake");

16. :first

匹配第一个元素

1
$(".target:first").addClass("animated shake");

17. :last

匹配最后一个个元素

1
$(".target:last").addClass("animated shake");

18. :not( )

一个用来过滤的选择去,选择全部,除了( ) 里的元素

1
$(".target:not(:fitst)").addClass("animated shake");		//选择所有有target类名的元素除了第一个

19. :eq( )

语法: :eq( index ) 选择索引值为index 的元素,index 从0开始

1
$(".target:eq(2)").addClass("animated shake");				//类名为target的元素中的索引值为2的元素

20. :gt( )

语法: :gt( index ) 选择索引值大于index 的所有元素

1
$(".target:gt(2)").addClass("animated shake");

21. :lt( )

语法: :lt( index ) 选择索引值小于index 的所有元素

1
$(".target:lt(2)").addClass("animated shake");

22. :header

选择所有标题元素, 如h1 h2 h3 等

1
$(":header").css("color","red");

23. :lang( )

语法: :lang(language) 选择指定语言的所有元素

1
2
3
4
5
6
7
8
9
<div id="n1" lang="en">China(英语)</div>
<div id="n2" lang="EN-US">China(美式英语)</div>
<div id="n3" lang="zh-cn">中国(大陆中文)</div>
<div id="n4" lang="zh-tw">中國(台湾中文)</div>
<div id="n5" lang="fr">Chine(法语)</div>
<div id="n6" lang="ru">Китай(俄语)</div>

// 选择了id分别为n3、n4的两个元素
$(":lang(zh)");

24. :root

选择这个文档的根元素

25. :animated

选择所有在执行动画效果的元素

1
$(":animated");

26. :contains( )

选择所有包含指定文本的元素

1
$(".div:contains('我是div')").css("color", "#CD00CD");		//选择类名为div的所有包含文本内容为"我是div"的元素

27. :has( )

选择元素中至少包含指定选择器的元素

1
$(".div:has(span)")											//选择类名为div的所有包含span标签的元素

28. :parent

选择所有含有子元素或文本的元素

1
$("a:parent")											//选择所有内容不为空的a标签

29. :empty

选择所有没有子元素或文本的元素(与:parent相反);

1
$("a:empty")											//选择所有内容为空的a标签

30. :visible

选择所有显示的元素

1
$(":visible")

31. :hidden

选择所有隐藏的元素

1
:hidden选择器,不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素:

  1. CSS display的值是none。
  2. type=”hidden”的表单元素。
  3. 宽度和高度都显式设置为0。
  4. 一个祖先元素是隐藏的,该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0
1
2
3
如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度,是大于零。
元素的visibility: hidden 或 opacity: 0被认为是不可见的,因为他们仍然占用空间布局。

32. this

1
2
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。
1
2
3
4
5
$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})

33. val( )

.val()方法只针对表单元素

  1. .val()无参数,获取匹配的元素集合中第一个元素的当前值

  2. .val( value ),设置匹配的元素集合中每个元素的值

  3. .val( function ) ,一个用来返回设置值的函数

    注:

    1. 通过.val()处理select元素, 当没有选择项被选中,它返回null

    2. .val()方法多用来设置表单的字段的值

    3. 如果select元素有multiple(多选)属性,并且至少一个选择项被选中, .val()方法返回一个数组,这个数组包含每个选中选择项的值

      例1:对于无selected的下拉框,输出第一个

      1
      2
      3
      4
      5
      6
      <select id="single">   
      <option>你好</option>
      <option>王先生</option>
      </select>
      console.log($('#single').val()) 获取匹配的元素的集合中的第一个元素的当前值
      =>你好

      例2:对于多个selected,输出选择了的内容

      1
      2
      3
      4
      5
      6
      7
      <select id="multiple" multiple="multiple">
      <option selected="selected">王先生c</option>
      <option>你好</option>
      <option selected="selected">帅</option>
      </select>
      console.log($('#multiple').val())
      => 王先生,帅

    例3:用val( )修改文本内容

    1
    2
    3
    <input type = 'text' value = "我是为被修改的input">
    <script>
    $('input[type=text]').val('我是修改了的input'); //选择一个表单,修改value的值

34. toggleClass( )

toggleClass方法用于addClass( )和removeClass( )直接的切换

通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass

1
2
3
4
$("button").click(function(){
$("p").toggleClass("main");
});
//第一次点击按钮,给P标签添加class 再次点击移除class

35. hasClass( )

判断匹配的元素是否有指定的className

1
2
3
4
5
<div class = 'first'></div>
<div></div>

console.log($('div:first').hasClass('first')); //判断第一个div元素是否有first类名
=>true

36. offset( )

获取这个元素在当前文档的相对偏移。其中返回的对象包含两个属性,left和top。(这个值类似pageX和pageY)

第三章:属性筛选选择器

img2

在这么多属性选择器中[attr=”value”]和[attr*=”value”]是最实用的

1
2
3
4
5
[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作

比如说input[type="text"],input[type="checkbox"]等

[attr*="value"]能在网站中帮助我们匹配不同类型的文件

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//查找所有div中,属性name=p1的div元素
$('div[name=p1]').css("border", "3px groove red");

<div class="div" testattr="true" name='p1'>
<a>[att=val]</a>
</div>

//查找所有div中,有p2属性的div元素
$('div[p2]').css("border", "3px groove blue");

<div class="div" testattr="true" p2>
<a>[att]</a>
</div>

//查找所有div中,有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]').css("border", "3px groove #00FF00");

<div class="div" testattr="true" name="-">
<a>[att|=val]</a>
</div>

//查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素
$('div[name~="a"]').css("border", "3px groove #668B8B");

<div class="div" testattr="true" name="a b">
<a>[att~=val]</a>
</div>

//查找所有div中,属性name的值是用imooc开头的
$('div[name^=imooc]').css("border", "3px groove red");

<div class="div" testattr="true" name='imooc-aaorn'>
<a>[att^=val]</a>
</div>

//查找所有div中,属性name的值是用imooc结尾的
$('div[name$=immoc]').css("border", "3px groove blue");

<div class="div" testattr="true" name='aaorn-imooc'>
<a>[att$=val]</a>
</div>

//查找所有div中,有属性name中的值包含一个test字符串的div元素
$('div[name*="test"]').css("border", "3px groove #00FF00");

<div class="div" testattr="true" name="attr-test-selector">
<a>[att*=val]</a>
</div>

//查找所有div中,有属性testattr中的值没有包含"true"的div
$('div[testattr!="true"]').css("border", "3px groove #668B8B");

<div class="div" name="a b">
<a>[att!=val]</a>
</div>

第四章:子元素筛选选择器

1. :first-child

选择所有父级元素下的第一个子元素

1
2
$('.target:first-child')				//选择所有类名为target的元素  它们的第一个子元素
$('.target a:first-child') //选择所有类名为target的元素下的第一个a标签元素

:first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

2. :last-child

选择所有父级元素下的最后一个子元素

1
$('.target:last-child')				//选择所有类名为target的元素  它们的最后一个子元素

3. :only-child

如果某个元素是其父级元素下的唯一子元素,它就会被选中

4. :nth-child(n)

某个元素的指定的子元素(n从1开始) 从前往后计算

1
$(".target:nth-child(2)").addClass("animated bounce");	//选择类名为target的所有元素,他们的第二个子元素

5. :nth-last-child(n)

某个元素的指定的子元素(n从1开始) 从后往前计算

第五章:表单元素选择器

1.常用表单元素选择器

img3

注:除了input 选择器,每个表单选择器都对应一个input的type值

​ 如:

1
$(":password")		还可以表示为		$("[type=password]")

2.表单对象属性筛选

1. :enabled

选取可用的表单元素

1
2
//查找所有input所有可用的(未被禁用的元素)input元素。
$('input:enabled').css("border", "2px groove red");
2. :disabled

选取不可以的表单元素

1
2
//查找所有input所有不可用的(被禁用的元素)input元素。
$('input:disabled').css("border", "2px groove blue");
3. :checked

选取被选中的元素

//查找所有input所有勾选的元素(单选框,复选框)

 //移除input的checked属性
$('input:checked').removeAttr('checked')

注: 在某些浏览器中,选择器:checked可能会错误选取到元素

4. :selected

选取被选中的

1
2
3
//查找所有option元素中,有selected属性被选中的选项
//移除option的selected属性
$('input:selected').removeAttr('selected')

注:

  1. 选择器适用于复选框和单选框,对于下拉框元素, 使用 :selected 选择器

第六章: 获取设置元素属性

1. .attr( )
  1. attr(传入属性名):获取属性的值
  2. attr(属性名, 属性值):设置属性的值
  3. attr(属性名,函数值):设置属性的函数值
  4. attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
1
2
3
4
5
6
7
8
9
<a href = "www.baidu.com">百度一下</a>

//1.获取属性值
console.log($('a').attr('href'));
=>"www.baidu.com"

//2.设置属性的值
$('a').attr({'href':'www.goole.com','class':'A','innerHTML':'谷歌一下'})
=><a href = 'www.goole.com' class='A'>
2. .removeAttr( )

.removeAttr( 属性名) 为匹配到的元素集合中的每一个元素都移除一个属性

3. .attr()和prop()的区别

dom中有个概念的区分:Attribute和Property翻译出来都是“属性”,《js高级程序设计》书中翻译为“特性”和“属性”。简单理解,Attribute就是dom节点自带的属性.

如:

html中常用的id class title align 等用attr();

1
<div id='target' title='王先生'></div>

而Property是这个DOM元素作为对象,其附加的内容,例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等

4. .html( ) 和 .text( ) .val( )的区别

.text( )

得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。,具体有3种用法:

  1. .text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代

  2. .text( textString ) 用于设置匹配元素内容的文本

  3. .text( function(index, text) ) 用来返回设置文本内容的一个函数

    注:返回的是一个字符串,包含所有匹配到的元素的文本集合.

    .html与.text的异同:

  1. .html与.text的方法操作是一样,只是在具体针对处理对象不同
  2. .html处理的是元素内容,.text处理的是文本内容
  3. .html只能使用在HTML文档中,.text 在XML 和 HTML 文档中都能使用
  4. 如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的
  5. 火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了2个属性的支持,所以可以兼容所有浏览器
方法名 读取的内容 作用元素 使用在多个元素上时 能否使用回调函数
.html() 元素的html内容(包含html标签) 除了表单元素 只读取第一个元素
.text() 元素的的纯文本内容 除了表单元素 读取所有选中元素的文本内容
.val() 表单的value值 表单元素 第一个表单元素的value值

评论