jquery操作checked属性以及disabled属性的多种方法
Jquery操作Html控件CheckBox、Radio、Select控件
Jquery操作Html控件CheckBox、Radio、Select控件在使⽤ Javascript 编写前台脚本的时候，经常会操作 Html 控件，⽐如 checkbox、radio、select，⽤ Jquery 库操作其他会⽅便很多，下⾯⽤Jq对这些控件的操作进⾏⼀个全⾯的代码总结。
⼀、Jquery 对 CheckBox 的操作：<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox"/><span>篮球</span><input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox"/><span>排球</span><input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox"/><span>乒乓球</span><input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox"/><span>⽻⽑球</span>1、查找控件：(1) 选择所有的 checkbox 控件：根据input类型选择： $("input[type=checkbox]") 等同于⽂档中的 $("input:checkbox")根据名称选择：$("input[name=ckb]")(2) 根据索引获取checkbox控件：$("input:checkbox:eq(1)") 结果返回：<input id="ckb2" name="ckb" value="1" type="checkbox" /><span>排球</span>(3) 获得所有禁⽤的 checkbox 控件：$("input[type=checkbox]:disabled")结果返回：<input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span><input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>⽻⽑球</span>(4)获得所有启⽤的checkbox控件$("input:checkbox[disabled=false]")结果返回：<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span><input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span>(5)获得所有checked的checkbox控件$("input:checkbox:checked")结果返回：<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span><input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span>(6)获取所有未checkd的checkbox控件$("input:checkbox:[checked=false]")结果返回：<input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span><input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>⽻⽑球</span>(7)获得value 为 0 的checkbox 控件$("input[type=checkbox][value=0]")结果返回：<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span>2、禁⽤：(1)禁⽤所有的checkbox控件：$("input:checkbox").attr("disabled", true)(2)启⽤某些禁⽤的 checkbox 控件：$("input:checkbox:disabled").attr("disabled", false);(3)判断value=0的checkbox是否禁⽤:if ($("input[name=ckb][value=0]").attr("disabled") == true) {alert("不可⽤");}else {alert("可⽤");}3、选择：(1)全选：$("input:checkbox").attr("checked", true);(2)全不选：$("input:checkbox").attr("checked", false);(3)反选：$("input:checkbox").each(function () {if ($(this).attr("checked")) {//$(this).removeAttr("checked");$(this).attr("checked", false);}else {$(this).attr("checked",true);}});4、取值：function GetCkboxValues() {var str="";$("input:checkbox:checked").each(function () {switch ($(this).val()) {case "0":str += "篮球,";break;case "1":str += "排球,"; break;case "2":str += "乒乓球,";break;case "3":str += "⽻⽑球,";break;}});str=str.substring(0, str.length - 1)}⼆、Jquery 对 Radio 的操作：<input name="edu" value="0" type="radio" checked="checked"/><span>专科</span><input name="edu" value="1" type="radio"/><span>本科</span><input name="edu" value="2" type="radio" disabled="disabled"/><span>研究⽣</span> <input name="edu" value="3" type="radio" disabled="disabled"/><span>博⼠⽣</span> 1、查找控件：(1)选择所有的 Radio控件//根据input类型选择$("input[type=radio]") //等同于⽂档中的 $("input:radio")//根据名称选择$("input[name=edu]")(2)根据索引获得 Radio控件$("input:radio:eq(1)")结果返回：<input name="edu" value="1" type="radio" /><span>本科</span>(3)获得所有禁⽤的 Radio 控件$("input:radio:disabled")结果返回：<input name="edu" value="2" type="radio" disabled="disabled" /><span>研究⽣</span><input name="edu" value="3" type="radio" disabled="disabled"/><span>博⼠⽣</span> (4)获得所有启⽤的 Radio 控件$("input:radio[disabled=false]")结果返回：<input name="edu" value="0" type="radio" checked="checked" /><span>专科</span><input name="edu" value="1" type="radio" /><span>本科</span>(4)获得checked的 RadioButton 控件$("input:radio:checked") //等同于 $("input[type=radio][checked]")结果返回：<input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>(5)获取未checked的 RadioButton 控件$("input:radio[checked=false]").attr("disabled", true);结果返回：<input name="edu" value="1" type="radio" /><span>本科</span><input name="edu" value="2" type="radio" disabled="disabled" /><span>研究⽣</span><input name="edu" value="3" type="radio" disabled="disabled"/><span>博⼠⽣</span> (6)获得value 为 0 RadioButton 控件$("input[type=radio][value=0]")结果返回：<input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>2、禁⽤：(1)禁⽤所有的Radio$("input:radio").attr("disabled", true);或者 $("input[name=edu]").attr("disabled", true);(2)禁⽤索引为1的Radio控件$("input:radio:eq(1)").attr("disabled", true);(3)启⽤禁⽤的Radio控件$("input:radio:disabled").attr("disabled", false);(4)禁⽤当前已经启⽤的Radio控件$("input:radio[disabled=false]").attr("disabled", true);(5)禁⽤ checked 的RadioButton控件$("input[type=radio][checked]").attr("disabled", true);(6)禁⽤未checked 的RadioButton控件$("input:[type=radio][checked=false]").attr("disabled", true);(7)禁⽤value=0 的RadioButton$("input[type=radio][value=0]").attr("disabled", true);3、取值：$("input:radio:checked").val()4、选择：(1)判断value=1 的radio控件是否选中，未选中则选中：var v = $("input:radio[value=1]").attr("checked"); if (!v) { $("input:radio[value=1]").attr("checked", true); } (2)转换成Dom元素数组来进⾏控制选中：$("input:radio[name=edu]").get(1).checked = true;三、Jquery 对 Select 操作<select id="cmbxGame"><option value="0" selected="selected">⿊猫警长</option><option value="1" disabled="disabled">⼤头⼉⼦</option><option value="2">熊出没</option><option value="3">喜⽺⽺</option></select>1、禁⽤：(1)禁⽤select 控件$("select").attr("disabled", true);(2)禁⽤select中所有option$("select option").attr("disabled", true);(3)禁⽤value=2 的option$("select option[value=2]").attr("disabled", true);(4)启⽤被禁⽤的option$("select option:disabled").attr("disabled", false);2、选择：（1）option 值为 2 的被选择：var v = $("select option[value=2]").attr("selected");if (!v) {$("select option[value=2]").attr("selected", true);}(2) 索引为 2 的option 项被选择$("select")[0].selectedIndex = 2;或者 $("select").get(0).selectedIndex = 2;或者 $("select option[index=2]").attr("selected", true);3、获取选择项的索引：(1)获取选中项索引:jq 中的 get 函数是将jq对象转换成了dom元素var selectIndex = $("select").get(0).selectedIndex;或者 var selectIndex = $("select option:selected").attr("index");(2)获取最⼤项的索引：var maxIndex = $("select option:last").attr("index")或者 var maxIndex = $("select option").length - 14、删除select 控件中的option(1)清空所有option$("select option").empty();(2)删除 value=2 的option$("select option[value=2]").remove();(3)删除第⼀个option$("select option[index=0]").remove();(4)删除 text="熊出没" 的option$("select option[text=熊出没]").remove(); //此⽅法某些浏览器不⽀持⽤下⾯的⽅法替代注意：each 中不能⽤break ⽤return false 代替，continue ⽤ return true 代替$("select option").each(function () {if ($(this).text() == "熊出没") {$(this).remove();return false;}});5、在select中插⼊option(1)在⾸位置插⼊ option 并选择$("select").prepend("<option value='0'>请选择</option>");$("select option[index=0]").attr("selected", true);(2)在尾位置插⼊ option 并选择$("select").append("<option value=\"5\">哪吒闹海</option>");var maxIndex = $("select option:last").attr("index")$("select option[index=" + maxIndex + "]").attr("selected", true);(3)在固定位置插⼊⽐如第⼀个option 项之后插⼊新的option 并选择$("<option value=\"5\">哪吒闹海</option>").insertAfter("select option[index=0]");或者$("select option[index=0]").after("<option value=\"5\">哪吒闹海</option>"); $("select option[index=1]").attr("selected", true);6、取值：function GetCbxSelected() {var v = $("select option:selected").val();var t = $("select option:selected").text();alert("值:" + v + "⽂本:" + t);}。
JQUERY常用方法大全
JQUERY常用方法大全JQuery是一个快速、简洁的JavaScript库，它简化了HTML文档的遍历、事件处理、动画和AJAX交互等操作。
下面是JQuery中常用的一些方法：1.选择器方法：- `$(this)`：选择当前元素。
- `$(document)`：选择整个文档。
- `$(window)`：选择浏览器窗口。
2.事件方法：- `$(selector).click(function)`：给元素绑定点击事件。
- `$(selector).dblclick(function)`：给元素绑定双击事件。
- `$(selector).mouseenter(function)`：给元素绑定鼠标进入事件。
- `$(selector).mouseleave(function)`：给元素绑定鼠标离开事件。
- `$(selector).keydown(function)`：给元素绑定键盘按下事件。
- `$(selector).keyup(function)`：给元素绑定键盘松开事件。
3.DOM操作方法：- `$(selector).html(content)`：设置元素的HTML内容。
- `$(selector).text(content)`：设置元素的文本内容。
- `$(selector).val(value)`：设置或获取输入框的值。
- `$(selector).append(content)`：在元素内部的结尾插入内容。
- `$(selector).prepend(content)`：在元素内部的开头插入内容。
- `$(selector).after(content)`：在元素的后面插入内容。
- `$(selector).before(content)`：在元素的前面插入内容。
- `$(selector).remove(`：删除元素。
4.属性和样式方法：- `$(selector).attr(attributeName)`：获取元素的属性值。
jQuery对select，readonly,desabled等操作小结
jQuery对select，readonly,desabled等操作⼩结//遍历option和添加、移除optionfunction changeShipMethod(shipping){var len = $("select[@name=ISHIPTYPE] option").lengthif(shipping.value != "CA"){$("select[@name=ISHIPTYPE] option").each(function(){if($(this).val() == 111){$(this).remove();}});}else{$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));}}//取得下拉选单的选取值$('#testSelect option:selected').text();或$("#testSelect").find('option:selected').text();或$("#testSelect").val();//////////////////////////////////////////////////////////////////记性不好的可以收藏下：1,下拉框:var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的⽂本(注意中间有空格) var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值$("#select").empty();//清空下拉框//$("#select").html('');$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option稍微解释⼀下:1.select[@name='country'] option[@selected] 表⽰具有name 属性，并且该属性值为'country' 的select元素⾥⾯的具有selected 属性的option 元素；可以看出有@开头的就表⽰后⾯跟的是属性。
jquery中checked用法(一)
jquery中checked用法(一)jQuery中checked用法1. 选取checked元素使用checked选择器，可以选取所有被选中的元素。
例如：•$('input:checked')：选取所有当前被选中的input元素。
•$('.checkbox:checked')：选取所有类名为checkbox且当前被选中的input元素。
2. 获取checked状态使用.prop()方法，可以获取元素的checked属性值。
例如：•$('#myCheckbox').prop('checked')：获取id为myCheckbox的复选框的checked属性值，返回true或false。
3. 设置checked状态使用.prop()方法，可以设置元素的checked属性值。
例如：•$('#myCheckbox').prop('checked', true)：设置id为myCheckbox的复选框为选中状态。
•$('#myCheckbox').prop('checked', false)：设置id为myCheckbox的复选框为未选中状态。
4. 切换checked状态使用.prop()方法，可以切换元素的checked属性值。
例如：•$('#myCheckbox').prop('checked', !$('#myCheckbox').prop('checked'))：切换id为myCheckbox的复选框的选中状态。
5. 监听checked状态改变事件使用.change()方法，可以监听元素的checked状态改变事件。
例如：$('#myCheckbox').change(function() {if ($(this).prop('checked')) {// 复选框被选中时的处理逻辑} else {// 复选框取消选中时的处理逻辑}});注意：该方法适用于绑定在复选框元素上，当复选框的checked 状态改变时触发。
jQuery的属性,事件及操作
jQuery的属性,事件及操作1.属性操作1.1 基本属性操作$("img").attr("src") 返回⽂档中所有图像的src属性值$("img").attr("src","test.jpg") 设置⽂档中所有图像的src属性值$("img").removeAttr("src") 将⽂档中图像的src属性删除$("input[type='checkbox']").prop("checked",true) 选中复选框$("input[type='checkbox']").prop("checked",false) 取消复选框$("img").removeProp("src") 删除img的src属性值attr与prop的区别:attr可以找到⾃定义的属性,prop只能找到固有的属性例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><button class="select_all">全选</button><button class="reverse">反选</button><button class="cancel">取消</button><hr><table border="1"><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr></table><script>//为"select_all"类绑定点击事件$(".select_all").click(function(){$(":checkbox").prop("checked",true);//选中所有的"checkbox"标签});//为"cancel"类绑定点击事件$(".cancel").click(function(){$(":checkbox").prop("checked",false);//取消选中的"checkbox"标签});//为"reverse"类绑定点击事件$(".reverse").click(function(){//循环每⼀个"checkbox"标签$(":checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));//把所有的"checkbox"标签的属性取反})});</script></body></html>1.2 class属性操作$("p").addClass("test") 为p元素加上"text"类$("p").removeClass("test") 从p元素中删除"test"类$("p").toggleClass("test") 如果存在就删除,否则就添加"test"类$("p").hasClass("test") 判断有没有"test",返回⼀个布尔值1.3 标签⽂本text/HTML的属性$("p").html() 返回p标签的html内容$("p").html("hello world") 设置p标签的html内容$("p").text() 返回p标签的text内容$("p").text("test") 设置p标签的text内容$("input").val() 获取⽂本框中的值$("input").val("test") 设置⽂本框中的内容2.CSS操作2.1 样式$("p").css("color") 访问查看p元素的color属性$("p").css("color","red") 设置p元素的color属性的"red"$("p").css({"color":"red","bakcground-color":"yellow"}) 设置p元素的color为"red",background属性为"yellow"(设置多个属性要⽤{}字典形式) 2.2 位置$("p").offset() 元素在当前窗⼝的相对偏移,object{top:100,left:100}$("p").offset().top 元素相对窗⼝顶部的偏移$("p").offset().left 元素相对窗⼝左侧的偏移$("p").position() 元素相对⽗元素的偏移,对可见元素有效,object{top:100,left:100}例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script><style type="text/css">*{margin:0;padding:0;}</style></head><body><div class="div1" style="width:200px;height:200px;background-color:darkblue"></div><script>var val_x=0;//初始化标签到浏览器左边框的距离var val_y=0;//初始化标签到浏览器上边框的距离//定义当⿏标悬浮在标签上⾯的时候,⿏标的样式为移动$(".div1").mouseover(function(){$(this).css("cursor","move")});//为盒⼦绑定⿏标左键按下事件$(".div1").mousedown(function(e){val_x=e.clientX;//定义标签的初始x坐标val_y=e.clientY;//定义标签的初始y坐标var $box_x=$(".div1").offset().left;//获取盒⼦相对窗⼝左侧的偏移var $box_y=$(".div1").offset().top;//获取盒⼦相对窗⼝顶侧的偏移//定义⿏标移动的操作$(document).mousemove(function(e){var move_x=e.clientX;//获取⿏标的偏移量var move_y=e.clientY;//移动窗⼝到指定的偏移量$(".div1").offset({left:$box_x+move_x-val_x,top:$box_y+move_y-val_y})});//绑定⿏标左键松开事件$(document).mouseup(function(){$(document).off();//关闭事件})});</script></body></html>这样可以使div盒⼦跟随⿏标的移动⽽移动$(window).scrollTop() 获取窗⼝滚动条的⾼度$(window).scrollLeft() 获取窗⼝滚动条的宽度$(window).scrollTop("100") 获取窗⼝滚动条的⾼度为100例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><div class="box"></div><div id="returnTop">to top</div><script>//定义窗⼝的滚动条$(window).scroll(function(){console.log($(window).scrollTop());//打印滚动条的位置//当滚动条的位置⼤于200的时候if($(window).scrollTop()>200){$("#returnTop").show();//显⽰滚动条}else{$("#returnTop").hide();//隐藏滚动条}//为返回顶部按钮绑定点击事件$("#returnTop").click(function(){$(window).scrollTop(0);//使窗⼝返回顶部})})</script></body></html>2.3 尺⼨$("p").height() 获取p元素的⾼度$("p").width() 获取p元素的宽度$("p:first").innerHeight() 获取p元素的第⼀个元素的内部区域的⾼度(不包括边框) $("p:first").innerWidth() 获取p元素的第⼀个元素的内部区域宽度(不包括边框)$("p:first").outerHeight() 获取p元素的第⼀个元素的外部区域的⾼度(默认包括边框) $("p:first").outerWidth() 获取p元素的第⼀个元素的外部区域的宽度(默认包括边框) $("p:first").outerHeight(true) 为true时包括边框例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script><style>.box{width:200px;height:100px;padding:50px;border:10px solid red;background-color:pink;margin:20px;}</style></head><body><div class="box">DIV</div><script>console.log($(".box").height());//获取盒⼦的⾼度console.log($(".box").width());//获取盒⼦的宽度console.log($(".box").innerHeight());//获取盒⼦的内部区域的⾼度(包括填充)console.log($(".box").innerWidth());//获取盒⼦的内部区域的宽度(包括填充)console.log($(".box").outerHeight());//获取盒⼦的外部区域的⾼度(包括边框)console.log($(".box").outerWidth());//获取盒⼦的外部区域的宽度(包括边框)console.log($(".box").outerHeight(true));//获取盒⼦的外部区域的⾼度(⽰包括边距) console.log($(".box").outerWidth(true));//获取盒⼦的外部区域的宽度(不包括边距) </script></body></html>显⽰如下:打印结果如下:3. ⽂档处理3.1 内部插⼊$("p").append("<p>p1</p>") 在p标签后⾯追加标签"<p>p1</p>" $("p").appendTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"后⾯$("p").prepend("<p>p1</p>") 在p标签前⾯追加标签"<p>p1</p>" $("p").prependTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"前⾯3.2 外部插⼊$("p").after("<p>p1</p>") 在p标签的同级标签后⾯插⼊标签"<p>p1</p>" $("p").before("<p>p1</p>") 在p标签的同级标签前⾯插⼊标签"<p>p1</p>" $("p").insertAfter("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"后⾯$("p").insertBefore("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"前⾯3.3 替换$("p").replaceWith("<img src='a.jpg'>") 把p标签替换成图⽚$(".div1").replaceAll("p") 把div类替换成⽂档中所有的p标签例⼦⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceWith("<p>p1</p>");//把p标签替换成p标签</script></body></html>显⽰如下:例⼦⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceAll("p");//把div类替换成⽂档中所有的p标签</script></body></html>显⽰如下:3.4 删除$("p").empty() 删除所有的p标签中的所有的⼦标签$("p").remove([expr]) 删除所有的p标签以及p标签中的⼦标签3.5 复制$("p").clone() 克隆p标签$("p").clone(true) 布尔值指定事件处理函数是否会被复制3.6 循环使⽤jQuery实现的集合循环⽅式⼀:$.each(Array,function(){function_suite})⽅式⼆:$(element).each(function(){function_suite})例⼦:使⽤each循环进⾏判断代码⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];$.each(li,function(i,v){if(v==33){return;}console.log(v);});</script></body></html>打印如下:代码⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];//定义循环,i为列表的索引,v为列表索引对应的值$.each(li,function(i,v){//当循环中的值为33时if (v==33){return false;}console.log(v);});</body></html>打印如下:结论:each的参数function内如果出现return,结束当次循环,类似于continueeach的参数function内如果出现return false,结束的是整个each循环,类似break4. 事件4.1 事件$("p").click() 单击事件$("p").dbclick() 双击事件$("p").mouseover() 当⿏标指针位于元素上⽅时触发事件$("p").mousemove() 当⿏标指针在指定的元素中移动时触发事件$("p").mouseout() 当⿏标指针从元素上移开时触发事件$("input[type='text']").focus() 元素获得焦点时,触发focus事件$("input[type='text']").blur() 元素失去焦点时,触发blur事件$("input[type='text']").change() 当元素的值发⽣改变时触发事件$("button").mousedown() 当按下⿏标时触发事件$("button").mouseup() 元素上放开⿏标按键时触发事件$(window).keydown() 当键盘或按钮被按下时触发事件$(window).keypress() 当键盘或按钮被按下时触发事件,每输⼊⼀个字符都触发⼀次事件$(window).scroll() 当⽤户滚动窗⼝的滚动条时触发事件$(window).resize() 当调整浏览器窗⼝的⼤⼩时触发事件$(window).unload() ⽤户离开页⾯时,触发事件$("input").keyup() 当按钮被松开时触发事件$("input").select() 当input元素中的⽂本被选择时触发事件$("form").submit() 当提交表单时触发事件4.2 绑定⽅式$(标签).事件(函数内容)4.3 事件委托通过其上级(可以是多层上级)事件委托,当点击这个标签时才会绑定事件在页⾯不刷新的情况下添加⼀⾏数据,⾏数据有操作按钮,点击并⽆效果,就可以通过事件委托来解决委托⽅式:$("ul").on("click","li",function(){function_suite})例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.js"></script></head><body><div id="box"><div class="item">111</div><div class="item">222</div><div class="item">333</div><div class="item">444</div><div class="item">555</div><div class="item">666</div></div><button>ADD</button><script>//为"button"按钮添加点击事件$("button").click(function(){$("#box").append("<div class='item'>777</div>");//在div标签后⾯添加⼀⾏//为"box"下的"item"类添加点击事件$("#box").on("click",".item",function(){console.log($(".item").text());//打印"item"类的⽂本})</script></body></html>4.4 event object所有的事件函数都可以传⼊event参数⽅便处理事件⽅式:$("p").click(function(event){function_suite})(event_object)的属性⽅法event.pageX 事件发⽣时,⿏标距离⽹页左上⾓的⽔平距离event.pageY 事件发⽣时,⿏标距离⽹页左上⾓的垂直距离event.type 事件的类型event.which 按下了哪⼀个键event.data 在事件对象在绑定数据,然后传⼊事件处理函数event.target 事件针对的⽹页元素event.preventDefault() 阻⽌事件的默认⾏为(⽐如点击链接,会⾃动打开新页⾯)event.stopPropagation() 停⽌事件向上层元素冒泡4.5 动画效果基点$("p").show() 显⽰隐藏的匹配元素$("p");show("slow") 参数表⽰速度,("slow","normal","fast"),也可以设置为毫秒$("p").hide() 隐藏显⽰的元素$("p").toggle() 切换显⽰/隐藏例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg">;//定义⼀张图⽚<hr><button class="hide_element">hide</button>;//定义隐藏按钮<button class="show_element">show</button>;//定义显⽰按钮<button class="toggle_element">toggle</button>;//定义切换按钮<script>//定义隐藏的点击事件$(".hide_element").click(function(){$("img").hide()});//定义显⽰的点击事件$(".show_element").click(function(){$("img").show()});//定义切换按钮的点击事件$(".toggle_element").click(function(){$("img").toggle()});</script></body></html>⽤浏览器打开的效果如下:可以看到,图⽚是显⽰的,点击"hide"按钮,图⽚就被隐藏起来,然后再点击"show"按钮,图⽚就⼜会被显⽰出来了.另外,当图⽚显⽰的时候,点击"toggle"按钮,图⽚就会隐藏,⽽当图⽚是隐藏的时候,点击"toggle"按钮,图⽚⼜会显⽰出来.4.6 滑动操作$("p").slideDown("1000") ⽤1000毫秒的时间将段落滑下$("p").slideUp("1000") ⽤1000毫秒的时间将段落滑上$("p").slideToggle("1000") ⽤1000毫秒的时间将段落滑上,滑下例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="slide_up">slide_up</button><button class="slide_down">slide_down</button><button class="toggle">toggle</button><script>//对"slide_up"类绑定点击事件$(".slide_up").click(function(){$("img").slideUp(1000);//⽤1000毫秒的时间将段落收起});//对"slide_down"类绑定点击事件$(".slide_down").click(function(){$("img").slideDown(1000);//⽤1000毫秒的时间将段落滑下});//对"toggle"类绑定点击事件$(".toggle").click(function(){$("img").slideToggle(1000);//⽤1000毫秒的时间将段落滑下或者收起 });</script></body></html>4.7 淡⼊淡出$("p").fadeIn("1000") ⽤1000毫秒时间将段落淡⼊$("p").fadeOut("1000") ⽤1000毫秒时间将段落淡出$("p").fadeToggle("1000") ⽤1000毫秒时间将段落淡⼊,淡出$("p").fadeTo("slow",0.6) ⽤慢速度将段落的透明度调整到0.6例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="fade_in">fadeIn</button><button class="fade_out">fadeOut</button><button class="fade_toggle">fadeToggle</button><button class="fade_to">fadeTo</button><script>//对"fade_in"类绑定点击事件$(".fade_in").click(function(){$("img").fadeIn(1000);//⽤1000毫秒时间将段落淡⼊});//对"fade_out"类绑定点击事件$(".fade_out").click(function(){$("img").fadeOut(1000);//⽤1000毫秒时间将段落淡出});//对"fade_toggle"类绑定点击事件$(".fade_toggle").click(function(){$("img").fadeToggle(1000);//⽤1000毫秒时间将段落淡⼊或淡出});//对"fade_to"类绑定点击事件$(".fade_to").click(function(){$("img").fadeTo("slow",0.6);//⽤慢速度将图⽚的透明度调整到0.6 });</script></body></html>4.8 页⾯载⼊页⾯载⼊,也就是当页⾯载⼊成功后⽴即运⾏的函数事件$(document).ready(function(){function_suite})也可以简写为:$(function(){function_suite})。
jq常用方法
jq常用方法jq是一个快速、简洁、灵活的JavaScript库，它允许我们轻松地操纵HTML文档，解析和处理JSON数据、处理表单和事件等。
在使用jq时，我们经常用到一些常用方法，那么接下来，我们就来一一讲解。
1. 选择器在jq中，选择器是最为基本的部分，它可以让我们快速地筛选元素，比如：- $("#id")：根据id选择元素。
- $(".class")：根据class选择元素。
- $("tag")：根据标签名选择元素。
- $("element").find(selector)：在指定元素中查找符合条件的元素。
2. 事件绑定在jq中，我们可以通过事件绑定来实现在指定元素上触发事件。
常用的事件有：- $(selector).click(function(){})：点击元素触发事件。
- $(selector).mouseover(function(){})：鼠标移上元素触发事件。
- $(selector).submit(function(){})：表单提交触发事件。
- $(selector).focus(function(){})：元素获得焦点触发事件。
3. DOM操作在jq中，我们可以通过一些方法来快速地操作DOM元素，比如：- $(selector).html()：获取或设置元素的HTML内容。
- $(selector).text()：获取或设置元素的文本内容。
- $(selector).attr()：获取或设置元素的属性。
- $(selector).addClass()：为元素添加class。
- $(selector).remove()：删除指定元素。
4. 动画效果在jq中，我们可以通过动态效果来增加网页的交互性，比如：- $(selector).show(speed,callback)：显示元素，可以设置速度和回调函数。
jq 常用方法
jq 常用方法
1.选择器：使用选择器来定位元素，可以使用类、ID、属性等选择器。
2.事件处理：使用事件处理函数来处理用户的行为，例如单击、鼠标悬停等。
3.样式操作：使用CSS样式操作来改变元素的外观，例如改变颜色、背景等。
4.属性操作：使用属性操作来读取或设置元素的属性，例如设置表单的值、获取图片的地址等。
5.DOM操作：使用DOM操作来动态地更新或添加元素，例如创建新的元素、删除元素等。
6.Ajax异步请求：使用Ajax来与服务器进行数据交互，例如获取数据、提交表单等。
7.动画效果：使用动画效果来为元素添加过渡效果，例如淡入淡出、滑动等。
8.插件扩展：使用第三方插件来扩展jq的功能，例如轮播图、图片放大等。
9.表单验证：使用表单验证插件来验证用户输入的数据，例如验证手机号码、邮箱等。
10.工具方法：使用工具方法来简化代码，例如遍历对象、数组等。
- 1 -。
jquery中prop用法
jquery中prop用法在jQuery中，prop()方法用于获取或设置被选元素的属性值。
1. 获取属性值：语法：`$(selector).prop(attribute)`参数：- selector: 选择器，用于选择要获取属性值的元素。
- attribute: 属性名称，用于指定要获取的属性。
示例：```javascript// 获取input元素的value属性值var value = $("input").prop("value");```2. 设置属性值：语法：`$(selector).prop(attribute, value)`参数：- selector: 选择器，用于选择要设置属性值的元素。
- attribute: 属性名称，用于指定要设置的属性。
- value: 属性值，用于指定要设置的属性值。
示例：```javascript// 设置input元素的value属性值$("input").prop("value", "Hello World");```需要注意的是，prop()方法在处理布尔属性（如checked、disabled等）时，会返回布尔值，而不是对应的字符串值。
使用.prop("checked")获取checked属性的值，则返回true或false。
此外，还可以使用prop()方法来一次性设置多个属性值，如`$(selector).prop({attribute1: value1, attribute2: value2})`。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jquery操作checked属性以及disabled属性的多种方法
这篇文章主要介绍了jquery控制checked属性以及disabled属性的多种方法,下面只提到checked,其实disabled在jquery里的用法和checked是一模一样的,需要的朋友可以参考下
下边两种写法没有任何区别只是少了些代码而已...
复制代码代码如下:
<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked="checked" />
jquery判断checked的三种方法:
复制代码代码如下:
.attr('checked'): //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'): //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
复制代码代码如下:
$("#cb1").attr("checked","checked");
$("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
复制代码代码如下:
$("#cb1").prop("checked",true); //很简单就不说了哦
$("#cb1").prop({checked:true}); //map键值对
$("#cb1").prop("checked",function(){
return true; //函数返回true或false
});
$("#cb1").prop("checked","checked");
更多参考:/prop/
复制代码代码如下:
<html>
<head>
<title>测试</title>
<style type="text/css">
</style>
<!--1.62可以修改1.42 1.52 1.7来测试-->
<script type="text/javascript"
src="/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
<script type="text/javascript">
$(function(){
//判断checked
// var a=$("#cb1").attr('checked'); //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
// var b=$("#cb1").prop('checked'); //1.6+:true/false
var c=$("#cb1").is(':checked'); //所有版本:true/false
// alert(a);
// alert(b);
alert(c);
//赋值前两个所有的jquery版本都支持 prop只有jquery1.6+支持
// $("#cb1").attr("checked","checked");//1.5-
// $("#cb1").attr("checked",true);//1.5-
// $("#cb1").prop("checked","checked");//1.6+(整理的时候把这个忘记啦)
// $("#cb1").prop("checked",true);//1.6+
// $("#cb1").prop({checked:true});//1.6+
// $("#cb1").prop("checked",function(){
// return true;//1.6+
// });
})();
</script>
</head>
<body>
<!--赋值的时候记得去掉checked-->
<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked="checked"/>
</body>
</html>。