HTML代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height:200px; width: 200px; border-radius: 50%; background-color: red; } .green{ background-color: green; } </style></head><body><div class="c1"></div></body></html>jQuery代码：
$(‘.c1‘).addClass(‘green‘)结果：
div标签背景颜色变成了绿色HTML代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height:200px; width: 200px; border-radius: 50%; background-color: red; } .green{ background-color: green; } </style></head><body><div class="c1 green"></div></body></html>jQuery代码：
$(‘.c1‘).removeClass(‘green‘)结果：
div标签背景又变成了红色HTML代码：
<div class="a1"> <a href="">百度</a></div><div class="a2"></div>jQuery代码：
取值： $(‘.a1‘).html() $(‘.a1‘).text()设置值： $(‘.a2‘).html(‘<a href="">京东</a>‘) $(‘.a2‘).text(‘<a href="">京东</a>‘)结果：
取值结果： html：<a href="">百度</a> text：百度设置值结果： html中的内容会生成一个标签 text中的内容还是一个文本内容显示，不能识别成标签HTML代码：
<input type="text" id="username"><input type="radio" class="a1" name="sex">男<input type="radio" class="a1" name="sex">女<input type="text" class="a2" name="hobby">抽烟<input type="text" class="a2" name="hobby">喝酒<input type="text" class="a2" name="hobby">烫头<select name="city" id="s1"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option></select><select name="lover" id="s2" multiple> <option value="1">波多</option> <option value="2">苍井</option> <option value="3">小泽</option></select>jQuery代码：
获取值： 文本输入框：$(‘#username‘).val(); 单选radio框：$(‘.a1:checked‘).val(); 多选checkout框：$(‘.a2:checked‘).val()是不行的;需要循环取值，如下： var d = $(‘:checkbox:checked‘); for (var i=0;i<d.length;i++){ console.log(d.eq(i).val()); } 单选select框：$(‘#city‘).val()； 多选select框：$(‘#lover‘).val(); 设置值： 文本输入框：$(‘#username‘).val(‘you are my love‘); 单选radio框：$(‘.a1‘).val([2]); #注意里面必须是列表，写的是value属性对应的值 多选checkout框：$(‘.a2‘).val([‘2‘,‘3‘]) 单选select框：$(‘#city‘).val(‘1‘)； 多选select框：$(‘#lover‘).val([‘2‘,‘3‘])<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 99; } .modal { width: 300px; height: 200px; background-color: white; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; z-index: 1000; } .hide { display: none; } </style></head><body><button id="add">新增</button><table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>金老板</td> <td>开车</td> <td> <button class="fire">开除</button> </td> </tr> <tr> <td><input type="checkbox"></td> <td>景女神</td> <td>茶道</td> <td> <button class="fire">开除</button> </td> </tr> <tr> <td><input type="checkbox"></td> <td>苑昊（苑局）</td> <td>不洗头、不翻车、不要脸</td> <td> <button class="fire">开除</button> </td> </tr> </tbody></table><div class="cover hide"></div><div class="modal hide"> <div> <label>姓名： <input type="text" id="name"> </label> </div> <div> <label>爱好： <input type="text" id="hobby"> </label> </div> <button id="cancel" type="button">取消</button> <button id="submit" type="button">提交</button></div><script src="jquery.js"></script><script> // 定义一个清空输入框并且隐藏模态框的方法 function hideModal(){ // 1. 清空input的值 $("#name,#hobby").val(‘‘); // 2. 隐藏起来 $(".cover,.modal").addClass(‘hide‘); } // 开除按钮的功能 $("table").on(‘click‘, ‘.fire‘, function () { //我们先去学冒泡事件、事件委托然后再回来学这个例子，事件里面都是用的匿名函数，这里用on是因为我 //们要将新添加进来的每行里面的button标签能够继承这个点击删除的事件 // 点击开除按钮要做的事儿 // 把当前行移除掉 //this --> 触发当前点击事件的DOM对象 $(this).parent().parent().remove(); // 链式操作 }); // 新增按钮的功能 $("#add").click(function () { // 点击新增按钮要做的事儿 // 1. 移除cover和modal的hide样式 $(".cover,.modal").removeClass(‘hide‘); }); // 点击modal中的cancel按钮 $("#cancel").click(function () { hideModal(); }); // 点击modal中的submit按钮 $("#submit").click(function () { // 1. 获取用户输入的值 var name = $("#name").val(); var hobby = $("#hobby").val(); // 2. 隐藏模态框，清空输入框 hideModal(); // 3. 创建一个tr标签，把数据塞进去 var trEle = document.createElement("tr"); $(trEle).append(‘<td><input type="checkbox"></td>‘); $(trEle).append(‘<td>‘ + name + ‘</td>‘); var tdTmp = document.createElement(‘td‘); tdTmp.innerText = hobby; $(trEle).append(tdTmp); $(trEle).append(‘<td><button class="fire">开除</button></td>‘) // 4. 把上一步的tr追加到表格的tbody后面 $(‘tbody‘).append(trEle); });</script></body></html>HTML代码：
<input type="checkbox" id="i1" value="1">jQuery代码：
$("#i1").prop("checked")结果：
false<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button id="all">全选</button><button id="reverse">反选</button><button id="cancel">取消</button><table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>金老板</td> <td>开车</td> </tr> <tr> <td><input type="checkbox"></td> <td>景女神</td> <td>茶道</td> </tr> <tr> <td><input type="checkbox"></td> <td>苑昊（苑局）</td> <td>不洗头、不翻车、不要脸</td> </tr> </tbody></table><script src="jquery.js"></script><script> // 点击全选按钮 选中所有的checkbox // DOM绑定事件方法 // $("#all")[0].onclick = function(){} // jQuery绑定事件方法 $("#all").click(function () { $(":checkbox").prop(‘checked‘, true); }); // 取消 $("#cancel").on("click", function () { $(":checkbox").prop(‘checked‘, false); }); // 反选 $("#reverse").click(function () { // 1. 找到所有选中的checkbox取消选中 // $("input:checked").prop(‘checked‘, false); // 2. 找到没有选中的checkbox选中 // $("input:not(:checked)").prop(‘checked‘, true); //你会发现上面这么写，不行，为什么呢？因为你做了第一步操作之后，再做第二步操作的时候，所有标签就已经全部取消选中了，所以第二步就把所有标签选中了 // 方法:for循环所有的checkbox,挨个判断原来选中就取消选中，原来没选中就选中 var $checkbox = $(":checkbox"); for (var i=0;i<$checkbox.length;i++){ // 获取原来的选中与否的状态 var status = $($checkbox[i]).prop(‘checked‘); $($checkbox[i]).prop(‘checked‘, !status); } })</script></body></html>
