您的位置：首页 > Web前端 > JQuery

前端基础快速学习- JQuery

2017-03-28 00:00 609 查看
前面学习了原生的DOM，现在看看如何使用jQuery。JQuery建议使用1.12的版本，这样对旧版本的IE兼容性比较好。

例1.添加，删除class

<scriptsrc='jquery-1.12.4.js></script>调用jquery

相对于Dom的document.getElementbyID('i1'),JQuery直接使用$('#i1')；

addclass（‘hide’）直接给找到的标签添加一个样式class，无需使用classlist了

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
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<style>
.hide{
display:none;
}
</style>
</head>
<body>
<inputtype="button"value="hide"onclick="hides();"/>
<divid="i1">
<divclass="item"></div>
<divclass="item">
<divclass="c1">123</div>
<a>百度</a>
</div>
<divclass="item"></div>
</div>
<divid="i2"></div>
<scriptsrc="jquery-1.12.4.js"></script
3ff0
>
<script>
flag=true;
functionhides(){
if(flag==true){
$('#i1').addClass('hide');
console.log(flag)
flag=false;
}else{
$('#i1').removeClass('hide');
console.log(flag)
flag=true;
}
}
</script>
</body>
</html>
点击hide按钮切换隐藏效果





例2隐藏菜单

注意事项：

showmenu（this），这里$(this)就表示事件发生的jquery对象，然后可以通过parent和sibling来寻找其他标签

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<style>
.hide{
display:none;
}
.menu{
width:200px;
height:600px;
border:1pxsolid#dddddd;
overflow:auto;
}
.menu.item.title{
height:40px;
line-height:40px;
background-color:#2459a2;
color:white;
}
</style>
</head>
<body>
<divclass="menu">
<divclass="item">
<divclass="title"onclick="ShowMenu(this);">菜单一</div>
<divclass="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<divclass="item">
<divclass="title"onclick="ShowMenu(this);">菜单二</div>
<divclass="bodyhide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<divclass="item">
<divclass="title"onclick="ShowMenu(this);">菜单三</div>
<divclass="bodyhide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<scriptsrc="jquery-1.12.4.js"></script>
<script>
functionShowMenu(ths){
//console.log(ths);//Dom中的标签对象
//$(ths)//Dom标签对象转换成jQuery标签对象（便利）
//$(ths)[0]//jQuery标签对象转换成Dom标签对象
$(ths).next().removeClass('hide');
$(ths).parent().siblings().find('.body').addClass('hide');
}
</script>
</body>
</html>
例3.复制，删除文本框

clone（）克隆标签

find（）查找标签

attr（）添加一个事件

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
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>
<aonclick="Add(this);">+</a>
<inputtype="text"/>
</p>
</div>
<scriptsrc3ff0
>="jquery-1.12.4.js"></script>
<script>
functionAdd(ths){
varp=$(ths).parent().clone();
p.find('a').text('-');
p.find('a').attr('onclick','Remove(this);');
$(ths).parent().parent().append(p);
}
functionRemove(ths){
$(ths).parent().remove();
}
</script>
</body>
</html>
效果：点击+自动复制一行，点击-删除自己所在





例4.绑定事件-例2的升级版

例2里面我们需要给每个标签都手动的添加onclick事件，如果可以统一绑定事件，会省事很多。有两种方式，如下所示;

$(function){

....

}里面执行的...会在文档树加载之后自动执行，不会等待所有的图片内容的加载


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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<style>
.hide{
display:none;
}
.menu{
width:200px;
height:600px;
border:1pxsolid#dddddd;
overflow:auto;
}
.menu.item.title{
height:40px;
line-height:40px;
background-color:#2459a2;
color:white;
}
</style>
</head>
<body>
<divclass="menu">
<divclass="item">
<divclass="title">菜单一</div>
<divclass="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<divclass="item">
<divclass="title">菜单二</div>
<divclass="bodyhide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<divclass="item">
<divclass="title">菜单三</div>
<divclass="bodyhide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<scriptsrc="jquery-1.12.4.js"></script>
<script>
//方法一
//$(function(){
////当文档树加载完毕后，自动执行
//$('.item.title').click(function(){
////this,$(this)
//$(this).next().removeClass('hide');
//$(this).parent().siblings().find('.body').addClass('hide');
//});
//});


//方法二
$('.item.title').bind('focus',function(){
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
})

</script>
</body>
</html>
例5延迟绑定

比如通过JavaScript创建的新标签，如何让他自动绑定事件？可以通过delegate实现

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
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<inputtype="button"onclick="Add();"/>
<ul>
&l 7fe8 t;li>123</li>
<li>456</li>
<li>789</li>
</ul>
<scriptsrc="jquery-1.12.4.js"></script>
<script>
$(function(){
/*
$('li').click(function(){
alert($(this).text());
});
*/
$("ul").delegate("li","click",function(){
alert($(this).text());
});
});
functionAdd(){
vartag=document.createElement('li');
tag.innerText='666';
$('ul').append(tag);
}
</script>
</body>
</html>




登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信，还有更多惊喜哦~



本文出自“麻婆豆腐”博客，请务必保留此出处http://beanxyz.blog.51cto.com/5570417/1893396
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航