jQuery
Posted py-peng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。
介绍
jQuery是一个javascript库，核心理念是write less,do more(写得更少,做得更多)，他内部帮我们把几乎所有功能都做了封装，相比上一节基于DOM、BOM操作会更加简单。
例如：根据ID选择标签
// DOM 选择 document.getElementById(‘item‘); // jQuery 选择 $(‘#item‘);
快速应用
在使用jQuery时，需要提前下载并应用jQuery之后，才能在代码中使用。
下载jQuery http://jquery.com/download/
应用jQuery
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘/> <title>jQuery学习</title> <style> </style> </head> <body> <div id="item">Hello world <div>我是item的子标签</div> </div> <!--导入jQuery--> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript"> // 获取标签文本内容 var tar = $(‘#item‘).text(); // 如果需要修改内容，在text（）里添加即可 alert(tar) </script> </body> </html>
DOM对象和jQuery对象
DOM对象和jQuery对象都为标签提供了各种各种功能，并且两者之间可以进行相互转换。
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘/> <title>jQuery学习</title> <style> </style> </head> <body> <div id="content"> Hello world </div> <!--导入jQuery--> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript"> // Dom对象转换jQuery对象：$(dom对象) var D_Q = $(document.getElementById(‘content‘)); // jQuery对象转换成Dom对象：jQuery对象[0] var Q_D = $(‘#content‘)[0]; console.log(‘D-Q‘,D_Q); console.log(‘Q-D‘,Q_D) </script> </body> </html>
选择器
id选择器
HTML代码：
<div id="content">Hello World</div>
jQuery代码：
$(‘#content)
class选择器
HTML代码：
<div class="wrong-poem">Hello World</div> <div class="poem">昨夜雨疏风骤，浓睡不消残酒。</div> <div class="poem">试问卷帘人，却道海棠依旧。</div> <div class="poem">知否，知否？</div> <div class="poem">应是绿肥红瘦。</div>
jQuery代码：
$(‘.poem‘)
运行
<script type="text/javascript"> var tar = $(‘.poem‘); console.log(tar); for (var i=0;i<tar.length;i++){ console.log(tar[i]) } </script>
结果
标签选择器
HTML代码：
<div>div标签</div> <span>span标签</span>
jQuery代码：
$(‘div‘)
结果
多选选择器
HTML代码：
<div>2</div> <span>1</span> <p>3</p>
jQuery代码：
$(‘span,div,p‘)
结果
层叠选择器
HTML代码：
<div class="out"> <div>我是内部div</div> <div>我也是</div> </div>
jQuery代码：
$(‘.out div‘)
结果
属性选择器
HTML代码：
<input type="radio" name="gender" value="0"> <input type="radio" name="gender" value="1"> <input type="checkbox" name="hobby" value="1">
jQuery代码：
$(‘input[name="gender"]‘)
结果
表单选择器
HTML代码：
<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select> <option>Option</option> </select> <textarea> </textarea> <button>Button</button> </form>
jQuery代码：
$(":text") // 找到所有input标签
// $(":input") 找到所有input标签
// $(":password") 找到所有input且type=password的标签
// $(":radio") 找到所有input且type=radio的标签
// $(":checkbox") 找到所有input且type=checkbox的标签
结果
筛选器
筛选器一般用于对选择器选中的标签进行再次筛选。
parent 父标签
HTML代码：
<div class="body"> <p>p1</p> <p>p2</p> </div
jQuery代码：
$(‘p‘).parent()
结果
children 所有子标签
children(‘a‘) 可以传入值
HTML代码：
<div class="outside"> <div class="inside"> <p>p标签</p> </div> </div>
jQuery代码：
$(‘.outside‘).children()
结果
next 下一个兄弟标签
HTML代码：
<div class="first"></div> <div class="second"></div> <div class="third"></div>
jQuery代码：
$(‘.first‘).next()
结果
prev 上一个兄弟标签
HTML代码：
<div class="first"></div> <div class="second"></div> <div class="third"></div>
jQuery代码：
$(‘.second‘).prev()
结果
siblings 所有兄弟标签
HTML代码：
<div> <div class="all-siblings"></div> <div class="first"></div> <div class="second"></div> <div class="third"></div> </div>
jQuery代码：
$(‘.all-siblings‘).siblings()
结果
find 子孙中查找标签
HTML代码：
<div> <p> <span> <a> <img src=""> </a> </span> </p> </div>
jQuery代码：
$(‘div‘).find(‘img‘)
结果
first 匹配的第一个标签
HTML代码：
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
jQuery代码：
$(‘ul li‘).first()
结果
last 匹配的最后一个标签
HTML代码：
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
jQuery代码：
$(‘ul li‘).last()
结果
属性
增删样式
addClass 增加样式
removeClass 删除样式
HTML代码：
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘/> <title>jQuery学习</title> <style> .old { width: 100px; height: 100px; background-color: #ff6700; } .new { width: 500px; height: 500px; background-color: green; } .hide{ display: none; } </style> </head> <body> <div class="old hide"></div> </body> </html>
HTML代码：
var tar = $(‘.old‘); tar.addClass(‘new‘); // 增加 tar.removeClass(‘hide‘) // 删除
html、text文本
HTML代码：
<div class="item1"> <a>百度</a> </div> <div class="item2"> </div>
jQuery代码：
取值时
html 取标签
text 取文本
// 取值 var tar = $(‘.item1‘); tar.html(); // <a>百度</a> tar.text(); // 百度
设值时
html 创建的标签可以识别
set_ele.html(‘<a href="#">html一下</a>‘)
text 创建的标签不能被识别
set_ele.text(‘<a href="#">text一下</a>‘)
val 值
HTML代码：
<input type="text" id="username"> <input type="radio" class="a1" name="gender" value="1">男 <input type="radio" class="a1" name="gender" value="0">女 <input type="checkbox" class="a2" name="hobby" value="1">篮球 <input type="checkbox" class="a2" name="hobby" value="2">足球 <input type="checkbox" class="a2" name="hobby" value="3">羽毛球 <select name="city" id="s1"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> </select> <select name="lover" id="s2" multiple> <option value="1">波多</option> <option value="2">苍井</option> <option value="3">小泽</option> </select>
jQuery代码：
获取值： 文本输入框：$(‘#username‘).val(); 单选radio框：$(‘.a1:checked‘).val(); 多选checkout框：$(‘.a2:checked‘).val()是不行的;需要循环取值，如下： var d = $(‘:checkbox:checked‘); for (var i=0;i<d.length;i++){ console.log(d.eq(i).val()); } 单选select框：$(‘#city‘).val()； 多选select框：$(‘#lover‘).val(); 设置值： 文本输入框：$(‘#username‘).val(‘you are my love‘); 单选radio框：$(‘.a1‘).val([2]); #注意里面必须是列表，写的是value属性对应的值 多选checkout框：$(‘.a2‘).val([‘2‘,‘3‘]) 单选select框：$(‘#city‘).val(‘1‘)； 多选select框：$(‘#lover‘).val([‘2‘,‘3‘])
实例
模态框添加和编辑功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Study</title> <style> table{ border-collapse: collapse; margin-bottom: 5px; } table th,td{ border: #b0b0b0 2px solid; padding: 5px; } .cover { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.7; } .login{ text-align: center; width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: white; } .login div{ margin-bottom: 20px; } .hide{ display: none; } </style> </head> <body> <table> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> <th>工资</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="id"></td> <td>小明</td> <td>做数学</td> <td><input class="expel" type="button" value="开除"></td> <td>100</td> </tr> <tr> <td><input type="checkbox" name="id"></td> <td>小红</td> <td>爱小明</td> <td><input class="expel" type="button" value="开除"></td> <td>10</td> </tr> <tr> <td><input type="checkbox" name="id"></td> <td>小军</td> <td>揍小明</td> <td><input class="expel" type="button" value="开除"></td> <td>1</td> </tr> </tbody> </table> <button id="add_user">添加新用户</button> <div class="cover hide"></div> <div class="login hide"> <h3>用户添加界面</h3> <div>姓名<input class="name" type="text"></div> <div>爱好<input class="hobby" type="text"></div> <div>工资<input class="money" type="text" value="1"></div> <input class="login-submit" type="button" value="提交"> <input class="login-reset" type="button" value="取消"> </div> <script type="text/javascript" src="../js/jquery.js"></script> <script> // 删除 $(‘table‘).on(‘click‘,‘.expel‘,function () { var status = $(‘td input[name="id"]:checked‘); // 返回选中的对象 // 批量删除 if (status.length!==0){ for (var i=0;i<status.length;i++){ var tar = $(status[i]).parent().parent(); tar.remove() } } // 没有批量，删单个 else{ ($(this).parent().parent().remove()); } });
// 添加用户 $(‘#add_user‘).on(‘click‘,function () { // 清空以前的数据,移除遮挡 $(‘.login div input‘).val(‘‘); $(‘.cover,.login‘).removeClass(‘hide‘) });
// 确认添加 $(‘.login-submit‘).on(‘click‘,function () { var name = $(‘.login .name‘).val(); var hobby = $(‘.login .hobby‘).val(); var expel = ‘<input class="expel" type="button" value="开除">‘; var money = $(‘.login .money‘).val(); var tr_ele = document.createElement(‘tr‘); // 创建新元素 // 给新元素,添加子元素,必须查找后才能才能使用append $(tr_ele).append(‘<td><input type="checkbox" name="id"></td>‘); $(tr_ele).append(‘<td>‘+ name +‘</td>‘); $(tr_ele).append(‘<td>‘+ hobby + ‘</td>‘); $(tr_ele).append(‘<td>‘+ expel +‘</td>‘); // 不同不是添加 var td_ele = document.createElement(‘td‘); td_ele.innerHTML = money; $(tr_ele).append(td_ele); // 添加到表单中 $(‘table tbody‘).append(tr_ele); // 恢复遮挡 $(‘.cover,.login‘).addClass(‘hide‘) });
// 取消添加 $(‘.login-reset‘).on(‘click‘, function () { // 恢复遮挡 $(‘.cover,.login‘).addClass(‘hide‘) }) </script> </body> </html>
prop 属性值
HTML代码：
<input type="radio" name="gender" value="1">男 <input type="radio" name="gender" value="0">女
jQuery代码：
$(‘:radio‘).prop(‘checked‘)
结果
false
实例
全选、取消、反选。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery学习</title> <style> </style> </head> <body> <input type="checkbox" name="hobby">篮球 <input type="checkbox" name="hobby">足球 <input type="checkbox" name="hobby">羽毛球 <div> <button class="get-all">全选</button> <button class="lose-all">取消</button> <button class="negation">反选</button> </div> <script src="../js/jquery.js"></script> <script> // 全选 $(‘.get-all‘).on(‘click‘,function () { $(‘:checkbox‘).prop(‘checked‘,true); }); // 取消 $(‘.lose-all‘).on(‘click‘,function (){ $(‘:checkbox‘).prop(‘checked‘,false) }); //反选 $(‘.negation‘).on(‘click‘,function () { var tar = $(‘:checkbox‘); for (var i=0;i<tar.length;i++){ // tar[i].checked = !tar[i].checked 第一种 $(tar[i]).prop(‘checked‘,!tar[i].checked) // 第二种,记得前面加$,这样才有prop方法 } }) </script> </body> </html>
文档处理
append 内部插入
被选元素内部后插入
HTML代码：
<div class="out"> <div>内部div</div> </div>
jQuery代码：
$(‘.out‘).append(‘<p>来喽来喽</p>‘)
结果
prepend 内部插入
被选元素内部前插入
HTML代码：
<div class="out"> <div>内部div</div> </div>
jQuery代码：
$(‘.out‘).prepend(‘<p>来喽来喽</p>‘)
结果
after 外部插入
被选元素外部后插入
HTML代码：
<div class="out"> <div>内部div</div> </div>
jQuery代码：
$(‘.out‘).after(‘<div>新的div</div>‘)
结果
before 外部插入
HTML代码：
<div class="out"> <div>内部div</div> </div>
jQuery代码：
$(‘.out‘).before(‘<div>新的div</div>‘)
结果
empty 删除被选标签内部的标签
被选中的标签会存在
HTML代码：
<div class="out"> <div>内部div</div> <span>内部span</span> </div>
jQuery代码：
$(‘.out‘).empty()
结果
remove 删除标签
被选中的标签不会存在
HTML代码：
<div class="out"> <div>内部div</div> <span>内部span</span> </div>
jQuery代码：
$(‘.out‘).remove()
事件
jQuery绑定事件
HTML代码：
<ul> 让他们变绿 <li>小明</li> <li>小红</li> <li>小军</li> </ul>
jQuery代码：
// 鼠标按下 $(‘li‘).on(‘mousedown‘,function () { this.style.color = ‘green‘ }); // 鼠标抬起 $(‘li‘).on(‘mouseup‘,function () { this.style.color = ‘black‘; var name = $(this).text(); $(this).text(name + ‘:我不想变绿了‘) });
实例
左侧菜单切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery学习</title> <style> body{margin: 0;} .menu{ width: 200px; background-color: #b0b0b0; } .menu .title{ background-color: #ff6700; font-size: 15px; cursor: pointer; } .menu .title .item{ background-color: greenyellow; padding: 0 5px; cursor: pointer; } .menu .title .item:hover{ color: white; background-color: green; } .hide{ display: none; } </style> </head> <body> <div class="menu"> <div class="title">选择1 <div class="item hide">item</div> <div class="item hide">item</div> <div class="item hide">item</div> </div> <div class="title">选择2 <div class="item hide">item</div> <div class="item hide">item</div> <div class="item hide">item</div> </div> <div class="title">选择3 <div class="item hide">item</div> <div class="item hide">item</div> <div class="item hide">item</div> </div> </div> <script src="../js/jquery.js"></script> <script> $(‘.title‘).click(function () { // 判断item标签是否有hide var status = $(this).children(‘.item‘).is(‘.hide‘); // 全部添加hide $(‘.title .item‘).addClass(‘hide‘); //有的话打开 if (status){ $(this).children().removeClass(‘hide‘) } }); </script> </body> </html>
jQuery更多事件
使用方法和click都是类似的，事件列表如下：
jQuery事件委托
jQuery的事件绑定是在页面加载完毕之后，找到相关标签并为其绑定事件，如果后期通过js代码有新增表现，那么新标签中模式是没有事件的，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery学习</title> <style> </style> </head> <body> <ul> 让他们变绿 <li>小明</li> <li>小红</li> <li>小军</li> </ul> <div> <input type="text"> </div> <button class="new_user">新增</button> <script src="../js/jquery.js"></script> <script> // 鼠标悬停 $(‘li‘).mousemove(function () { this.style.color = ‘green‘ });
// 鼠标离开 $(‘li‘).mouseleave(function () { this.style.color = ‘black‘; var name = $(this).text(); $(this).text(name + ‘:我不想变绿了‘) });
// 新增按钮 $(‘.new_user‘).click(function () { var name = $(‘div :text‘).val(); if (name.trim()!==‘‘){ $(‘ul‘).append(‘<li>‘+ name +‘</li>‘) } }) </script> </body> </html>
为了避免类似这种情况的发生，jQuery中引入了事件委托的概念，只需要基于on进行绑定即可：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery学习</title> <style> </style> </head> <body> <ul> 让他们变绿 <li>小明</li> <li>小红</li> <li>小军</li> </ul> <div> <input type="text"> </div> <button class="new_user">新增</button> <script src="../js/jquery.js"></script> <script> // 鼠标悬停 $(‘ul‘).on(‘mousemove‘,‘li‘,function () { this.style.color = ‘green‘ }); // 鼠标离开 $(‘ul‘).on(‘mouseleave‘,‘li‘,function () { this.style.color = ‘black‘; var name = $(this).text(); $(this).text(name + ‘:我不想变绿了‘) }); // 新增按钮 $(‘.new_user‘).click(function () { var name = $(‘div :text‘).val(); if (name.trim()!==‘‘){ $(‘ul‘).append(‘<li>‘+ name +‘</li>‘) } }) </script> </body> </html>
更多
on方法
语法：$(selector).on(event,childSelector,data,function)
| event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值，也可以是数组。必须是有效的事件。 |
| childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。 |
| data | 可选。规定传递到函数的额外数据。 |
| function | 可选。规定当事件发生时运行的函数。 |
$(‘ul‘).on(‘click‘,‘li‘,function () { this.style.color = ‘green‘ });
off方法
语法：$(selector).off(event,selector,function(eventObj),map)
| event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值。必须是有效的事件。 |
| selector | 可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。 |
| function(eventObj) | 可选。规定当事件发生时运行的函数。 |
| map | 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。 |
$("button").click(function(){
$("p").off("click");
});
is方法
语法：$(selector).is(selectorElement,function(index,element))
| selectorElement | 必须。选择器表达式，根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true，否则返回 false |
| function(index,element) |
可选。指定了选择元素组要执行的函数。
|
$(div).is(‘item‘)
Ajax
ajax作用：通过JavaScript代码向网络上的地址发送异步请求。
为了本地测试方便，我们通过ajax向本地json文件发送请求并获取数据。
student_info.json
[ {‘id‘:‘1‘,‘name‘:‘小明‘,‘gender‘:‘male‘}, {‘id‘:‘2‘,‘name‘:‘小红‘,‘gender‘:‘female‘}, {‘id‘:‘3‘,‘name‘:‘小军‘,‘gender‘:‘male‘}, ]
基本代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery学习</title> </head> <body> <input type="button" id="btn" value="获取数据"> <script src="../js/jquery.js"></script> <script type="text/javascript"> $(function () { $(‘#btn‘).click(function () { $.ajax({ type: ‘GET‘, // 也可以向网络地址 http://www.xxxx.com 发送请求。 url: ‘../json/student_info.json‘, success: function (arg) { console.log(arg); } }) }); }) </script> </body> </html>
实例
基于ajax实现数据管理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery学习</title> <style> table{ border-collapse: collapse; } table th,td{ border: #b0b0b0 1px solid; text-align: center; } </style> </head> <body> <table> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> </tbody> </table> <input class="getData" type="button" value="加载内容"> <script src="../js/jquery.js"></script> <script> $(‘.getData‘).click(function () { $.ajax({ // 请求类型 type:‘get‘, // 也可以向网络地址 http://www.xxxx.com 发送请求。 url:‘../json/student_info.json‘, // 成功后 success:function (arg) { for(var i in arg){ var id = ‘<td>‘+arg[i]["id"]+‘</td>‘; var name = ‘<td>‘+arg[i]["name"]+‘</td>‘; var gender = ‘<td>‘+arg[i]["gender"]+‘</td>‘; $(‘tbody‘).append(‘<tr>‘+id+name+gender+‘</tr>‘) } } }) }) </script> </body> </html>
以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章
markdown 在WordPress中使用jQuery代码片段