正文
05: jQuery
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
目录：
jQuery参考网站
W3school
- 1.1 JQuery作用
- 1.2 jQuery与DOM比较 与 相互转换
- 1.3 jQuery选择器
- 1.4 jQuery筛选与过滤
- 1.5 jQuery表单
- 1.6 补充 JQuery常用查找方法补充
- 1.7 jQuery文本与属性操作
- 1.8 CSS操作
- 1.9 文档处理
- 1.10 JQuery事件绑定的四种方式
- 1.11 jQuery使用
1.1 JQuery作用返回顶部
简介： jQuery库为Web脚本编程提供了通用的抽象层，使得它几乎适用于任何编程的情形。
# # 第一：取得页面中的元素
# 1、 如果不使用JavaScript库，遍历DOM树，以及查找HTML文档结构中某个特殊的部分，必需编写很多代码
# 2、 jQuery为准确获取需要操纵的文档元素，提供了可靠而富有效率的选择符机制。 # # 第二：修改页面的外观
# 1、 CSS虽然为呈现方式提供了一种强大的手段，但当所有浏览器不完全支持相同的标准时，单纯使用CSS就会
# 显得力不从心
# 2、 jQuery可以弥补这一不足，它提供了跨浏览器的标准来解决方案。
# 3、 而且即使在页面已经呈现之后，jQuery仍然能够改变文档中某个部分的类或都个别的样式属性。 # # 第三：改变页面的内容
# 1、 jQuery能够影响的范围并不局限于简单的外观变化，使用少量的代码
# 2、 jQuery就能改变文档的内容，可以改变文本、插入或都翻转图像、对列表重新排序，甚至对HTML文档的整个结构都能重写和扩充——所有这些只需要一个简单易用的API。 # # 第四：响应用户的页面操作
# 1、 jQuery提供了截取形形色色的页面事件（比如用户单击一个链接）的适当方式，而不需要使用事件处理程
# 序搞乱HTML代码
# 2、 此外，它的事件处理API也消除了经常困扰Web开发人员的浏览器不一致性 # # 第五：为页面添加动态效果
# 1、 为了实现某种交互式行为，设计者也必须向用户提供视觉上的反馈
# 2、 jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利 # # 第六：无需刷新页面
# 1、即可从服务器获取信息，这种编程模式就是从所周知的AJAX（Asyynchoronous JavaScript and XML），它能辅
# 助Web开发人员创建出反应灵敏、功能丰富的网站
# 2、jQuery通过消除这一过程中的浏览器特定的复杂性，使开发人员得以专注于服务器端的功能设计 # # 第七：简化常见的JavaScript任务
# 1、除了这些完全针对文档的特性之外，jQuery也提供了对基本的JavaScript结构（例如迭代和数组操作等）的增强
jQuery作用
1.2 jQuery与DOM比较 与 相互转换返回顶部
1. $=jQuery 可以使用这两个关键字调用jQuery中的方法
2. JQuery内部实质上封装的是DOM，JQuery中获得的东西比DOM获得的多
3. JQuery对象返回的是一个列表，列表中第0个元素就是用DOM获取的对象
4. 分别用JQuery和DOM获取对象的方法：
$("#i1") #使用JQuery获取对象
document.getElementById('i1'); #使用DOM获取对象
5. 将通过JQuery获取的对象转换成通过DOM获取的对象
jquery 对象[0] => Dom 对象
$("#i1")[0] = document.getElementById('i1'); #JQuery第0个元素就是DOM对象
6. 将通过DOM获取的对象装换成通过JQuery获取的对象
dom 对象 => $(Dom 对象)
d = document.getElementById('i1');
$(d) = $("#i1") #DOM对象用$()包起来就是JQuery对象
1.3 jQuery选择器返回顶部
1、基本选择器
1. id选择器
$("#i1") #找到id=i1的标签
2. class选择器
$(".c1")
3. 标签选择器
$('a') #找到所有a标签
4. 组合选择器
$('a,.c2,#i10') # 作用：找到所有a标签和所有class等于.c2的标签和id=i10的所有标签
5. 匹配所有元素，多用于结合上下文来搜索 。
$("*")
2、层级选择器
1. $('#i1 a') #找到id=i1标签下面所有的a标签（子子孙孙都找到）
2. $('#i1>a') #找到id=i1标签下面所有的a标签（只能找到儿子）
3. $("label + input") #匹配所有跟在 label 后面的 input 元素
4. $("form ~ input") #找到所有与表单同辈的 input 元素
3、属性
1. $('[alex]') #找到具有alex属性的标签（比如：alex='123'，alex='456'）
2. $('[alex="456"] #只找到标签中alex='456'的标签（属性：alex;值：456）
1.4 jQuery筛选与过滤返回顶部
1、查找
1. $("p").parent() #取得一个包含着所有匹配元素的唯一父元素的元素集合
$("span").parents() # parents()将查找所有祖辈元素
$('#i1').parentsUntil('.c1') #查找当前元素的所有的父辈元素，直到遇到匹配元素为止
2. $("div").children() # children()只考虑子元素而不考虑所有后代元素
3. $("div").siblings() #获取所有兄弟标签，不包含自己
4. $("p").next() #获取匹配标签后面的兄弟标签
$("div:first").nextAll().addClass("after"); #查找当前元素之后所有的同辈元素。
$(‘#i1’).nextUntil(‘#i2’) #查找当前元素之后所有的同辈元素，直到遇到匹配元素为止
5. $("p").prev() #用于筛选前一个同辈元素的表达式
$("div:last").prevAll().addClass("before"); #查找当前元素之前所有的同辈元素
$(‘#i1’). prevUntil (‘#i2’) #查找当前元素之前所有的同辈元素，直到遇到匹配元素为止
6. $("p").find("span") #搜索所有与指定表达式匹配的元素, 子子孙孙中查找
2、基本筛选器
1. $('a:first') #找到所有a标签，只过滤出第一个
$('a:last') #找到所有a标签，只过滤出最后一个
2. eq(index) #通过索引提取出对应的值（索引从0开始）
$('a:eq(0)') #找到所有a标签中索引为0的元素
3. :even #找到偶数行
:odd #找到奇数行
4. :gt(index) #索引大于多少
:lt(index) #索引小于多少
5. :header #找到所有的h标题标签
6. $("input:not(:checked)") #查找所有未选中的 input 元素
3、 过滤
作用： 在选择器选择到的所有标签的基础上再选择一次
1） $(‘li’).eq(1) #先找到所有li标签，然后再过滤出索引为1的
2） $('li').first() #找到所有li标签过滤出的第一个
$('li').last() #找到所有li标签过滤出最后一个
3） hasClass(class) #检查当前的元素是否含有某个特定的类，如果有，则返回true
1.5 jQuery表单返回顶部
1、表单
1. $('#i1 input') 和 $('#i1 :input') 区别
$('#i1 input') #只能匹配i1孩子中的所有input标签
$('#i1 :input') #不仅可以匹配input标签，也可以匹配select，textarea，button标签
2. $('#i1 :text') # 匹配所有的单行文本框
3. :password # 匹配所有密码框
4. :radio # 匹配所有单选按钮
5. :checkbox # 匹配所有复选框
6. :submit # 匹配所有提交按钮
7. :image # 匹配所有图像域
8. :reset # 匹配所有重置按钮
9. :button # 匹配所有按钮
10. :file # 匹配所有文件
2、表单对象属性
1. $('#i2 :enabled') # 查找所有可编辑input元素（即，没有disabled="disabled参数）
$('#i2 :disabled') # 查找所有不可编辑的input元素（input中有disabled="disabled参数）
2. :checked # 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
3. :selected # 匹配所有选中的option元素
4. :enabled # 可编辑的
5. :disabled # 不可编辑的
1.6 补充 JQuery常用查找方法补充返回顶部
1. $('.modal input[name="port"]') #作用是查找class=’modal’下面的input属性name=”port”
2. var val = $(this).prop('checked')?false:true #$(this).prop('checked')返回true那么val=false，反之为true
3. $('#edit_form').find('input[name="nid"]')
4. $ ( "input[tag='obj_checkbox']:checked" ).each( function () {}); #找到所有有tag='obj_checkbox'属性并且勾选中的标签
5. $('form').find("[disabled]").removeAttr('disabled'); #找到并移除form标签转中所有disabled属性
6. $("div.comment_container").removeClass('hide') #找到所有class=comment_container并移除class=hide
7. $('.comment').children(".comment_text"); #找到class='comment' 下所有孩子标签中class='comment_text'
8. $('.post_container').children().remove() #找到class='post_container'的所有标签，并清空
1.7 jQuery文本与属性操作返回顶部
1、文本操作
1. $('#i1').text() #获取文本内容
$('#i1').text(“新内容”) #将标签中内容替换成“新内容”
2. $('#i1').html() #获取整个标签
$('#i1').html("<p>aaaaaaa</p>") #替换标签中的标签
3. $('#i2').val() #获取value的值（比如input框中内容）
$('#i2').val('2222') #将输入框中的值替换成：2222
2、 属性操作
<input id="i1" type="button" value="开关" />
1. attr() #传入一个值是获取属性，传入两个值是设置属性
$('#i1').attr('type') #获取id=i1标签的type属性的值（结果：button）
$('#i1').attr('type','text') #将id=i1标签的属性修改成text
2. $('#i1').removeAttr('type') #删除其中的type="button”这个属性
3. prop #专门用于checkbox,radio标签操作
<input type='checkbox' id='i2' />
$('#i2').prop('checked') #获取值：选中结果是true未选中结果是false
$('#i2').prop('checked',true) #将checkbox多选框选中
4. 判断是否具有某个属性
if( !$("#display_name")[0].hasAttribute('is_login') ){}
1.8 CSS操作返回顶部
1、添加或删除id、或class属性
1. addClass()
$("p").addClass("c1"); # 添加c1样式
2. removeClass()
$("p").removeClass("c1"); # 清除c1样式
3. hasClass(class)
hasClass(class) #检查当前的元素是否含有某个特定的类，如果有，则返回true
2、添加style属性
1. $("p").css("color"); #取得第一个段落的color样式属性的值（1.9+版本）
2. $("p").css({ "color": "#ff0011"}); #将所有段落的字体颜色设为红色（1.9+版本）
3. $(tag).css('color','green'); #将获取的标签字体设置成绿色（1.0版本）
$(this).css({"border":"1px solid red"});
3.2 CSS ：位置
1. $(window).scrollTop() #获取Windows窗口滚轮位置（没有值是获取值）
$(window).scrollTop(0) #返回顶部（有值就是设置值）
2. scrollLeft() #和scrollTop()相似
3. offset() #获取匹配元素在当前视口的相对偏移
$("p:last").offset({ top: 10, left: 30 }); #设置匹配元素在当前窗口的偏移
4. position() #获取匹配元素相对父元素的偏移（与父标签偏移）
# 常用于relative和position结合的相对定位中
# 找到的父标签一定是relative所在标签
4、CSS ：尺寸
1. $('i1').height() # 获取标签的高度 纯高度（没有边框宽度）
2. $('i1').innerHeight() #获取第一个匹配元素内部区域高度（包括补白、不包括边框）
3. $('i1').outerHeight() #获取第一个匹配元素外部高度（默认包括补白和边框）
4. $('i1').outerHeight(true) #设置为 true 时，计算边距在内
1.9 文档处理返回顶部
1、 文档处理：内部插入
1. $('#u1').append("<b>Hello</b>"); #向id=u1的孩子标签最下面添加
2. $('#u1'). prepend("<b>Hello</b>"); #向id=u1的孩子标签最上面添加
3. appendTo() #把匹配的元素追加到另一个指定元素元素后面
4. prependTo() #把匹配的元素追加到另一个指定元素元素前面
2、 文档处理：外部插入
1. $('#u1'). after("<b>Hello</b>"); #向id=u1的兄弟标签下面添加
2. $('#u1'). before("<b>Hello</b>");
3、 文档处理：删除
1. $('#u1 li').eq(index).remove(); #将找到的元素根据索引值删除（删除整个标签）
2. $('#u1 li').eq(index).empty(); #将找到的元素根据索引值删除（仅删除标签内容）
4、 文档处理：复制 #把DOM文档中元素的副本添加到其他位置时这个函数非常有用
1. clone() #<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p"); #<b>Hello</b><p><b>Hello</b>, how are you?</p>
1.10 JQuery事件绑定的四种方式返回顶部
1、$('.c').click(function(){ })没有解绑方法
2、bind绑定和解绑
$('.c1').bind('click',function(){ })
$('.c1').unbind('click',function(){ })
3、on绑定和解绑
$('.c1').on('click', function(){ })
$('.c1').off('click', function(){ })
4、delegate绑定和解绑
$('.c').delegate('a', 'click', function(){ })
$('.c').undelegate('a', 'click', function(){ })
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
//第一种绑定：直接使用.事件名绑定
$('ul li').click(function () {
var v = $(this).text();
alert(v);
}); //第二种绑定：使用bind关键字绑定
$('ul li').bind('click',function () {
var v = $(this).text();
alert(v);
}); //第三种绑定：使用on绑定
$('ul li').on('click', function () {
var v = $(this).text();
alert(v);
}); //第四种绑定：使用delegate绑定
//委托：当点击的时候就会绑定并且执行（让增加一些东西又有相同功能时使用）
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
})
</script>
</body>
</html>
jQuery四种绑定方式比较
5、使用hover动态绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="user_info">使用hover触发JS函数</div> <script src="/static/js/jquery-1.12.4.min.js"></script> <script>
$(function () {
$("div.user_info").hover(function () {
show_user_menu(true);
},function () {
show_user_menu(false)
}); function show_user_menu(tag) {
if(tag==true){
console.log('true')
}else {
console.log('false')
}
}
})
</script>
</body>
</html>
使用hover动态绑定事件
1.11 jQuery使用返回顶部
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" id="allCheck">
<input type="button" value="取消" id="allCancel">
<input type="button" value="反选" id="reverse">
<span id="edit" >编辑模式</span> <table border="1">
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
<th>状态</th>
</tr>
</thead> <tbody id="tb">
<tr class="item">
<td><input type="checkbox"></td>
<td><input type="text" value="1.1.1.1" disabled="disabled"></td>
<td><input type="text" value="22" disabled="disabled"></td>
<td><select disabled="disabled"><option>在线</option><option>下线</option></select></td>
</tr> <tr class="item">
<td><input type="checkbox"></td>
<td><input type="text" value="1.1.1.1" disabled="disabled"></td>
<td><input type="text" value="22" disabled="disabled"></td>
<td><select disabled="disabled"><option>在线</option><option>下线</option></select></td>
</tr> <tr class="item">
<td><input type="checkbox"></td>
<td><input type="text" value="1.1.1.1" disabled="disabled"></td>
<td><input type="text" value="22" disabled="disabled"></td>
<td><select disabled="disabled"><option>在线</option><option>下线</option></select></td>
</tr> </tbody>
</table> <script src="jquery-1.12.4.js"></script>
<script> // 1、全选
$('#allCheck').click(function(){
$('#tb :checkbox').prop('checked',true).trigger('change');
}); // 2、取消
$('#allCancel').click(function(){
$('#tb :checkbox').prop('checked',false).trigger('change');
}); // 3、反选
$('#reverse').click(function(){
$('#tb :checkbox').each(function(){
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v).trigger('change');
})
}); // 4、当点击“编辑模式”按钮时出发该函数，将所有有edit属性的去除 disabled 属性
$('#edit').click(function(){
$('#tb :checkbox').each(function(){
var v = $(this);
if(v.hasClass('edit')){
$('#edit').css('backgroundColor','');
v.removeClass('edit')
}else{
$('#edit').css('backgroundColor','red');
v.addClass('edit')
}; // 当点击“编辑模式”按钮时进行判断，将可编辑的去除 disabled 属性
if($(this).prop('checked') == true && $(this).hasClass('edit')==true){
$(this).parent().siblings().children().removeAttr('disabled')
}else{
$(this).parent().siblings().children().attr('disabled','disabled');
}
})
}); // 5、当勾选时出发该函数，如果是‘编辑模式’将所有有edit属性的去除 disabled 属性
$('#tb :checkbox').change(function(){ if($(this).prop('checked') == true && $(this).hasClass('edit')==true){
$(this).parent().siblings().children().removeAttr('disabled')
}else{
$(this).parent().siblings().children().attr('disabled','disabled')
}
})
</script> </body>
</html>
模态对话框
<script src="/static/js/myjs/jquery.cookie.js"></script>
<script>
// 当框架加载完成后执行此函数
window.onload = function(){
var v = $.cookie('history_page');
if(v){
$("#mytab [type_name=" + v + "]").next().click()
}
}; // 使用cookie解决页面跳转问题
function add_cookie(tag) {
$.cookie('history_page',tag, { expires: 1 });
} </script>
当框架加载完成后执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css">
ul li:hover,
ul li.hover {
background: #efefef;
}
</style>
</head>
<body>
<div class="form-group">
<label>添加审批人</label>
<input autocomplete="off" type="text" name="addapproveuser" id="input-text" class="form-control"
onkeydown="isDown(event)" />
<ul id="listuser" class="list-unstyled" style="z-index:9;position: fixed;background-color: white;min-width: 540px">
<li onclick="getLiValue(this)" style="margin: 8px;">18,肖乃强,DevOps</li>
<li onclick="getLiValue(this)" style="margin: 8px;">294,李肖峰,研发实施组</li>
<li onclick="getLiValue(this)" style="margin: 8px;">306,肖娟,医学数据</li>
<li onclick="getLiValue(this)" style="margin: 8px;">447,肖菲菲,医学数据PM</li>
</ul>
</div>
<script src="jquery-1.12.4.js"></script> <script>
// 点击li时使用li标签的值替换input中内容
function getLiValue(ths) {
lival = $(ths).text();
inputval = $('#input-text').val(lival);
$('#listuser').addClass('hidden');
$('#input-text').focus();
var index = $("#listuser li").index(ths);
num = index;
changeCurrentLiStyle()
} var num = -1; // 默认选中第几个li标签
isFirst = true; // 是否第一次按 up/down键
function isDown(event) {
if(event.keyCode==40){ // 按下down键
num++; // 更改num
changeCurrentLiStyle(); // 更新li的样式
isFirst = false; // 第一次已经过去了
} if(event.keyCode==38){ // 按下up键
if (isFirst) { // 如果是第一次，不用减了
isFirst = false; // 这次过去了，就不是第一次了
} else {
num--;
}
changeCurrentLiStyle(); // 更新li的样式
} if(event.keyCode==13){ // 按下enter键
lival = $('.hover').text();
inputval = $('#input-text').val(lival);
$('#listuser').addClass('hidden');
}
} // 改变li样式
function changeCurrentLiStyle() {
var lis = $('#listuser li');
if (lis.length === 0) { // 判断li是否存在
return;
}
var num = this.getNum(lis.length); // 获取索引值
for (var i = 0; i < lis.length; i++) { // 排他法设置类
lis[i].className = '';
}
lis[num].className = 'hover'; // 当前li选中
} // 获取最显著li的num值
function getNum(len) {
// 对于任意一个数（正数和负数）
// 对len取余之后，保证在-len到len之间
// var num = this.num % len;
// // 此时加上len，保证是0到2*len之间，一定是正数了
// num += len;
// // 此时再取余，就保证是0到len之间了
// num %= len
return (num % len + len) % len
}
</script>
</body>
</html>
input框输入补全提示 监听 up/down事件
<form>
<button type="submit" class="btn btn-info margin"
onclick='return check_form(this.from)'
name="action_status"
value="4" >修改预计完成时间
</button>
</form> <script>
function check_form() {
var predict_time = $("#id_predict_time").val();
if(!predict_time){
$('#predict_time_null').text('预计完成时间 为必填字段');
return false;
}
}
</script>
form表单提交前数据验证
