首页
学
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
享
【享】文件
【享】工具
日记
Me
【Me】我
【Me】留言
老郭博客-程序员客栈
文章模型
下载模型
首页
学
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
享
【享】文件
【享】工具
日记
Me
【Me】我
【Me】留言
首页
学
【学】前端
jQuery快捷操作
jQuery快捷操作
发布时间:
2年前
作者:
老郭
热度:
1269 ℃
评论数:
# jQuery快捷操作 ------------ > addClass、removeClass、toggleClass ``` $().attr('class',值); $().attr('class'); $().removeAttr('class属性');//删除class的属性 class具体快捷操作方法: $().addClass(class属性值);//给class属性追加信息值 $().removeClass(class属性值);//删除class属性中的某个信息值 $().toggleClass(class属性值);//开关效果,有就删除,没有就添加 追加: <script type="text/javascript"> function f1() { //给div设置class属性值 //attr()对同一个属性进行多次设置修改,后者要覆盖前者 //以下三条语句,最终“class = banana” //$('div').attr('class','apple'); //$('div').attr('class','pear'); //$('div').attr('class','banana'); //addClass()给class属性“追加”信息值 //以下class的三个信息值会同时存在 $('div').addClass('class','apple'); $('div').addClass('class','pear'); $('div').addClass('class','banana'); } 删除与开关效果: function f2() { $('div').removeClass('class','pear'); $('div').removeClass('class','class'); } function f3() { $('div').toggleClass('apple'); } ``` > 标签包含内容操作 ``` <div>hello<span>world</span></div> JavaScript操作: dvnode.innerHTML;获得div包含的信息 dvnode.innerHTML = xxx;设置div包含的内容 (innerHTML不是w3c的标准技术,许多浏览器对其有支持而已) jQuery操作: $().html();//获得节点包含的信息 $().html(信息);//设置节点包含的内容 $().text();//获得节点包含的“文本字符串信息”内容 $().text(信息);//设置节点包含的内容(有HTML标签就把“><”符号变为实体) html() 和 text() 方法的区别: ①获取内容 前者可以获取html标签和普通字符串内容 后者只获取普通字符串内容(会自动过滤html标签) ②设置内容 前者可以设置html标签和普通字符串内容 后者只设置普通字符串内容,如果内容里边有tag标签内容,就把 其中的“<”“>”符号转变为符号实体<----<>----> 空格--- 以上两种操作(获取/设置)如果针对的操作内容是纯字符串内容,则使用效果一致 ``` > CSS样式 ``` $().css(name,value)//设置 $().css(name);//获取 $().css(json对象);//同时修改多个css样式 css() 样式操作特点: ①样式获取,jQuery可以获取行内、内部、外部的样式。 dom方式只能获得行内样式 ②获取复合属性样式 需要拆分“具体样式”才可以操作 (有的浏览器是可以获得复合属性信息的,例如chrome) 例如: background需要拆分为 background-color background-image等进行操作 border:border-left-style border-left-width border-left-color等 margin:margin-left margin-top等 ③样式的设置,会被设置为“行内样式” 有则改动,无则添加 (复合属相样式可以直接进行设置操作) 获取div各个样式: function f1() { // 获取 行内、内部、外部样式都可以获得 // JavaScript的dom方式只能获得“行内”样式 console.log($('div')).css("color");//rgb(255,0,0) console.log($('div')).css("width");//300px console.log($('div')).css("height");//200px console.log($('div')).css("background-color");//rgb(173,216,230) console.log($('div')).css("font-size");//25px //console.log($('div')).css("border");//(空字符串) //“复合样式”需要拆分为“具体样式”进行获取 console.log($('div')).css("border-left-style");//solid console.log($('div')).css("border-left-color");//rgb(0,0,255) console.log($('div')).css("border-left-width");//4px } 给div设置一些css样式信息: function f2() { // 设置(会被设置为“行内”样式) // 有则修改、无则添加 $('div').css('font-size','40px');//添加 $('div').css('color','green');//修改 $('div').css('width','400px');//添加 //复合样式可以直接进行设置 $('div').css('border','5px solid yellow') } 通过json对象批量修改css样式: function f3() { //通过json对象批量修改css样式 $('div').css({'font-size':'50px',color:'purple',height:'100px'}); } </script> <link rel="stylesheet" type="text/css" href="./11.css"> <style type="text/css"> div{width: 300px;height: 200px;background-color: lightblue;} </style> </head> <body> <h2>css样式操作</h2> //样式分类:行内、内部、外部 <div style="color: red;">today we are studying jQuery</div> <input type="button" name="" value="获取" onclick="f1()"> <input type="button" name="" value="设置" onclick="f2()"> <input type="button" name="" value="json对象批量修改样式" onclick="f3()"> </body> ``` > value属性值快捷操作 ``` $().attr('value'); $().attr('value',信息值); 快捷操作 $().val();//获得value属性值 $().val(信息值);//设置value属性的值 该val()方法在复选框、单选按钮、下拉列表的使用有凸出表现。 4.1复选框操作 ①、获得被选中复选框的value属性值 ②、设置默认情况下哪个复选框被选中 获取被选中复选框value值的逻辑: function f1() { //获取(被选中的复选框的value值) //1、获得全部的“被选中”复选框元素节点对象 //2、遍历全部的被选中复选框 //3、如果有选中就获得其value值 //console.log($('.hby:checked')); //Object[input.hby 属性(attribute)值 = “1”,input.hby 属性(attribute)值 = “3”,input.hby 属性(attribute)值 = "4"] var s = ""; for (var i = 0; i < $('.hby:checked').length; i++) { //$('.hby:checked'):eq("+i+")被遍历出来的当前的复选框元素节点 //console.log($('.hby:checked'):eq("+i+")').val() s += $(".hby:checked:eq('+i+')").val()+"," } s = s.substr(0,s.length-1);//去除最后’,‘逗号 console.log(s);//1,2,3 } 通过val([元素值,元素值])方法设置被选中项: function f2(){ //设置,“篮球”“足球”“棒球”选中 //获得全部复选框,做遍历,判断当前项目的value值是否等于1或4 //等于就选中 //$(全部的复选框).val([元素值,元素值]),可以设置“value值=元素值”的项目选中 $('.hby').val([1,2,4]); } <h2>复选框操作</h2> 爱好: <input type="checkbox" class="hby" name="hby[]" value="1">篮球 <input type="checkbox" class="hby" name="hby[]" value="2">足球 <input type="checkbox" class="hby" name="hby[]" value="3">排球 <input type="checkbox" class="hby" name="hby[]" value="4">棒球 <br> <input type="button" name="" value="获取" onclick="f1()"> <input type="button" name="" value="设置" onclick="f2()"> 4.2、下拉列表操作 function f1() { // 获取(被选中下拉列表项目的value值) // 适合"单选"的下拉列表 // console.log($('option:selected').val()); //attr('value') //"多选"的情况(适合单选情况) //$(下拉列表).val(); //获得全部被选中的下拉列表项目的value值 console.log($('select').val());//["B",'D','E'] } function f2() { // 设置,北京、天津、沈阳选中(单选、多选都合适) // $(下拉列表).val([元素值,元素值...]);//可以设置"value值=元素值"的项目选中 $('#city').val(['A','B','E']) } <h2>下拉列表操作</h2> 曾经旅游过的城市: <select id="city" style="width: 150px; height: 246px;"> <option value="0">请选择</option> <option value="A">北京</option> <option value="B">天津</option> <option value="C">上海</option> <option value="D">深圳</option> <option value="E">沈阳</option> </select> <br><br> <input type="button" name="" value="获取" onclick="f1()"> <input type="button" name="" value="设置" onclick="f2()"> 4.3 单选按钮操作 获得选中项目的value值和设置默认选中项目操作: function f1() { // 获取(被选中单选框项目的value值) console.log($('.sx:checked').val()); } function f2() { // 设置 // $(全部单选按钮).val([元素值]);//使得value值===元素值的项目中选中 $('.sx').val(['c']); } ``` > 复选框操作 ``` 全选、反选、全不选 $().attr('checked',true);//设置复选框中 $().attr('checked',false);//取消复选框中 $().attr('checked');//判断复选框选种情况,返回布尔值 复选框全选、全不选、反选操作: function selAll() { // 全选 $('li').css('color','red'); $('.hby').attr('checked','true'); //以上css()/attr()方法都有批量处理效果 //在jQuery框架里边,大部分方法本身有‘遍历机制’ //遍历同时会为每个dom对象都设置对应的(css)属性 } function selnotAll(){ //全不选 $('.hby').attr('checked',false); } function selfan() { // 遍历全部的股选矿,查看选中状态,选中设置不选中 // $('.hby') for (var i = 0; i < $('.hby').length; i++) { var flag = $('.hby:eq('+i+')').attr('checked');//判断选中状态 $('.hby:eq('+i+')').attr('checked',!flag); } } <h2>复选框按钮</h2> 爱好: <input type="checkbox" name="hobby[]" class="hby" value="1">篮球 <input type="checkbox" name="hobby[]" class="hby" value="2">足球 <input type="checkbox" name="hobby[]" class="hby" value="3">排球 <input type="checkbox" name="hobby[]" class="hby" value="4">棒球 <br> <input type="button" name="" value="全选" onclick="selAll()"> <input type="button" name="" value="全不选" onclick="selnotAll()"> <input type="button" name="" value="反选" onclick="selfan()"> ```
jQuery,快捷操作
上一篇:
jQuery的属性操作
下一篇:
jQuery对象与dom对象关系
栏目导航
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
相关文章
Ajax是什么?
1212 ℃
网站禁止浏览器缓存
1269 ℃
Ajax之get方式请求
2732 ℃
Ajax之post方式请求
2169 ℃
Json使用
1164 ℃
无刷新表单信息提交
1378 ℃
使用Ajax中$.post方法前台获取json数据,将数据转换为...
1754 ℃
细说jQuery的选择器
1358 ℃
jQuery的属性操作
2112 ℃
jQuery快捷操作
1269 ℃
jQuery对象与dom对象关系
3021 ℃
jQuery的事件加载机制
1574 ℃
jQuery属性选择器使用
2184 ℃
jQuery基本动画效果
2536 ℃
利用Ajax技术实现天气预报接口
1430 ℃
微信小程序
手机扫码访问