文章目录
  1. 1. OverView
  2. 2. 什么是jQuery
    1. 2.1. 环境搭建
    2. 2.2. 初体验
    3. 2.3. jQuery对象与DOM对象
    4. 2.4. jQuery对象转化成DOM对象
    5. 2.5. DOM对象转化成jQuery对象
  3. 3. jQuery选择器
    1. 3.1. id选择器
    2. 3.2. 类选择器
    3. 3.3. 元素选择器
    4. 3.4. 全选择器(*选择器)
    5. 3.5. 层级选择器
    6. 3.6. 基本筛选选择器
    7. 3.7. 内容筛选选择器
    8. 3.8. 可见性筛选选择器
    9. 3.9. 属性筛选选择器
    10. 3.10. 子元素筛选选择器
    11. 3.11. 表单元素选择器
    12. 3.12. 表单对象属性筛选选择器
    13. 3.13. 特殊选择器this
    14. 3.14. 阶段测试

OverView

项目遇到了瓶颈,后台一直做不出来,iOS也不用干了,领导就让我去学一些前端的知识,去优化后台的界面吧,客户不满意。客户市政客啊,不敢打交道,界面也没有原型(真是见鬼了,走着做着),害的我的iOS也做不了什么,业务逻辑也比较复杂,有点像阿里巴巴,又不全是,于是乎我开始我的web学习之路了。
了解到jQuery是对js的封装,先看了一下js的基础知识(改天在总结,看的比较快)有个小伙伴和我差不多时期一起学的,可以看看她的js文章客官要来几个简单的javascript方法不,不多说了开始我们的干货。
再啰嗦一句,jQuery的对象都是数组

什么是jQuery

jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 标签内中,通过 script 标签引入 jQuery 库即可。
注意 jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6、7、8浏览器,这样做的目的是为了兼容移动端开发。由于减少了一些代码,使得该版本比 jQuery 1.x 更小、更快。

环境搭建

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<title>环境搭建</title>
</head>
<body>
<script type="text/javascript"> alert($) </script>
</body>
</html>

初体验

jQuery.html();函数,用途相当于获取或设置DOM对象的innerHTML属性

1
2
3
4
5
6
<script type="text/javascript">
$(document).ready(function() {
$("div").html("您好!通过慕课网学习jQuery才是最佳的途径。");
});
document.write("--------------");
</script>

效果图:

代码分析:

  • $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用

jQuery对象与DOM对象

jQuery对象与DOM对象是不一样的

对比:
js

1
2
3
var p = document.getElementById('imooc');
p.innerHTML = '您好!通过慕课网学习jQuery才是最佳的途径';
p.style.color = 'red';

jQuery

1
2
var $p = $('#imooc');
$p.html('您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');

学过面对对象编程的都知道有点像点语法,但是并不仅限于此

优点:

  • 通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。
  • 通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。

jQuery对象转化成DOM对象

jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

HTML代码

1
2
3
4

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

1
2
3
4

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

DOM对象转化成jQuery对象

如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

HTML代码

1
2
3
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

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

jQuery选择器

id选择器

id选择器:一个用来查找的ID,即元素的id属性

1
2

$( "#id" )

类选择器

1
2

$( ".class" )

eg:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
//通过原生方法处理
//样式是可以多选的,所以得到的是一个合集
//需要通过循环给合集中每一个元素修改样式
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
</script>
1
2
3
4
5
6
7

<script type="text/javascript">
//通过jQuery直接传入class
var $sb=$(".imooc")
//class选择器可以选择多个元素
$sb.css("border", "3px solid red");
</script>

元素选择器

元素选择器:根据给定(html)标记名称选择所有的元素

1
2

$( "element" )

eg:

1
2
3
4
5

//通过jQuery直接传入标签名p
var $sb=$("p")
//标签是可以多个的,所以得到的同样也是一个合集
$sb.css("border", "3px solid red");

全选择器(*选择器)

在CSS中,经常会在第一行写下这样一段样式

1
2

{padding: 0; margin: 0;}
  • 通配符意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递选择器来选中文档页面中的元素
1
2

$( "*" )
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
//获取页面中所有的元素
var elements1 = document.getElementsByTagName('*');
</script>
<script type="text/javascript">
//获取页面中所有的元素
var elements2 = $("*") ;
//原生与jQuery方法比较
//===表示数据和类型都相等
if(elements2.length === elements1.length){
elements2.css("border","1px solid red");
}
</script>

