1.修改元素样式
js方式：
var div2 = document.getElementById("") div2.style.width = '200px';
div2.className = "common"; //添加类样式
//创建子节点
var d = document.createElement('div');
d.innerHTML = 'new div';
div2.appendChild(d)
jquery方式：
var div1 = $("#div1") div1.css({}) div1.addClass("common") //添加类样式 //创建子节点，追加在子节点的最后 div1.append('<div style="100px;height: 100px; "></div>');
div1.prepend('') //在元素后面添加 标签 $('#div1').after('<p>after div1</p>') //div后面添加 $('#div1').before('<p>before div1</p>') //div前面添加 $('#div1').remove()
2. 属性操作：
3.复选框全选
设置选中状态：$().prop('checked', true|false);
获取选中状态：$().is(':checked') ->true | false
val(),attr(),css() 都采用遍历的方式
hobby: 全选：<input type="checkbox" id="hobby" /><br> 篮球：<input type="checkbox" name="hobby" value="1" /><br> 足球：<input type="checkbox" name="hobby" value="2" /><br> 羽毛球：<input type="checkbox" name="hobby" value="3" /><br> <script src="js/jquery-1.7.1.min.js"></script> <script> $(function () { // var hobby_ch = $('#hobby') hobby_ch.change(function () { $('input[name="hobby"]:checkbox').prop('checked', $(this).is(':checked')) }) }) </script>
4.class快捷方法
5.css选择器
层次选择器
5.value属性快速获取
6.获取关系节点【jquery】
父节点：
$().parent();
$().parents();
子节点：
$().children([条件]); $().children().eq(1)； $().children('.div1')
$().firstChild();
$().find('');
find('p');
find('.p1')
$('#div1').find('div:nth-child(1)').css('color','red')
兄弟节点：
$().next("限制条件（可无）"); 下一个（可为空）
$().nextAll(""); //$('#div1').nextAll()[2].innerHTML
$().prev();
$().prevAll();
$().siblings('p:nth:child(2)') 用于获取所有的同辈元素
过滤：
$().children().eq(1);
$().children.first();
$().children.last();
demo获取表格某行的信息：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>p1</title> <script src="js/jquery-3.3.1.min.js"></script> <style> table,tr,td{ border: 1px solid; border-collapse: collapse; text-align: center; } td{ width:100px; height:60px; } </style> <script> $(function () { $('body').on('click', '.btn_detail', function (ev) { var td = $(this).parent(); alert('id='+td.siblings('td').eq(0).text() +'，姓名='+td.siblings('td').eq(1).text() +'，年龄='+td.siblings('td').eq(2).text()) }); }) </script> </head> <body> <h1>2. 使用jquery来对原有的table进行新增tr,给它动态绑定一个事件</h1> <div> <table> <thead> <tr> <th>id</th><th>姓名</th><th>年龄</th><th>详情</th> </tr> </thead> <tbody> <tr> <td>1</td><td>张三</td><td>20</td><td><button class="btn_detail">详情</button></td> </tr> <tr> <td>2</td><td>李四</td><td>20</td><td><button class="btn_detail">详情</button></td> </tr> <tr> <td>3</td><td>赵云</td><td>30</td><td><button class="btn_detail">详情</button></td> </tr> </tbody> </table> </div> </body> </html>