24-[jQuery]-属性，文档，位置，筛选
Posted 不要被骄傲遮蔽了双眼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了24-[jQuery]-属性，文档，位置，筛选相关的知识，希望对你有一定的参考价值。
1、jquery的属性操作
jquery对象有它自己的属性和方法，我们先研究一下jquery的属性操作。
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
（1）html文档操作，dom元素设置，移除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery属性操作 attr prop</title> </head> <body> <div id="box"> <p>路飞学城</p> </div> <button>获取</button> <ul> <li class="luffy1">路飞</li> <li class="luffy2">路飞</li> <li class="luffy2">路飞</li> <li class="luffy3">路飞</li> </ul> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { $(\'button\').click(function () { //jquery 属性操作 // html 属性操作 attr ---- 对html 操作 // attr() 有一个参数 表示获取值 $(\'#box p\').text($(\'#box\').attr(\'id\')); // attr() 如果有两个值 表示设置属性 不能给类添加 多个属性 $(\'#box\').attr(\'class\',\'foo\'); //设置多个值 使用对象存储 ， 如果设置多个类名 不能使用 attr $(\'#box\').attr({\'class\':\'foo2\',name:\'alice\'}); // class 覆盖 // $(\'#box\').removeAttr(\'name\'); // 删除一个属性 $(\'#box\').removeAttr(\'name class\'); // 删除多个 //Dom属性操作 prop ----对dom操作 console.log($(\'li\')); // 获取第一个元素得class值 console.log($(\'li\').prop(\'class\')); //设置值 // $(\'li\').first().prop(\'name\',\'app\'); $(\'li\').first().prop({\'name\':\'app\',\'name2\':\'app2\'}); console.log($(\'li\').first()); //删除dom对象得name属性 $(\'li\').first().removeProp(\'name\'); console.log($(\'li\').first()); // console.log($(\'li\').first().prop(\'name\')); // // console.log($(\'li\').prop(\'name\')); }); }) </script> </html>
（2）操作 class 值，操作值html，text，val
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery属性操作class和值操作</title> <style type="text/css"> span.active{ font-size: 30px; } </style> </head> <body> <div id="box"> <p>路飞学城</p> </div> <button>获取</button> <ul> <li class="luffy1">路飞</li> <li class="luffy2">路飞</li> <li class="luffy2">路飞</li> <li class="luffy3">路飞</li> </ul> <span class="span1"> 路飞吧！ </span> <div id="box2"> 我是哈哈 <p>我是一个段落</p> <a href="">百度一下</a> <input type="text" value="我们" name=""> <button id="btn">get</button> </div> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { $(\'button\').click(function () { // 3.addClass removeClass() 添加类和删除类 $(\'span\').addClass(\'span2 span3\'); $(\'span\').removeClass(\'span2\'); var isBig = true; $(\'span\').click(function () { if(isBig){ $(this).addClass(\'active\'); isBig = false; }else{ $(this).removeClass(\'active\'); isBig = true; } }); //4.值属性得操作 text() html() val() //获取文本 console.log($(\'#box2\').text()); // 所有得文本都拿到了 //获取所有 html console.log($(\'#box2\').html()); // 设置值 用得比较频繁 // $(\'#box2\').text(\'嘿嘿\'); // $(\'#box2\').text(\'<a>luffy city</a>\'); // $(\'#box2\').html(\'<a href="#">luffy city</a>\'); //val() console.log($(\'input\').val()); //获取值 $(\'input\').val(\'你是个大头鬼\'); //设置值 $(\'#btn\').click(function () { var val = $(\'input\').val(); $(\'#box2\').text(val); }); //监听input 有变化时 表单控件使用得一个方法 $(\'input\').change(function () { console.log($(this).val()); }) }); }) </script> </html>
2、操作input中的value值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作表单input中得value值</title> </head> <body> <form action=""> <input type="radio" name="sex" value="112" />男 <input type="radio" name="sex" value="11" checked="" />女 <input type="radio" name="sex" value="113" />gay <input type="checkbox" value="a" checked=""/>吃饭 <input type="checkbox" value="b" checked=""/>睡觉 <input type="checkbox" value="c" checked=""/>打豆豆 <select name="timespan" id="timespan" class="Wdate" > <option value="1">8:00-8:30</option> <option value="2">8:30-9:00</option> <option value="3" selected>9:00-9:30</option> </select> <input type="text" name="" id="" value="111" /> </form> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { console.log($(\':radio\')); console.log($(\':checkbox\')); /* input * :button * :submit * :file * :text * :disabled * * */ //1.获取单选框中 value 值 console.log($(\'input[type=radio]:checked\').val()); //2.获取复选框 value 值 仅仅获取 第一个值 console.log($(\'input[type=checkbox]:checked\').val()); //3.下拉列表 被选中得值 console.log($(\'#timespan option:selected\').val()); //4.设置单选得值 $(\'input[type=radio]\').val([\'113\']); // 里面 得是 数组 //5.设置复选值 $(\'input[type=checkbox]\').val([\'b\',\'c\']); // 里面 得是 数组 //6.设置下拉列表 这里必须要用 select // $(\'#timespan\').val([\'2\']); $(\'select\').val([\'2\']); // 后面会覆盖前面得 // $(\'select\').val([\'2\',\'1\']); // 后面会覆盖前面得 //文本框 console.log($(\'input[type=text]\').val()); $(\'input[type=text]\').val(33); }) </script> </html>
3、jQuery的文档操作
（1）插入操作
一、父元素.append(子元素) 追加某元素 父元素中添加新的元素
var oli = document.createElement(\'li\'); oli.innerHTML = \'哈哈哈\' //jquery中的dom操作 //1.append(content)追加 往父元素中添加新的元素 //content:string | element | jquery元素 $(\'ul\').append(\'<li>1233</li>\') $(\'ul\').append(oli) //如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作 $(\'ul\').append($(\'#app\'))
二、子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
$(\'<li>天王盖地虎</li>\').appendTo($(\'ul\')).addClass(\'hu\')
三、prepend（） 前置添加， 添加到父元素的第一个位置
$(\'ul\').prepend(\'<li>我是第一个</li>\')
四、prependTo
以上是关于24-[jQuery]-属性，文档，位置，筛选的主要内容，如果未能解决你的问题，请参考以下文章