层级选择器

选择器中的层级选择器就是用来处理这种关系

子元素 后代元素 兄弟元素 相邻元素

相似与不同

  • 层级选择器都有一个参考节点
  • 后代选择器包含子选择器的选择的内容
  • 一般兄弟选择器包含相邻兄弟选择的内容
  • 相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下
1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
//相邻兄弟选择器
//选取prev后面的第一个的div兄弟节点
$(".prev + div").css("border", "3px groove blue");
</script>

<script type="text/javascript">
//一般相邻选择器
//选取prev后面的所有的div兄弟节点
$(".prev ~ div").css("border", "3px groove blue");
</script>

基本筛选选择器

注意事项:

  • :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意jQuery合集都是从0开始索引
  • gt是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始
1
2
3
4
5
6
<!--【eq=equal,等于的意思】-->
<!--$(":even"):选择索引值为偶数的元素,从0开始计数。【even偶数】-->
<!--$(":odd"):选择索引值为奇数的元素,从0开始计数。【odd奇数】-->
<!--$(":gt(index)"):选择匹配集合中,所有大于给定index(索引值)的元素。【gt=greater than(意思是大于)】-->

<!--$(":lt(index)"):选择匹配集合中,所有小于等于给定index(索引值)的元素。【less than(意思是小于)】-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type="text/javascript">
//:eq
//选择单个
$(".aaron:eq(2)").css("border", "3px groove blue");
</script>

<script type="text/javascript">
//:gt 选择匹配集合中所有索引值大于给定index参数的元素

$(".aaron:gt(3)").css("border", "3px groove red");
</script>

<script type="text/javascript">
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(3)").css("color", "#CD00CD");
</script>
1
2
3
4
5
<script type="text/javascript">
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色
$("input:not(:checked) + p").css("background-color", "#CD00CD");
</script>

内容筛选选择器

注意事项:

  • contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素
  • 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。
  • parent与:empty是相反的,两者所涉及的子元素,包括文本节点
1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
//选择所有包含子元素或者文本的a元素
//增加一个蓝色的边框
$("a:parent").css("border", "3px groove blue");
</script>

<script type="text/javascript">
//找到a元素下面的所有空节点(没有子元素)
//增加一段文本与边框
$("a:empty").text(":empty").css("border", "3px groove red");
</script>

可见性筛选选择器

元素有显示状态与隐藏状态,jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden

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

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

  • CSS display的值是none。
  • type=”hidden”的表单元素。
  • 宽度和高度都显式设置为0。
  • 一个祖先元素是隐藏的,该元素是不会在页面上显示
  • CSS visibility的值是hidden
  • CSS opacity的指是0

理解:如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度,是大于零。元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局。

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

<script type="text/javascript">
//查找id = div1的DOM元素,是否可见
show( $('#div1:visible') );
</script>

<script type="text/javascript">
//查找id = div2的DOM元素,是否可见
show( $('#div2:visible') );
</script>

<script type="text/javascript">
//查找id = div3的DOM元素,是否可见
show( $('#div3:visible') );
</script>

<script type="text/javascript">
//查找id = div1的DOM元素,是否隐藏
show( $('#div1:hidden') );
</script>

<script type="text/javascript">
//查找id = div2的DOM元素,是否隐藏
show( $('#div2:hidden') );
</script>

<script type="text/javascript">
//查找id = div3的DOM元素,是否隐藏
show( $('#div3:hidden') );
</script>

属性筛选选择器

属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素,这就是属性选择器展示它们的威力的地方。

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

