05: jQuery
目录：
- 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结构（例如迭代和数组操作等）的增强
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>
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>
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>
<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>
作者：学无止境
出处：https://www.cnblogs.com/xiaonq
生活不只是眼前的苟且，还有诗和远方。
