C语言基础学习PYTHON——基础学习D17
20181014内容纲要：
1、jQuery介绍
2、jQuery功能介绍
（1）jQuery的引入方式
（2）选择器
（3）筛选
（4）文本操作
（5）样式操作
（6）属性操作
（7）文本处理
（8）css处理
（9）位置
（10）事件
（11）jQuery扩展
3、实例展示
4、小结
5、推荐
1 jQuery介绍
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
官方网站列出了下列支持jQuery的浏览器：
FirefoX 2．0+
Internet Explorer 6+
Safari 3+
Opera 10．6+
Chrome 8+
2 jQuery功能介绍
（1）jQuery的引入方式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <!--css的两种引入方式-->
7 <link rel="stylesheet" href="csswenjian">
8 <style>
9
10 </style>
11
12 </head>
13 <body>
14 <div id="i1">123</div>
15
16 <!--jQuery的两种引入方式-->
17 <script src="jquery-1.12.4.js"></script>
18 <script>
19 $("#i1")
20 </script>
21 </body>
22 </html>
js的两种引入方式
（2）选择器
1. id
$(‘#id‘)
2. class
<div class=‘c1‘></div>
$(".c1")
3. 标签
<div id=‘i10‘ class=‘c1‘>
<a>f</a>
<a>f</a>
</div>
<div class=‘c1‘>
<a>f</a>
</div>
<div class=‘c1‘>
<div class=‘c2‘> </div>
</div>
$(‘a‘)
4. 组合a
<div id=‘i10‘ class=‘c1‘>
<a>f</a>
<a>f</a>
</div>
<div class=‘c1‘>
<a>f</a>
</div>
<div class=‘c1‘>
<div class=‘c2‘> </div>
</div>
$(‘a‘)
$(‘.c2‘)
$(‘a,.c2,#i10‘)
5. 层级
$(‘#i10 a‘) 子子孙孙
$(‘#i10>a‘) 儿子
6. 基本
:first
:last
:eq()
7. 属性
$(‘[alex]‘) 具有alex属性的所有标签
$(‘[alex="123"]‘) alex属性等于123的标签
<input type=‘text‘/>
<input type=‘text‘/>
<input type=‘file‘/>
<input type=‘password‘/>
$("input[type=‘text‘]")
$(‘:text‘)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <input type="button" value="全选" onclick="checkAll();">
10 <input type="button" value="反选" onclick="reverseAll();">
11 <input type="button" value="取消" onclick="cancelAll();">
12 <table border="1">
13 <thead>
14 <tr>
15 <th>选项</th>
16 <th>IP</th>
17 <th>端口</th>
18 </tr>
19 </thead>
20 <tbody class="tb">
21 <tr>
22 <td><input type="checkbox" /></td>
23 <td>1.1.1.1</td>
24 <td>80</td>
25
26 </tr>
27 <tr>
28 <td><input type="checkbox" /></td>
29 <td>1.1.1.1</td>
30 <td>80</td>
31
32 </tr>
33 <tr>
34 <td><input type="checkbox" /></td>
35 <td>1.1.1.1</td>
36 <td>80</td>
37
38 </tr>
39 <tr>
40 <td><input type="checkbox" /></td>
41 <td>1.1.1.1</td>
42 <td>80</td>
43
44 </tr>
45 <tr>
46 <td><input type="checkbox" /></td>
47 <td>1.1.1.1</td>
48 <td>80</td>
49 </tr>
50 </tbody>
51 </table>
52
53 <script src="jquery-1.11.3.js"></script>
54 <script>
55 function checkAll() {
56 $(":checkbox").prop(‘checked‘,true);
57 }
58 function cancelAll() {
59 $(‘:checkbox‘).prop(‘checked‘,false);
60 }
61 function reverseAll() {
62 $(":checkbox").each(function (k) {
63 //this 代指当前循环的每一个元素
64 //console.log(k,this)
65 //这是通过Dom实现的反选
66 /*if(this.checked){
67 this.checked = false;
68 }
69 else{
70 this.checked = true;
71 }*/
72 //这是jquery实现的反选
73 /*if($(this).prop(‘checked‘)){
74 $(this).prop(‘checked‘,false);
75 }else {
76 $(this).prop(‘checked‘,true);
77 }*/
78 //三元运算
79 var v = $(this).prop("checked")?false:true;
80 $(this).prop("checked",v)
81 })
82 }
83 </script>
84 </body>
85 </html>
实例（全选取消反选）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .header{
8 background-color: black;
9 color: wheat;
10 }
11 .content{
12 min-height: 50px;
13 }
14 .hide{
15 display: none;
16 }
17 </style>
18 </head>
19 <body>
20 <div style="height: 400px;width: 200px;border: 1px solid #dddddd">
21 <div class="item">
22 <div class="header">标题1</div>
23 <div class="content">内容1</div>
24 </div>
25 <div class="item">
26 <div class="header">标题2</div>
27 <div class="content hide">内容2</div>
28 </div>
29 <div class="item">
30 <div class="header">标题3</div>
31 <div class="content hide">内容3</div>
32 </div>
33 </div>
34 <script src="jquery-1.12.4.js"></script>
35 <script>
36 $(".header").click(function () {
37 //console.log(this);
38 //获取当前标签 $(this)
39 //获取某个标签的下一个标签
40 //获取某个标签的父标签
41 //获取所有的兄弟标签
42 //添加、移除样式
43
44 //链式编程
45 //$(this).next().removeClass(‘hide‘);
46 //$(this).parent().siblings().find(‘.content‘).addClass(‘hide‘);
47 $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘);
48 })
49 </script>
50 </body>
51 </html>
实例（展开折叠）
（3）筛选
筛选
$(‘#i1‘).next()
$(‘#i1‘).nextAll()
$(‘#i1‘).nextUntil(‘#ii1‘)
<div>
<a>asdf</a>
<a>asdf</a>
<a id=‘i1‘>asdf</a>
<a>asdf</a>
<a id=‘ii1‘>asdf</a>
<a>asdf</a>
</div>
$(‘#i1‘).prev()
$(‘#i1‘).prevAll()
$(‘#i1‘).prevUntil(‘#ii1‘)
$(‘#i1‘).parent()
$(‘#i1‘).parents()
$(‘#i1‘).parentsUntil()
$(‘#i1‘).children()
$(‘#i1‘).siblings()
$(‘#i1‘).find()
$(‘li:eq(1)‘)
$(‘li‘).eq(1)
first()
last()
hasClass(class)
（4）文本操作
文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html()
$(..).html("<a>1</a>")
$(..).val()
$(..).val(..)
（5）样式操作
样式操作：
addClass
removeClass
toggleClass
（6）属性操作
属性操作：
# 专门用于做自定义属性
$(..).attr(‘n‘)
$(..).attr(‘n‘,‘v‘)
$(..).removeAttr(‘n‘)
<input type=‘checkbox‘ id=‘i1‘ />
# 专门用于chekbox,radio
$(..).prop(‘checked‘)
$(..).prop(‘checked‘, true)
PS:
index 获取索引位置
（7）文本处理
文档处理：
append
prepend
after
before
remove
empty
clone
（8）css处理
css处理
$(‘t1‘).css(‘样式名称‘, ‘样式值‘)
点赞：
- $(‘t1‘).append()
- $(‘t1‘).remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
（9）位置
位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
position() 指定标签相对父标签(relative)标签的坐标
<div style=‘relative‘>
<div>
<div id=‘i1‘ style=‘position:absolute;height:80px;border:1px‘></div>
</div>
</div>
$(‘i1‘).height() # 获取标签的高度 纯高度
$(‘i1‘).innerHeight() # 获取边框 + 纯高度 + ？
$(‘i1‘).outerHeight() # 获取边框 + 纯高度 + ？
$(‘i1‘).outerHeight(true) # 获取边框 + 纯高度 + ？
# 纯高度，边框，外边距，内边距
（10）事件
DOM： 三种绑定方式
jQuery：
$(‘.c1‘).click()
$(‘.c1‘).....
$(‘.c1‘).bind(‘click‘,function(){
})
$(‘.c1‘).unbind(‘click‘,function(){
})
*******************
$(‘.c‘).delegate(‘a‘, ‘click‘, function(){
})
$(‘.c‘).undelegate(‘a‘, ‘click‘, function(){
})
$(‘.c1‘).on(‘click‘, function(){
})
$(‘.c1‘).off(‘click‘, function(){
})
阻止事件发生
return false
# 当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
（11）jQuery扩展
jQuery扩展：
- $.extend $.方法
- $.fn.extend $(..).方法
(function(){
var status = 1;
// 封装变量
})(jQuery)
3 实例展示
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .hide{
8 display: none;
9 }
10 .model{
11 position: fixed;
12 top: 50%;
13 left: 50%;
14 width: 500px;
15 height: 400px;
16 margin-left: -250px;
17 margin-top: -250px;
18 background-color: #eeeeee;
19 z-index: 10;
20 }
21 .shadow{
22 position: fixed;
23 top: 0;
24 left: 0;
25 right: 0;
26 bottom: 0;
27 opacity: 0.6;
28 background-color: black;
29 z-index: 9;
30 }
31 </style>
32 </head>
33 <body>
34 <a onclick="addElement();">添加</a>
35 <table border="1" class="tb">
36
37 <div class="model hide">
38 <div>
39 <input name="hostname" type="text"/>
40 <input name="port" type="text"/>
41 </div>
42 <div>
43 <input type="button" value="取消" onclick="cancelModel();"/>
44 <input type="button" value="确定" onclick="confirmModel();"/>
45 </div>
46 </div>
47 <div class="shadow hide"></div>
48
49 <tr>
50 <td>1.1.1.1</td>
51 <td>80</td>
52 <td>
53 <a class="edit">编辑</a> | <a class="del">删除</a>
54 </td>
55 </tr>
56 <tr>
57 <td>1.1.1.2</td>
58 <td>80</td>
59 <td>
60 <a class="edit">编辑</a> | <a class="del">删除</a>
61 </td>
62 </tr>
63 <tr>
64 <td>1.1.1.3</td>
65 <td>80</td>
66 <td>
67 <a class="edit">编辑</a> | <a class="del">删除</a>
68 </td>
69 </tr>
70 <tr>
71 <td>1.1.1.4</td>
72 <td>80</td>
73 <td>
74 <a class="edit">编辑</a> | <a class="del">删除</a>
75 </td>
76 </tr>
77 </table>
78 <script src="jquery-1.12.4.js"></script>
79 <script>
80 function addElement() {
81 // $(".model").removeClass(‘hide‘);
82 // $(".shadow").removeClass(‘hide‘);
83 $(".model,.shadow").removeClass(‘hide‘);
84 }
85 function cancelModel() {
86 $(".model,.shadow").addClass(‘hide‘);
87 $(‘.model input[type="text"]‘).val(‘‘);
88 }
89 function confirmModel() {
90 var trs = [];
91 $(‘.nodel input[type="text"]‘).each(function () {
92 var td = document.createElement(‘td‘);
93 td.innerHTML = "用户输入的值"；
94
95 })
96 }
97 $(‘.edit‘).click(function () {
98 $(".model,.shadow").removeClass(‘hide‘);
99 var tds = $(this).parent().prevAll();
100 //console.log(tds[0]);
101 //console.log(tds[1]);
102 var port = $(tds[0]).text();
103 var host = $(tds[1]).text();
104 $(‘.model input[name="hostname"]‘).val(host);
105 $(‘.model input[name="port"]‘).val(port);
106 })
107 $(‘.del‘).click(function () {
108 $(this).parent().parent().remove();
109 })
110 </script>
111
112 </body>
113 </html>
模态框1
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .hide{
8 display: none;
9 }
10 </style>
11 </head>
12 <body>
13 <input id="i1" type="button" value="开关"/>
14 <div class="c1 hide">我爱学习</div>
15
16 <script src="jquery-1.12.4.js"></script>
17 <script>
18 $(‘#i1‘).click(function () {
19 // if($(‘.c1‘).hasClass(‘hide‘)){
20 // $(‘.c1‘).removeClass(‘hide‘);
21 // }else {
22 // $(‘.c1‘).addClass(‘hide‘);
23 // }
24 //jquery也提供了实现这样功能的函数
25 $(‘.c1‘).toggleClass(‘hide‘);
26 })
27 </script>
28 </body>
29 </html>
开关功能
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .hide{
8 display: none;
9 }
10 .model{
11 position: fixed;
12 top: 50%;
13 left: 50%;
14 width: 500px;
15 height: 400px;
16 margin-left: -250px;
17 margin-top: -250px;
18 background-color: #eeeeee;
19 z-index: 10;
20 }
21 .shadow{
22 position: fixed;
23 top: 0;
24 left: 0;
25 right: 0;
26 bottom: 0;
27 opacity: 0.6;
28 background-color: black;
29 z-index: 9;
30 }
31 </style>
32 </head>
33 <body>
34 <a onclick="addElement();">添加</a>
35 <table border="1">
36
37 <div class="model hide">
38 <div>
39 <input name="hostname" type="text"/>
40 <input name="port" type="text"/>
41 </div>
42 <div>
43 <input type="button" value="取消" onclick="cancelModel();"/>
44 </div>
45 </div>
46 <div class="shadow hide"></div>
47
48 <tr>
49 <td target="hostname">1.1.1.1</td>
50 <td target="port">80</td>
51 <td>
52 <a class="edit">编辑</a> | <a>删除</a>
53 </td>
54 </tr>
55 <tr>
56 <td target="hostname">1.1.1.1</td>
57 <td target="port">80</td>
58 <td>
59 <a class="edit">编辑</a> | <a>删除</a>
60 </td>
61 </tr>
62 <tr>
63 <td target="hostname">1.1.1.1</td>
64 <td target="port">80</td>
65 <td>
66 <a class="edit">编辑</a> | <a>删除</a>
67 </td>
68 </tr>
69 <tr>
70 <td target="hostname">1.1.1.1</td>
71 <td target="port">80</td>
72 <td>
73 <a class="edit">编辑</a> | <a>删除</a>
74 </td>
75 </tr>
76 </table>
77 <script src="jquery-1.12.4.js"></script>
78 <script>
79 function addElement() {
80 // $(".model").removeClass(‘hide‘);
81 // $(".shadow").removeClass(‘hide‘);
82 $(".model,.shadow").removeClass(‘hide‘);
83 }
84 function cancelModel() {
85 $(".model,.shadow").addClass(‘hide‘);
86 $(‘.model input[type="text"]‘).val(‘‘);
87 }
88 $(‘.edit‘).click(function () {
89 $(".model,.shadow").removeClass(‘hide‘);
90 var tds = $(this).parent().prevAll();
91 tds.each(function () {
92 //this 代指每个td
93 //获取td的属性值
94 var n = $(this).attr(‘target‘);
95 //获取td中的内容
96 var text = $(this).text();
97 var a1 = ‘.model input[name="‘;
98 var a2 = ‘"]‘;
99 var temp = a1 + n + a2;
100 $(temp).val(text);
101 })
102 //console.log(tds[0]);
103 //console.log(tds[1]);
104 // var port = $(tds[0]).text();
105 // var host = $(tds[1]).text();
106 // $(‘.model input[name="hostname"]‘).val(host);
107 // $(‘.model input[name="port"]‘).val(port);
108 })
109 </script>
110
111 </body>
112 </html>
模态框2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .hide{
8 display: none;
9 }
10 .menu{
11 height: 38px;
12 background-color: #eeeeee;
13 line-height: 38px;
14 }
15 .active{
16 background-color: brown;
17 }
18 .menu-item{
19 float: left;
20 border: 1px solid red;
21 padding: 0 5px;
22 cursor: pointer;
23 }
24 .content{
25 min-height: 100px;
26 border: 1px solid #eeeeee;
27 }
28 </style>
29 </head>
30 <body>
31 <div style="width: 700px;margin: 0 auto">
32 <div class="menu">
33 <div class="menu-item active" a="1">菜单一</div>
34 <div class="menu-item" a="2">菜单二</div>
35 <div class="menu-item" a="3">菜单三</div>
36 </div>
37 <div class="content">
38 <div b="1">内容一</div>
39 <div class="hide" b="2">内容二</div>
40 <div class="hide" b="3">内容三</div>
41 </div>
42 </div>
43 <script src="jquery-1.12.4.js"></script>
44 <script>
45 $(‘.menu-item‘).click(function () {
46 $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
47 var target = $(this).attr(‘a‘);
48 $(‘.content‘).children("[b=‘" + target + "‘]").removeClass(‘hide‘).siblings().addClass(‘hide‘);
49 })
50 </script>
51 </body>
52 </html>
页面切换
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .hide{
8 display: none;
9 }
10 .menu{
11 height: 38px;
12 background-color: #eeeeee;
13 line-height: 38px;
14 }
15 .active{
16 background-color: brown;
17 }
18 .menu-item{
19 float: left;
20 border: 1px solid red;
21 padding: 0 5px;
22 cursor: pointer;
23 }
24 .content{
25 min-height: 100px;
26 border: 1px solid #eeeeee;
27 }
28 </style>
29 </head>
30 <body>
31 <div style="width: 700px;margin: 0 auto">
32 <div class="menu">
33 <div class="menu-item active">菜单一</div>
34 <div class="menu-item">菜单二</div>
35 <div class="menu-item">菜单三</div>
36 </div>
37 <div class="content">
38 <div >内容一</div>
39 <div class="hide">内容二</div>
40 <div class="hide">内容三</div>
41 </div>
42 </div>
43 <script src="jquery-1.12.4.js"></script>
44 <script>
45 $(‘.menu-item‘).click(function () {
46 $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
47 var v = $(this).index();
48 $(‘.content‘).children().eq(v).removeClass(‘hide‘).siblings().addClass(‘hide‘);
49 })
50 </script>
51 </body>
52 </html>
页面切换2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <input id="t1" type="text" />
9 <input id="a1" type="button" value="添加"/>
10 <input id="a2" type="button" value="删除"/>
11 <input id="a3" type="button" value="复制"/>
12
13 <ul id="u1">
14 <li>1</li>
15 <li>2</li>
16 </ul>
17 <script src="jquery-1.12.4.js"></script>
18 <script>
19 $(‘#a1‘).click(function () {
20 var v = $(‘#t1‘).val();
21 var temp = "<li>" + v + "</li>";
22 $(‘#u1‘).append(temp); //在后面追加
23 //$(‘#u1‘).prepend(temp); //在前面追加
24 //$(‘#u1‘).after(temp); //在同级后面
25 //$(‘#u1‘).before(temp); //在同级前面
26 });
27 $(‘#a2‘).click(function () {
28 var index = $(‘#t1‘).val();
29 $(‘#u1 li‘).eq(index).remove();
30 //$(‘#u1 li‘).eq(index).empty();
31 })
32 $(‘#a3‘).click(function () {
33 var index = $(‘#t1‘).val();
34 var v = $(‘#u1 li‘).eq(index).clone();
35 $(‘#u1‘).append(v);
36 })
37 </script>
38 </body>
39 </html>
添加
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .container{
8 padding: 80px;
9 border: 1px solid #dddddd;
10 }
11 .item{
12 position: relative;
13 width: 40px;
14 }
15 </style>
16 </head>
17 <body>
18 <div class="container">
19 <div class="item">
20 <span>赞</span>
21 </div>
22 </div>
23 <div class="container">
24 <div class="item">
25 <span>赞</span>
26 </div>
27 </div>
28 <div class="container">
29 <div class="item">
30 <span>赞</span>
31 </div>
32 </div>
33 <div class="container">
34 <div class="item">
35 <span>赞</span>
36 </div>
37 </div>
38 <div class="container">
39 <div class="item">
40 <span>赞</span>
41 </div>
42 </div>
43 <script src="jquery-1.12.4.js"></script>
44 <script>
45 $(‘.item‘).click(function () {
46 addElement(this);
47 });
48 function addElement(self) {
49 var fontSize = 15;
50 var top = 0;
51 var right = 0;
52 var opacity = 1;
53
54 var tag = document.createElement(‘span‘);
55 $(tag).text(‘+1‘);
56 $(tag).css(‘color‘,‘green‘);
57 $(tag).css(‘position‘,‘absolute‘);
58 $(tag).css(‘fontSize‘,fontSize + "px");
59 $(tag).css(‘top‘,top + "px");
60 $(tag).css(‘right‘,right + "px");
61 $(tag).css(‘opacity‘,opacity);
62 $(self).append(tag);
63
64 var obj = setInterval(function () {
65 fontSize = fontSize + 5;
66 top = top - 5;
67 right = right - 5;
68 opacity = opacity - 0.2;
69 $(tag).css(‘fontSize‘,fontSize + "px");
70 $(tag).css(‘top‘,top + "px");
71 $(tag).css(‘right‘,right + "px");
72 $(tag).css(‘opacity‘,opacity);
73
74 if(opacity<0){
75 clearInterval(obj);
76 $(tag).remove();
77 }
78 },100);
79 }
80 </script>
81 </body>
82 </html>
点赞
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="height: 100px; width: 100px;overflow: auto"> 9 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 10 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 11 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 12 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 13 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 14 <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p> 15 </div> 16 <div style="height: 1000px;"></div> 17 <script src="jquery-1.12.4.js"></script> 18 19 </body> 20 </html>
返回顶部
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <input id="t1" type="text" />
9 <input id="a1" type="button" value="添加"/>
10 <input id="a2" type="button" value="删除"/>
11 <input id="a3" type="button" value="复制"/>
12
13 <ul id="u1">
14 <li>1</li>
15 <li>2</li>
16 </ul>
17 <script src="jquery-1.12.4.js"></script>
18 <script>
19 $(‘#a1‘).click(function () {
20 var v = $(‘#t1‘).val();
21 var temp = "<li>" + v + "</li>";
22 $(‘#u1‘).append(temp); //在后面追加
23 //$(‘#u1‘).prepend(temp); //在前面追加
24 //$(‘#u1‘).after(temp); //在同级后面
25 //$(‘#u1‘).before(temp); //在同级前面
26 });
27 $(‘#a2‘).click(function () {
28 var index = $(‘#t1‘).val();
29 $(‘#u1 li‘).eq(index).remove();
30 //$(‘#u1 li‘).eq(index).empty();
31 })
32 $(‘#a3‘).click(function () {
33 var index = $(‘#t1‘).val();
34 var v = $(‘#u1 li‘).eq(index).clone();
35 $(‘#u1‘).append(v);
36 })
37 $(‘ul‘).delegate(‘li‘,‘click‘,function () {
38 var v = $(this).text();
39 alert(v);
40 })
41 </script>
42 </body>
43 </html>
添加2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <!--先执行自己绑定的事件，然后跳转-->
9 <a onclick="Clickon" href="http://www.baidu.com">百度</a>
10 只执行绑定的事件，不跳转
11 <a onclick="return Clickon" href="http://www.baidu.com">百度</a>
12 <a id="i1" onclick="return Clickon" href="http://www.baidu.com">百度</a>
13
14 <script src="jquery-1.12.4.js"></script>
15 <script>
16 function Clickon() {
17 alert(123);
18 return false;
19 }
20 $(‘#i1‘).click(function () {
21 alert(456);
22 return false;
23 })
24 </script>
25 </body>
26 </html>
事件提交顺序
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .error{
8 color: red;
9 }
10 </style>
11 </head>
12 <body>
13 <form id="f1" action="s5开关功能.html" method="POST">
14 <div><input name="n1" type="text" /></div>
15 <div><input name="n2" type="password" /></div>
16 <div><input name="n3" type="text" /></div>
17 <div><input name="n4" type="text" /></div>
18 <div><input name="n5" type="text" /></div>
19
20 <input type="submit" value="提交" />
21 </form>
22 <script src="jquery-1.12.4.js"></script>
23 <script>
24 //当页面框架加载完成后自动执行
25 $(function () {});
26 //当页面所有元素完全加载完毕后执行
27 $(‘:submit‘).click(function () {
28 var flag = true;
29 $(‘.error‘).remove();
30 $(‘f1‘).find(‘input[type="text"],input[type="password"]‘).each(function () {
31 var v = $(this).val();
32 if(v.length <= 0){
33 flag = false;
34 var tag = document.createElement(‘span‘);
35 tag.className = "error";
36 tag.innerHTML = "必填";
37 $(this).after(tag);
38 //return false;
39 }
40 })
41 /*这是对于表单中只含有一个input标签时
42 var v = $(this).prev().val();
43 if(v.length > 0){
44 return true;
45 }else{
46 alert("请输入内容");
47 return false;
48 }*/
49 })
50
51 </script>
52 </body>
53 </html>
表单验证
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <script src="jquery-1.12.4.js"></script>
9 <script>
10 //第一种扩展方式
11 $.extend({
12 ‘kanghui‘:function(){
13 return ‘shuaige‘;
14 }
15 });
16 var v = $.kanghui();
17 alert(v);
18 //第二种扩展方式
19 $.fn.extend({
20 ‘kanghui‘:function () {
21 return ‘shuaige‘
22 }
23 });
24 var v = $(‘#i1‘).kanghui();
25 alert(v);
26 </script>
27 </body>
28 </html>
jQuery扩展
4 小结
一入前端深似海，不过确实挺好玩，也不算难。但是想和做事两码事。
很多事情不是想象的那么简单还是要做好计划，按部就班，有条不紊。
调节好自己吧~不能一蹶不振!
5 推荐
推荐1：https://www.cnblogs.com/hq-blog/p/8590275.html
推荐2：https://www.cnblogs.com/WSX1994/p/9115048.html
写博客其实并非易事！
我是尾巴~
本次推荐：http://jquery.cuishifeng.cn/index.html
详细请看这里！
虽不才，才要坚持~
原文地址：https://www.cnblogs.com/zhangkanghui/p/9784951.html
时间： 2024-10-09 15:26:43