[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

<script type="text/javascript">
//查找所有div中,属性name=p1的div元素
$('div[name=p1]').css("border", "3px groove red");
</script>

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

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

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

子元素筛选选择器

注意事项:

  • :first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
  • :last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素
    如果子元素只有一个的话,:first-child与:last-child是同一个
  • :only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配
  • jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的
  • nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
//查找所有class="first-div"下的a元素,只取第一个
//针对所有父级下的第一个
$('.first-div a:first-child').css("color", "#CD00CD");
</script>

<script type="text/javascript">
//查找所有class="first-div"下的a元素,只取最后一个
//针对所有父级下的最后一个
//如果只有一个元素的话,last也是第一个元素
$('.first-div a:last-child').css("color", "red");
</script>

<script type="text/javascript">
//查找所有class="first-div"下的a元素,如果只有一个子元素的情况
$('.first-div a:only-child').css("color", "blue");
</script>

表单元素选择器

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

script type="text/javascript">
//查找所有 input, textarea, select 和 button 元素
//:input 选择器基本上选择所有表单控件
$(':input').css("border", "1px groove red");
</script>

<script type="text/javascript">
//匹配所有input元素中类型为text的input元素
$('input:text').css("background", "#A2CD5A");
</script>

<script type="text/javascript">
//匹配所有input元素中类型为password的input元素
$('input:password').css("background", "yellow");
</script>

<script type="text/javascript">
//匹配所有input元素中的单选按钮,并选中
$('input:radio').attr('checked','true');
</script>

<script type="text/javascript">
//匹配所有input元素中的复选按钮,并选中
$('input:checkbox').attr('checked','true');
</script>

<script type="text/javascript">
//匹配所有input元素中的提交的按钮,修改背景颜色
$('input:submit').css("background", "#C6E2FF");
</script>

<script type="text/javascript">
//匹配所有input元素中的图像类型的元素,修改背景颜色
$('input:image').css("background", "#F4A460");
</script>

<script type="text/javascript">
//匹配所有input元素中类型为按钮的元素
$('input:button').css("background", "red");
</script>

<script type="text/javascript">
//匹配所有input元素中类型为file的元素
$('input:file').css("background", "#CD1076");
</script>

表单对象属性筛选选择器

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
//查找所有input所有可用的(未被禁用的元素)input元素。
$('input:enabled').css("border", "2px groove red");
</script>

<script type="text/javascript">
//查找所有input所有不可用的(被禁用的元素)input元素。
$('input:disabled').css("border", "2px groove blue");
</script>
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
//查找所有input所有勾选的元素(单选框,复选框)
//删除这个勾选的元素
$('input:checked').removeAttr('checked')
</script>

<script type="text/javascript">
//查找所有option元素中,有selected属性被选中的选项
//删除这个选中的元素
$('option:selected').removeAttr('selected')
</script>

特殊选择器this

this是JavaScript中的关键字,指的是当前的上下文对象,简单的说就是方法/属性的所有者

1
2
3
4
5
6
7
8
var imooc = {
name:"慕课网",
getName:function(){
//this,就是imooc对象
return this.name;
}
}
imooc.getName(); //慕课网

当然在JavaScript中this是动态的,也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)

同样的在DOM中this就是指向了这个html元素对象,因为this就是DOM元素本身的一个引用

1
2
3
4
5
6
p.addEventListener('click',function(){
//this === p
//以下两者的修改都是等价的
this.style.color = "red";
p.style.color = "red";
},false);

通过addEventListener绑定的事件回调中,this指向的是当前的dom对象,所以再次修改这样对象的样式,只需要通过this获取到引用即可

把this加工成jQuery对象

1
2
3
4
5
$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})

通过把$()方法传入当前的元素对象的引用this,把这个this加工成jQuery对象,我们就可以用jQuery提供的快捷方法直接处理样式了

总结:

  • this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
  • $(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
var p1 = document.getElementById('test1')
p1.addEventListener('click',function(){
//直接通过dom的方法改变颜色
this.style.color = "red";
},false);
</script>

<script type="text/javascript">
$('#test2').click(function(){
//通过包装成jQuery对象改变颜色
$(this).css('color','blue');
})
</script>

阶段测试

学完了选择器,去测试吧传送门

文章目录
  1. 1. OverView
  2. 2. 什么是jQuery
    1. 2.1. 环境搭建
    2. 2.2. 初体验
    3. 2.3. jQuery对象与DOM对象
    4. 2.4. jQuery对象转化成DOM对象
    5. 2.5. DOM对象转化成jQuery对象
  3. 3. jQuery选择器
    1. 3.1. id选择器
    2. 3.2. 类选择器
    3. 3.3. 元素选择器
    4. 3.4. 全选择器(*选择器)
    5. 3.5. 层级选择器
    6. 3.6. 基本筛选选择器
    7. 3.7. 内容筛选选择器
    8. 3.8. 可见性筛选选择器
    9. 3.9. 属性筛选选择器
    10. 3.10. 子元素筛选选择器
    11. 3.11. 表单元素选择器
    12. 3.12. 表单对象属性筛选选择器
    13. 3.13. 特殊选择器this
    14. 3.14. 阶段测试