jQuery 操作checkbox选择
jQuery课堂笔记(选择器)
jQuery选择器总结jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div") 选择所有的div标签元素，返回div元素数组$(".myClass") 选择使用myClass类的css的所有元素$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")层叠选择器：$("form input") 选择所有的form元素中的input元素$("#main > *") 选择id值为main的所有的子元素$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签基本过滤选择器：$("tr:first") 选择所有tr元素的第一个$("tr:last") 选择所有tr元素的最后一个$("input:not(:checked) + span")过滤掉：checked的选择器的所有的input元素$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素$("td:gt(4)") 选择td元素中序号大于4的所有td元素$("td:ll(4)") 选择td元素中序号小于4的所有的td元素$(":header")$("div:animated")内容过滤选择器：$("div:contains('John')") 选择所有div中含有John文本的元素$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组$("div:has(p)") 选择所有含有p标签的div元素$("td:parent") 选择所有的以td为父节点的元素数组可视化过滤选择器：$("div:hidden") 选择所有的被hidden的div元素$("div:visible") 选择所有的可视化的div元素属性过滤选择器：$("div[id]") 选择所有含有id属性的div元素$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素$("input[name^='news']") 选择所有的name属性以'news'开头的input元素$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素$("input[name*='man']") 选择所有的name属性包含'news'的input 元素$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素子元素过滤选择器：$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")$("div span:first-child") 返回所有的div元素的第一个子节点的数组$("div span:last-child") 返回所有的div元素的最后一个节点的数组$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组表单元素选择器：$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button$(":text") 选择所有的text input元素$(":password") 选择所有的password input元素$(":radio") 选择所有的radio input元素$(":checkbox") 选择所有的checkbox input元素$(":submit") 选择所有的submit input元素$(":image") 选择所有的image input元素$(":reset") 选择所有的reset input元素$(":button") 选择所有的button input元素$(":file") 选择所有的file input元素$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域表单元素过滤选择器：$(":enabled") 选择所有的可操作的表单元素$(":disabled") 选择所有的不可操作的表单元素$(":checked") 选择所有的被checked的表单元素$("select option:selected") 选择所有的select 的子元素中被selected的元素选取一个 name 为”S_03_22″的input text框的上一个td的text值$(”input[@ name =S_03_22]“).parent().prev().text()名字以”S_”开始，并且不是以”_R”结尾的$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)一个名为 radio_01的radio所选的值$(”input[@ name =radio_01][@checked]“).val();$("A B") 查找A元素下面的所有子节点，包括非直接子节点$("A>B") 查找A元素下面的直接子节点$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点例子：找到表单中所有的 input 元素HTML 代码:<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset></form><input name="none" />jQuery 代码:$("form input")结果:[ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子节点例子：匹配表单中所有的子级input元素。
jQuery对select和option操作小结
1.遍历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''>UPSGround</option>").appendTo($("select[@name=ISHIPTYPE]"));}}2.取得下拉選單的選取值$(#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操作select下拉框的多种方法(选中,取值,赋值等)
Query获取Select选择的Text和Value:语法解释：1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text(); //获取Select 选择的Text3. var checkValue=$("#select_id").val(); //获取Select选择的Value4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值jQuery设置Select选择的 Text和Value:语法解释：1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select 的Text值为jQuery的项选中jQuery添加/删除Select的Option项：语法解释：1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Optionjquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;获取值：文本框，文本区域：$("#txt").attr("value")；多选框 checkbox：$("#checkbox_id").attr("value")；单选组radio： $("input[@type=radio][@checked]").val();下拉框select： $('#sel').val();控制表单元素：文本框，文本区域：$("#txt").attr("value",'');//清空内容$("#txt").attr("value",'11');//填充内容多选框checkbox： $("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);//打勾if($("#chk1").attr('checked')==undefined) //判断是否已经打勾单选组 radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option$("#sel").empty()；//清空下拉框----------------------------------------------------------------------------------------------------//遍历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获取checkbox选中项等操作及注意事项
jQuery获取checkbox选中项等操作及注意事项今天在做⼀个项⽬功能时需要显⽰checkbox选项来让⽤户进⾏选择，由于前端不是很熟练，所以做了⼀个简单的Demo，其中遇到⼀些⼩问题，特记录下来，希望能帮到遇到类似问题的同学们。
1. 获取checkbox的选中项2. checkbox选项的全选反选操作⽤于测试的checkbox代码段：<div><input type="checkbox" name="abc" value="⼀年级" id="in1" checked="checked" /><label for="in1">⼀年级</label><input type="checkbox" name="abc" value="⼆年级" id="in2" /><label for="in2">⼆年级</label><input type="checkbox" name="abc" value="三年级" id="in3" /><label for="in3">三年级</label><input type="checkbox" name="abc" value="四年级" id="in4" /><label for="in4">四年级</label><input type="checkbox" name="abc" value="五年级" id="in5" /><label for="in5">五年级</label><input type="checkbox" name="abc" value="六年级" id="in6" /><label for="in6">六年级</label><input type="checkbox" name="abc" value="七年级" id="in7" /><label for="in7">七年级</label><input type="checkbox" name="abc" value="⼋年级" id="in8" /><label for="in8">⼋年级</label></div>⼀：⾸先来说第⼀点，获取checkbox的选中项。
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})。
jquery和bootstrap获取checkbox选中的多行数据
jquery和bootstrap获取checkbox选中的多⾏数据在项⽬中,经常遇到,于是整理引⽤bootstrap的js和css代码解释:$("#dgFlowList").find(":checkbox:checked").each(function(){ var val = $(this).parents("tr").text(); data.push(val);});代码:1<html>2<head>3<title>多选</title>4<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">5<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">6<script src="js/jquery.min.js"></script>7<script src="js/app.js"></script>8<script src="bootstrap/js/bootstrap.js"></script>9<script type="text/javascript">10 $(document).ready(function () {11 $("#select_button").on('click',function(){12var checkids = [];13var data = [];14 $("input[name='ckb']:checked").each(function(i){15 checkids[i] = $(this).val();16 });17if(checkids.length<=0){18 $.notify('请选择请假单',{status: "danger"});19 }else{20 console.log(checkids);21 $("#dgFlowList").find(":checkbox:checked").each(function(){22var val = $(this).parents("tr").text();23 data.push(val);24 });25 console.log(data);26 }27 });28 });2930function deleteCurrentRow(obj){31var tr=obj.parentNode.parentNode;32var tbody=tr.parentNode;33 tbody.removeChild(tr);34//只剩⾏⾸时删除表格35if(tbody.rows.length==0) {36 tbody.parentNode.removeChild(tbody);37 }38 }39</script>4041</head>42<body>43<table cellspacing="0" rules="all" bordercolor="#CCCCCC" border="1" id="dgFlowList"44 style="border-color:#CCCCCC;border-width:1px;border-style:solid;width:98%;border-collapse:collapse;MARGIN: 5px 0px">45<tr class="DataGrid_HeaderStyle" nowrap="nowrap" align="Center">46<th></th><th>流程名称</th><th>表单名称</th><th>操作</th>47</tr>48<tr>49<td><input type="checkbox" name="ckb" value="1"></td>50<td style="width:35%;">请假单1</td>51<td style="width:35%;">请假单</td>52<td align="Center" style="width:20%;">53<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>54</td>55</tr>56<tr>57<td><input type="checkbox" name="ckb" value="2"></td>58<td style="width:35%;">请假单2</td>59<td style="width:35%;">请假单</td>60<td align="Center" style="width:20%;">61<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>62</td>63</tr>64<tr>65<td><input type="checkbox" name="ckb" value="3"></td>66<td style="width:35%;">请假单3</td>67<td style="width:35%;">请假单</td>68<td align="Center" style="width:20%;">69<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>70</td>71</tr>72<tr>73<td><input type="checkbox" name="ckb" value="4"></td>74<td style="width:35%;">请假单4</td>75<td style="width:35%;">请假单</td>76<td align="Center" style="width:20%;">77<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>78</td>79</tr>80<tr>81<td><input type="checkbox" name="ckb" value="5"></td>82<td style="width:35%;">请假单5</td>83<td style="width:35%;">请假单</td>84<td align="Center" style="width:20%;">85<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>86</td>87</tr>88</table>89<div align="center">90<button type="button" class="btn btn-primary" id="select_button">多选</button>91</div>92</body>93</html>app.js代码,是为notify写的,于功能没有多⼤的关系1/**2 * Notify Addon definition as jQuery plugin3 * Adapted version to work with Bootstrap classes4 * More information /docs/addons_notify.html5*/67 (function ($, window, document) {89var containers = {},10 messages = {},1112 notify = function (options) {1314if ($.type(options) == 'string') {15 options = {message: options};16 }1718if (arguments[1]) {19 options = $.extend(options, $.type(arguments[1]) == 'string' ? {status: arguments[1]} : arguments[1]);20 }2122return (new Message(options)).show();23 },24 closeAll = function (group, instantly) {25if (group) {26for (var id in messages) {27if (group === messages[id].group) messages[id].close(instantly);28 }29 } else {30for (var id in messages) {31 messages[id].close(instantly);32 }33 }34 };3536var Message = function (options) {3738var $this = this;3940this.options = $.extend({}, Message.defaults, options);4142this.uuid = "ID" + (new Date().getTime()) + "RAND" + (Math.ceil(Math.random() * 100000));43this.element = $([44// alert-dismissable enables bs close icon45 '<div class="uk-notify-message alert-dismissable">',46 '<a class="close">×</a>',47 '<div>' + this.options.message + '</div>',48 '</div>'4950 ].join('')).data("notifyMessage", this);5152// status53if (this.options.status) {54this.element.addClass('alert alert-' + this.options.status);55this.currentstatus = this.options.status;56 }5758this.group = this.options.group;5960 messages[this.uuid] = this;6162if (!containers[this.options.pos]) {63 containers[this.options.pos] = $('<div class="uk-notify uk-notify-' + this.options.pos + '"></div>').appendTo('body').on("click", ".uk-notify-message", function () {64 $(this).data("notifyMessage").close();65 });66 }67 };686970 $.extend(Message.prototype, {7172 uuid: false,73 element: false,74 timout: false,75 currentstatus: "",76 group: false,7778 show: function () {7980if (this.element.is(":visible")) return;8182var $this = this;8384 containers[this.options.pos].show().prepend(this.element);8586var marginbottom = parseInt(this.element.css("margin-bottom"), 10);8788this.element.css({89 "opacity": 0,90 "margin-top": -1 * this.element.outerHeight(),91 "margin-bottom": 092 }).animate({"opacity": 1, "margin-top": 0, "margin-bottom": marginbottom}, function () {9394if ($this.options.timeout) {9596var closefn = function () {97 $this.close();98 };99100 $this.timeout = setTimeout(closefn, $this.options.timeout);101102 $this.element.hover(103function () {104 clearTimeout($this.timeout);105 },106function () {107 $this.timeout = setTimeout(closefn, $this.options.timeout);108 }109 );110 }111112 });113114return this;115 },116117 close: function (instantly) {118119var $this = this,120 finalize = function () {121 $this.element.remove();122123if (!containers[$this.options.pos].children().length) {124 containers[$this.options.pos].hide();125 }126127delete messages[$this.uuid];128 };129130if (this.timeout) clearTimeout(this.timeout);131132if (instantly) {133 finalize();134 } else {135this.element.animate({136 "opacity": 0,137 "margin-top": -1 * this.element.outerHeight(),138 "margin-bottom": 0139 }, function () {140 finalize();141 });142 }143 },144145 content: function (html) {146147var container = this.element.find(">div");148149if (!html) {150return container.html();151 }152153 container.html(html);154155return this;156 },157158 status: function (status) {159160if (!status) {161return this.currentstatus;162 }163164this.element.removeClass('alert alert-' + this.currentstatus).addClass('alert alert-' + status); 165166this.currentstatus = status;167168return this;169 }170 });171172 Message.defaults = {173 message: "",174 status: "normal",175 timeout: 5000,176 group: null,177 pos: 'top-center'178 };179180181 $["notify"] = notify;182 $["notify"].message = Message;183 $["notify"].closeAll = closeAll;184185return notify;186187 }(jQuery, window, document));View Code。
jqGrid参数
ajaxGridOptions
object
本选项用来设置全局的Ajax设置。注意：这个选项会覆盖当前所有的ajax设置，包括ajax的error、complete以及beforeSend事件。
默认值:empty object
该属性可以修改
该属性不能修改
hidegrid
boolean
设置grid的隐藏/显示按钮是否可用。
默认值:true
该属性不能修改
hoverrows
boolean
设置为false，在grid的数据行中鼠标悬浮被禁用。
默认值:false
默认值:false
该属性不能修改
forceFit
boolean
如果设置为true，并且用户改变了列宽度，那么右边临近的列宽度会自动调整以适应grid的整体宽度。这种情况下，是没有水平滚动条的。
注意：本选项与shrinkToFit选项不相容。如果shrinkToFit设置为false，那么forceFit的设置将被忽略。
direction
string
确定grid中文本显示的方向。默认ltr表示从左道右。还有一个可选值是rtl表示从右到左。
本选项只在FireFox 3.x和IE >=6的浏览器有效。当前Safai和Google Chrome、Opera不完全支持“rtl”。FireFox默认设置是不支持RTL的，但是可以通过修改FireFox的 layout.scrollbar.side设置为1来支持。本属性是在jqGrid v3.6版本中新增加的。
当然，使用也有限制，设置为true之后，不能使用treeGrid，subGrid或者afterInsertRow事件。
jq常用方法
jq常用方法1.选择器：使用$()函数选择HTML文档中的元素，例如$('#id')、$('.class')、$('element')等。
2.事件处理：使用on()函数添加事件处理程序，例如$('element').on('click',function(){...})。
3.属性操作：使用attr()函数获取或设置元素的属性，例如$('element').attr('name','value')。
4.CSS操作：使用css()函数获取或设置元素的CSS属性，例如$('element').css('color','red')。
5.DOM操作：使用append()、prepend()、after()、before()等函数插入或移动HTML元素，例如$('element').append('<div>...</div>')。
6.遍历：使用each()函数遍历匹配的元素，例如$('element').each(function(){...})。
7. AJAX操作：使用$.ajax()函数向服务器发送请求，例如$.ajax({type:'POST',url:'url',data:{...},success:function() {...},error:function(){...}})。
8. 动画效果：使用animate()函数实现元素的动画效果，例如$('element').animate({property:value},speed,function(){...} )。
9. 数据缓存：使用data()函数在元素上存储数据，例如$('element').data('name','value')。
jQuery中选择器的基础使用教程
jQuery的选择器非常强大,使你可以轻松选取页面中任何一个对象,下面我们就主要针对DOM操作来看一下jQuery中选择器的基础使用教程,需要的朋友可以参考下其实选择器就像开罐器一样，会用这个工具的人，自然吃的到甜头，但不会用这个工具的人，不管罐头里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么强大，也只能看着荧幕，而不知该如何下手，不过虽然选择器不难，也容易上手，但老实说，我用了一年多下来，还是觉得自己只有用皮毛而已，所以希望藉着这一系列的笔记，让自己能更长进一些DOM怎么吃DOM可以说是JavaScript与网页之间的联系管道，他提供了一个模型，让JavaScript 能藉由此模型来改变或操作整个网页，<div class="one"> <p>two_1</p> <p>two_2</p> <p>two_2</p></div>我这边就简单介绍一下DOM模型，有个元素class名为one的是父元素，底下有三个儿子元素<p>，每个元素都视为一个节点，也可以看成一个树形图，因为我认为有些东西是Google会讲得比我好，所以还想知道更多纠结的父子关系...，可以去这，那边有很好的说明，这边就不多加解释，而当Jquery利用选择器抓取到DOM元素以后，就会将他包装成一个Jquery object，并且回传$('#MyDiv')<-- 他是一个物件这里有个观念十分重要，因为许多初学者，甚至是一些从Jquery开始学起Javascript的开发者(包括我)，常常会把以下两个程序码搞混在一起//原生JavaScript取id为a的divvar result1 = document.getElementById('a');console.log(result1);//用jquery取id为a的divvar result2=$('#a');console.log(result2);如果你执行这段程序码出来，妳会发现console出来的结果，用JavaScript取出来的结果是DOM，可是一样的div用Jquery取出来的却是个包装过后的物件，换句话说，你不能直接对包装过后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人会说，那意思是不是说以后只能河水不犯井水，往后互不干涉，从此分道扬镳呢? 到也不是var b=$('#a')[0];只要跟上述程序码一样就可以取得DOM的元素了$()工厂不管是如何选择，我们都会用相同的函式$()，就如之前所讲的，他能接受CSS选择器的语法做为参数，而最主要的三个参数分别为tag name、ID与class，当然，这三个参数可以再与其他CSS语法做结合//tag name$('div')//ID$('#myId')//class$('.myClass')而上述函式都会如同第一章所介绍的，都有隐式迭代的特色，而为了做到跨览器的支援，Jquery的选择器包含了CSS1-3，所以不用担心一些比较特别的浏览器(对就是IE6)不能执行，除非addClass('color1');//替index为1的tr加上class$('tr:nth-child(1)').addClass('color2');这里很特别的是，为什么都是替index为1的tr加上class，却是不同的结果呢?，因为:eq()算是一个JavaScript阵列，index是0起始，所以才会选到第二个，而nth-child()是CSS选择器的一种，所以index是以1起始，选到的就是第一个，以下的范例意思相同/3PrJt///选择偶数的tr增加class$('tr:even').addClass('color1');//选择偶数的tr增加class$('tr:nth-child(even)').addClass('color2');就如同刚刚所讲的，index起始不同(JavaScript起始为0，CSS为1)，所以虽然都是取偶数，但却是不同列再来就一些FORM常用的选择器/qcXSy/3/$(':button').click(function(){ alert('a');});这就代表说绑定所有的bitton一个click事件，其他还有像:input、:button、:enabled、:disabled都可以跟其他选择器一起组合成新的选择器更加强大的.filter()当有时候一般的选择器已经不能不能满足我们复杂的DOM时，例如要抓div的爸爸的哥哥的儿子的妹婿的二姑的大舅时...，这时候还可以用一个方法filter，这个方法特别的地方在于他可以带function进去/wGz3k/可以看到function里面限制return index == 1才可以增加CSS，这个好处就在于可以在里面做很多复杂的逻辑运算当然Jquery还有太多太多选择器可以使用，像还有.next()、.parent()、.children()一般常用的这几个，其实就很够用了我认为，再多的选择器有时候好像只是展示不同的写法，但其实只要能抓取到你想要的元素，解决问题你甚至想要这样写$('div').children().children().children().children().children()也不会有人说不行..实例一个网站中有10种的文章分类，我们设计一个类似WordPress显示各文章分类的名称及其文章数量的栏目，当用户进入一个页面时，默认显示前面5个分类的名称以及最后一个分类——其他分类，用户可以通过单击“显示全部分类”按钮来显示全部分类，同时一些推荐的分类会加下划线显示，按钮中的文字会改变为“显示部分分类”，再次单击“显示部分分类”后会回到之前的页面状态。
Jquery中的CheckBox、RadioButton、DropDownList、CheckBoxList、RadioButtonList的取值赋值
Jquery 中的CheckBox、RadioButton、DropDownList、CheckBoxList、RadioButtonList的取值赋值随着Jquery的作用越来越大，使用的朋友也越来越多。
在Web中，由于CheckBox、Radiobutton 、DropDownList等控件使用的频率比较高，就关系到这些控件在Jquery中的操作问题。
由于Jquery的版本更新很快，代码的写法也改变了许多，以下Jquery代码适query1.4版本以上。
Radio1.获取选中值，三种方法都可以：$('input:radio:checked').val()；$("input[type='radio']:checked").val();$("input[name='rd']:checked").val();2.设置第一个Radio为选中值：$('input:radio:first').attr('checked', 'checked');或者$('input:radio:first').attr('checked', 'true');注：attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)3.设置最后一个Radio为选中值：$('input:radio:last').attr('checked', 'checked');或者$('input:radio:last').attr('checked', 'true');4.根据索引值设置任意一个radio为选中值：$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....或者$('input:radio').slice(1,2).attr('checked', 'true');5.根据Value值设置Radio为选中值$("input:radio[value='rd2']").attr('checked','true');或者$("input[value='rd2']").attr('checked','true');6.删除Value值为rd2的Radio$("input:radio[value='rd2']").remove();7.删除第几个Radio$("input:radio").eq(索引值).remove();索引值=0,1,2....如删除第3个Radio:$("input:radio").eq(2).remove(); 8.遍历Radio$('input:radio').each(function(index,domEle){//写入代码});DropDownList1.获取选中项：获取选中项的Value值：$('select#sel option:selected').val();或者$('select#sel').find('option:selected').val();获取选中项的Text值：$('select#seloption:selected').text();或者$('select#sel').find('option:selected').text(); 2.获取当前选中项的索引值：$('select#sel').get(0).selectedIndex;3.获取当前option的最大索引值：$('select#sel option:last').attr("index")4.获取DropdownList的长度：$('select#sel')[0].options.length;或者$('select#sel').get(0).options.length;5.设置第一个option为选中值：$('select#sel option:first').attr('selected','true')或者$('select#sel')[0].selectedIndex = 0;6.设置最后一个option为选中值：$('select#sel option:last).attr('selected','true')7.根据索引值设置任意一个option为选中值：$('select#sel')[0].selectedIndex =索引值;索引值=0,1,2.... 8.设置Value=4 的option为选中值：$('select#sel').attr('value','4');或者$("select#sel option[value='4']").attr('selected', 'true');9.删除Value=3的option：$("select#sel option[value='3']").remove();10.删除第几个option：$(" select#sel option ").eq(索引值).remove();索引值=0,1,2....如删除第3个Radio:$(" select#sel option ").eq(2).remove();11.删除第一个option：$(" select#sel option ").eq(0).remove();或者$("select#sel option:first").remove();12. 删除最后一个option：$("select#sel option:last").remove();13. 删除dropdownlist:$("select#sel").remove();14.在select后面添加一个option:$("select#sel").append("<option value='6'>f</option>");15. 在select前面添加一个option:$("select#sel").prepend("<option value='0'>0</option>");16. 遍历option：$(' select#sel option ').each(function (index, domEle) { //写入代码});CheckBox1.获取单个checkbox选中项(三种写法)：$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val();2.获取多个checkbox选中项：$('input:checkbox').each(function() {if ($(this).attr('checked') ==true) {alert($(this).val());}});或者$('input:checkbox').map(function () {return $(this).val();}).get().join(',') ;3.设置第一个checkbox 为选中值：$('input:checkbox:first').attr("checked",'checked');或者$('input:checkbox').eq(0).attr("checked",'true');4.设置最后一个checkbox为选中值：$('input:radio:last').attr('checked', 'checked');或者$('input:radio:last').attr('checked', 'true');5.根据索引值设置任意一个checkbox为选中值：$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....或者$('input:radio').slice(1,2).attr('checked', 'true');6.选中多个checkbox：同时选中第1个和第2个的checkbox：$('input:radio').slice(0,2).attr('checked','true');7.根据Value值设置checkbox为选中值：$("input:checkbox[value='1']").attr('checked','true');8.删除Value=1的checkbox：$("input:checkbox[value='1']").remove();9.删除第几个checkbox：$("input:checkbox").eq(索引值).remove();索引值=0,1,2....如删除第3个checkbox:$("input:checkbox").eq(2).remove();10.遍历checkbox：$('input:checkbox’).each(function (index, domEle) {//写入代码});11.全部选中$('input:checkbox').each(function() {$(this).attr('checked', true);});12.全部取消选择：$('input:checkbox').each(function () {$(this).attr('checked',false);});RadioButtonListvar userSex = $("input[name='rblSex']:checked").val(); CheckBoxList//给CheckBoxList添加alt属性foreach(ListItem li in this.cblNeedTestRoom.Items) { li.Attributes.Add("alt", li.Value); }function GetCheckBoxListValue() {var valuelist = ""; //保存checkbox选中值//遍历name以cblNeedTestRoom开头的checkbox$("input[name^='cblNeedTestRoom']").each(function() { if (this.checked) {//$(this):当前checkbox对象;//$(this).parent("span"):checkbox父级span对象valuelist += $(this).parent("span").attr("alt") + ","; }});if (valuelist.length > 0) {//得到选中的checkbox值序列,结果为400,398valuelist = valuelist.substring(0, valuelist.length - 1);}return valuelist;}。
JQuery判断radio单选框是否选中并获取值的方法
JQuery判断radio单选框是否选中并获取值的方法方法一：使用prop(方法判断单选框是否选中可以使用prop(方法来获取radio单选框的checked属性。
如果该属性为true，则表示单选框选中，否则为未选中。
代码如下：```javascriptif ($('input[name="radioName"]').prop("checked"))var value = $('input[name="radioName"]').val(;console.log("单选框选中，值为：" + value);} elseconsole.log("单选框未选中");```其中，radioName是单选框的name属性，value是选中的值。
方法二：使用is(方法判断单选框是否选中可以使用is(方法来判断radio单选框是否被选中，并获取选中的值。
代码如下：```javascriptif ($('input[name="radioName"]').is(":checked"))var value = $('input[name="radioName"]:checked').val(;console.log("单选框选中，值为：" + value);} elseconsole.log("单选框未选中");```其中，radioName是单选框的name属性，value是选中的值。
方法三：使用each(方法遍历单选框并判断是否选中可以使用each(方法来遍历radio单选框，并判断是否选中。
代码如下：```javascript$('input[name="radioName"]').each(functioif ($(this).is(":checked"))var value = $(this).val(;console.log("单选框选中，值为：" + value);} elseconsole.log("单选框未选中");}});```其中，radioName是单选框的name属性，value是选中的值。
jQuery的DOM操作小案例
jQuery的DOM操作⼩案例案例⼀：下拉列表左右选择<body><div><select style="width:60px" multiple size="10" id="leftID"><option>选项A</option><option>选项B</option><option>选项C</option><option>选项D</option><option>选项E</option></select></div><div style="position:absolute;left:100px;top:60px"><input type="button" value="批量右移" id="rightMoveID"/></div><div style="position:absolute;left:100px;top:90px"><input type="button" value="全部右移" id="rightMoveAllID"/></div><div style="position:absolute;left:220px;top:20px"><select multiple size="10" style="width:60px" id="rightID"></select></div></body><script type="text/javascript">//双击右移//定位左边的下拉框，同时添加双击事件$("#leftID").dblclick(function() {//获取双击时选中的option标签var $option = $("#leftID option:selected");//将选中的option标签移动到右边的下拉框中$("#rightID").append($option);});//批量右移//定位批量右移按钮，同时添加单击事件$("#rightMoveID").click(function() {//获取左边下拉框中选中的option标签var $option = $("#leftID option:selected");//将选中的option标签移动到右边的下拉框中$("#rightID").append($option);});//全部右移//定位全部右移按钮，同时添加单击事件$("#rightMoveAllID").click(function() {//获取左边下拉框中所有的option标签var $option = $("#leftID option");//将选中的option标签移动到右边的下拉框中$("#rightID").append($option);});</script>案例⼆：动态添加标签事件<body><table id="tableID" border="1" align="center" width="60%"><tr><th>⽤户名</th><th>密码</th><th>操作</th></tr><tbody id="tbodyID"></tbody></table><hr />⽤户名：<input type="text" id="usernameID"/>密码：<input type="text" id="passwordID"/><input type="button" value="增加" id="addID"/></body><script type="text/javascript">//定位"增加"按钮，同时添加单击事件$("#addID").click(function() {//获取⽤户名和密码的值var username = $("#usernameID").val();var password = $("#passwordID").val();//去掉⼆边的空格username = $.trim(username);password = $.trim(password);//如果⽤户名或密码没有填if (username.length == 0 || password.length == 0) {//提⽰⽤户alert("⽤户名或密码没有填");} else {//创建1个tr标签var $tr = $("<tr></tr>");//创建3个td标签var $td1 = $("<td>" + username + "</td>");var $td2 = $("<td>" + password + "</td>");var $td3 = $("<td></td>");//创建input标签，设置为删除按钮var $del = $("<input type='button' value='删除'>");//为删除按钮动态添加单击事件$del.click(function() {//删除按钮所有的⾏，即$tr对象$tr.remove();});//将删除按钮添加到td3标签中$td3.append($del);//将3个td标签依次添加到tr标签中$tr.append($td1);$tr.append($td2);$tr.append($td3);//将tr标签添加到tbody标签中$("#tbodyID").append($tr);//清空⽤户名和密码⽂本框中的内容$("#usernameID").val("");$("#passwordID").val("");}});</script>案例三：全选反选<body><table border="1" align="center"><tr><th>状态</th><th>⽤户名</th></tr><tbody><tr><td><input type="checkbox"/></td><td>赵</td></tr><tr><td><input type="checkbox"/></td><td>钱</td></tr><tr><td><input type="checkbox"/></td><td>孙</td></tr></tbody><tfoot><tr><td><input type="checkbox"/>全选</td><td><input type="button" value="全反选"/></td></tr></tfoot></table><script type="text/javascript">//全选中和全取消//定位tfoot中的全选复选框，同时添加单击事件$("tfoot input:checkbox").click(function() {//获取该全选复选框的状态var flag = this.checked;//如果选中if (flag) {//将tbody中的所有复选框选中$("tbody input:checkbox").attr("checked", "checked");//如果未选中} else {//将tbody中的所有复选框取消$("tbody input:checkbox").removeAttr("checked");}});//全反选//定位tfoot标签中的全反选按钮，同时添加单击事件$("tfoot input:button").click(function() {//将tbody标签中的所有选中的复选框失效$("tbody input:checkbox:checked").attr("disabled","disabled");//将tbody标签中的所有⽣效的复选框选中$("tbody input:checkbox:enabled").attr("checked", "checked");//将tbody标签中的所有⽣效的复选框⽣效且设置为未选中 $("tbody input:checkbox:disabled").removeAttr("disabled") .removeAttr("checked");});</script></body>案例四：输⼊框暗影提⽰<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css">.myClass {color: inactivecaption}</style><script type="text/javascript" src="../js/jquery-1.8.2.js"></script></head><body><table border="1" align="center"><tr><th>⽤户名</th><td><input type="text" value="输⼊⽤户名"/></td></tr></table><script type="text/javascript">//当浏览器加载web页⾯时$(function() {//将⽂本框中的⽂本样式改变$(":text").addClass("myClass");});//当光标定位⽂本框时$(":text").focus(function() {//清空⽂本框中的内容$(this).val("");//删除⽂本框的样式$(this).removeClass("myClass");});//当⽂本框失去焦点时$(":text").blur(function() {//获取⽂本框中填⼊的内容var content = $(this).val();//去⼆边的空格content = $.trim(content);//如果没填了内容if (content.length == 0) {//在⽂本框显⽰提⽰信息$(":text").val("输⼊⽤户名");//设置⽂本框中⽂本的样式$(":text").addClass("myClass");}});</script></body>。
jquery中的val方法
jquery中的val方法JQuery中的val方法是一个非常常用的方法，它可以获取或设置表单元素的值。
在本文中，我们将深入探讨JQuery中的val方法，包括其语法、用法和一些实际应用。
语法JQuery中的val方法的语法如下：$(selector).val(value)其中，selector是要操作的表单元素的选择器，value是要设置的值。
如果没有传递value参数，则该方法将返回当前表单元素的值。
用法JQuery中的val方法可以用于各种表单元素，包括文本框、下拉框、单选框和复选框等。
下面是一些常见的用法示例：1. 获取文本框的值可以使用以下代码获取文本框的值：var value = $("#myInput").val();其中，#myInput是文本框的ID。
2. 设置文本框的值可以使用以下代码设置文本框的值：$("#myInput").val("new value");其中，#myInput是文本框的ID，"new value"是要设置的新值。
3. 获取下拉框的选中值可以使用以下代码获取下拉框的选中值：var value = $("#mySelect").val();其中，#mySelect是下拉框的ID。
4. 设置下拉框的选中值可以使用以下代码设置下拉框的选中值：$("#mySelect").val("option2");其中，#mySelect是下拉框的ID，"option2"是要选中的选项的值。
5. 获取单选框或复选框的选中状态可以使用以下代码获取单选框或复选框的选中状态：var checked = $("#myCheckbox").prop("checked");其中，#myCheckbox是单选框或复选框的ID。
Jquery Jqgrid使用手册
一、电子信息技术 (2)（一）软件.................................................................................................... 错误！未定义书签。
（二）微电子技术 ...................................................................................... 错误！未定义书签。
（三）计算机及网络技术 ............................................................................ 错误！未定义书签。
（四）通信技术............................................................................................ 错误！未定义书签。
（五）广播电视技术 .................................................................................. 错误！未定义书签。
（六）新型电子元器件 ................................................................................ 错误！未定义书签。
（七）信息安全技术 .................................................................................... 错误！未定义书签。
（八）智能交通技术 .................................................................................... 错误！未定义书签。
JS----checked----checked选中和未选中的获取
JS----checked----checked选中和未选中的获取全选、全不选、反选功能html代码<form action="" id="oForm" name="myForm"><input type="checkbox" name="hobby" id="basket" value="basket">篮球<Br><input type="checkbox" name="hobby" id="zuqiu" value="zuqiu" >⾜球<Br><input type="checkbox" name="hobby" id="paiqiu" value="paiqiu">排球<Br><input type="checkbox" name="hobby" id="wqiu" value="wqiu">⽹球<Br><input type="checkbox" name="hobby" id="biqiu" value="biqiu">壁球<Br><input type="checkbox" name="hobby" id="bpq" value="bpq">乒乓球<Br><input type="checkbox" name="hobby" id="ymq" value="ymq">⽻⽑球<Br><input type="button" name="all" id="all" value='全选' onclick="setVal(1)"><input type="button" name="allNo" id="allNo" value='全不选' onclick="setVal(0)"><input type="button" name="noCheck" id="noCheck" value='反选' onclick="setVal(-1)"></form>JS代码function setVal(iNum){var aForm = document.getElementById("myForm");var aArr = aForm.hobby;for(var i=0;i<aArr.length;i++){if( iNum<0 ){aArr[i].checked = !aArr[i].checked;}else{aArr[i].checked = iNum;}}}设置选中下边两种写法没有任何区别只是少了些代码⽽已<input id="cb1" type="checkbox" checked /><input id="cb2" type="checkbox" checked="checked" />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");为什么input checkbox有 checked='checked'还是没选中如果⽤jQuery1.6+来写的话：建议使⽤$(element).prop('checked', true/false);⽽不是$(element).attr('checked', true/false);其实也就相当于要使⽤：element.checked = true/false;⽽并不是element.setAttribute('checked', true/false/'checked');jquery判断checked的三种⽅法.attr('checked'): //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false.prop('checked'): //16+:true/false.is(':checked'): //所有版本:true/false//别忘记冒号哦jQuery获取未选中的checkbox$('input[type=checkbox]').not("input:checked");jQuery获取选中的checkbox$('input[type=checkbox]:checked');jquery官⽹checked的⽤法/checked-selector/DataTable翻页checked部分代码内容太多需要勾选时，我们需要做翻页，但是翻页要记录之前的页⾯勾选了哪些，需要借助input来记录。
jquery操作复选框(checkbox)
1、获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val();2、获取多个checkbox选中项$('input:checkbox').each(function() {if ($(this).attr('checked') ==true) {alert($(this).val());}});3、设置第一个checkbox 为选中值$('input:checkbox:first').attr("checked",'checked');或者$('input:checkbox').eq(0).attr("checked",'true');4、设置最后一个checkbox为选中值$('input:radio:last').attr('checked', 'checked');或者$('input:radio:last').attr('checked', 'true');5、根据索引值设置任意一个checkbox为选中值$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者$('input:radio').slice(1,2).attr('checked', 'true');6、选中多个checkbox同时选中第1个和第2个的checkbox$('input:radio').slice(0,2).attr('checked','true');7、根据Value值设置checkbox为选中值$("input:checkbox[value='1']").attr('checked','true');8、删除Value=1的checkbox$("input:checkbox[value='1']").remove();9、删除第几个checkbox$("input:checkbox").eq(索引值).remove();索引值=0,1,2....如删除第3个checkbox:$("input:checkbox").eq(2).remove();10、遍历checkbox$('input:checkbox').each(function (index, domEle) {//写入代码});11、全部选中$('input:checkbox').each(function() {$(this).attr('checked', true);});12、全部取消选择$('input:checkbox').each(function () {$(this).attr('checked',false);});jQuery分别获取选中的复选框值function jqchk(){ //jquery获取复选框值var s='';$('input[name="aihao"]:checked').each(function(){s+=$(this).val()+',';});点击“提交”后，可以得到正确的选择值了，但是后面多一个,(英文逗号)，这个可以检测一下再用substring去除，或者获取到复选框选择值后一般都要转成数组再使用的，所以也可以在转成数组后，去除最后一个数组元素。
JQuery触发radio或checkbox的change事件
JQuery触发radio或checkbox的change事件早上要做⼀功能，checkbox被选中时，显⽰隐藏的层，取消选中时，再隐藏选中的层。
初始代码如下：复制代码代码如下:$(function(){$("#ischange").change(function() {alert("checked");});});捣腾了半天，竟然⼀点反应都没有。
百度了下，有⾼⼈指出上⾯⼏⾏代码在Firefox等浏览器中可以正常运⾏，即你选中复选框或取消复选框都会弹出⼀个对话框，但是在IE中却不会正常执⾏，即选中或取消复选框不会⽴即弹出对话框。
必须在选中或取消复选框之后再点击除了复选框之外的任何⼀个地⽅，据说是因为IE会等到复选框失去焦点之后才会触发change事件。
改进之后的代码如下：复制代码代码如下:$(function(){if ($.browser.msie) {$('input:checkbox').click(function () {this.blur();this.focus();});};$("#ischange").change(function() {alert("checked");});});：当改变复选框的值后，IE在等待失去焦点，但是click事件是⽴即触发的，因此利⽤click事件让复选框失去焦点，这样就会触发chang事件了，然后再把焦点重新转移到该复选框上。
如果是radio，将checkbox换成radio即可。
在JQuery中，当给radio或checkbox添加⼀个change事件时，如果它的值发⽣变化就会触发change事件，就如同我们在HTML中写⼊下代码：复制代码代码如下:<input type="checkbxo" id="testCheckbox" onchange="myfunction()"name="fruits">,⽽我们⽤JQuery的代码如下：复制代码代码如下:$(document).ready(function(){$("testCheckbox").change(function() {alert("Option changed!");});});以上代码在Firefox等浏览器中可以正常运⾏，即当你选中复选框或取消复选框都会弹出⼀个对话框，但是在IE中却不会正常执⾏，即你选中或取消复选框不会⽴即弹出对话框，你必须在选中或取消复选框之后再点击除了复选框之外的任何⼀个地⽅，之所以这样，据说是因为IE会等到复选框失去焦点之后才会触发change事件，⽬前这个问题还没有被修复，不过⽹上有⾼⼈已经提供了解决⽅案：复制代码代码如下:$(function () {if ($.browser.msie) {$('input:checkbox').click(function () { this.blur(); this.focus(); }); }});以上代码只要把checkbox就可以适⽤于radio, 以上代码的原理是：当改变复选框的值后，IE在等待失去焦点，但是click事件是⽴即触发的，因此利⽤click事件让复选框失去焦点，这样就会触发chang事件了，然后再把焦点重新转移到该复选框上。
JQuery的选择器
JQuery的选择器 页⾯的任何操作都需要节点的⽀撑，开发者如何快速⾼效的找到指定的节点也是前端开发中的⼀个重点。
jQuery提供了⼀系列的选择器帮助开发者达到这⼀⽬的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。
jQuery⼏乎⽀持主流的css1~css3选择器的写法，我们从最简单的也是最常⽤的开始学起1、id选择器：⼀个⽤来查找的ID，即元素的id属性 $( "#id" ) id选择器也是基本的选择器，jQuery内部使⽤JavaScript函数document.getElementById()来处理ID的获取。
原⽣语法的⽀持总是⾮常⾼效的，所以在操作 DOM的获取上，如果能采⽤id的话尽然考虑⽤这个选择器 值得注意： id是唯⼀的，每个id值在⼀个页⾯中只能使⽤⼀次。
如果多个元素分配了相同的id，将只匹配该id选择集合的第⼀个DOM元素。
但这种⾏为不应该发⽣;有超过⼀个元素的页⾯使⽤相同的id是⽆效的2、类选择器，顾名思义，通过class样式类名来获取节点 描述：$( ".class" ) 类选择器，相对id选择器来说，效率相对会低⼀点，但是优势就是可以多选，同样的jQuery在实现上，对于类选择器，如果浏览器⽀持，jQuery使⽤JavaScript的原⽣getElementsByClassName()函数来实现的 我们不难发现： jQuery除了选择上的简单，⽽且没有再次使⽤循环处理 不难想到$(".imooc").css()⽅法内部肯定是带了⼀个隐式的循环处理，所以使⽤jQuery选择节点，不仅仅只是选择上的简单，同时还增加很多关联的便利操作，后续我们还会慢慢的学到其他的优势。
3、元素选择器：根据给定（html）标记名称选择所有的元素 描述：$( "element" )搜索指定元素标签名的所有节点，这个是⼀个合集的操作。
js checkbox用法
js checkbox用法JavaScript是当前应用最为广泛的编程语言之一，它被广泛应用于网页交互、动态效果和用户交互等方面。
而checkbox是JavaScript最常见的表单元素之一，用于在表单中选择或取消选择一个或多个选项。
在本文中，我们将深入探讨checkbox的用法和应用，包括基本用法、状态设置、选项操作、事件绑定以及常见应用。
一、基本用法在HTML表单中使用checkbox是非常简单的。
以下是基本的代码示例：<input type="checkbox" name="sports" value="football" checked>足球在上面的代码中，我们可以看到几个重要的属性：- type: 表示元素的类型。
在这里，我们使用checkbox。
- name: 表示元素的名称。
- value: 表示元素的值。
- checked: 表示元素是否默认选中。
当用户勾选一个checkbox时，表单的值将被发送到Web服务器，并在服务器端进行处理。
二、状态设置我们可以通过JavaScript来设置checkbox的状态。
以下是一个简单的例子：<input type="checkbox" id="sports" name="sports" value="1">足球<button onclick="check()">Check</button><script>function check() {var checkbox = document.getElementById("sports");checkbox.checked = true;}</script>在上面的代码中，我们为checkbox元素添加了一个id属性，并通过getElementById()方法获取该元素。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2、获取多个checkbox选中项
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者
$('input:radio').slice(1,2).attr('checked', 'true');
6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');
7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');
8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();
9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});
11、全部选中
$('input:checkbox').each(function() {
$(this).attr('checked', true); });
12、全部取消选择
$('input:checkbox').each(function () {
$(this).attr('checked',false); });。