1、各种常见的选择器。
2、对于属性的操作。【重点】
2.1)获取或设置属性的值: prop();
2.2 ) 添加、删除、切换样式:
addClass/removeClass/toggleClass
2.3 ) 获取或设置页面元素的内容:
$('a').html() ; //获取元素内容(并解析其中的html标签,相当于:innerHTML)
$('a').text(); //获取元素内容(不解析其中的html标签,相当于:innerText)
$('a').val(); //获取表单元素的内容(相当于:页面元素.value)
3、jquery的事件处理:
一般有四种方法。
① $('btn').click(function(){....})
② $('btn').on('click',function(){....})
③ $('btn').bind('click',function(){....})
④ $('btn').one('click',function(){....})
//onload:
$(document).ready(function(){
....
})
简写为:
$(function(){
...
})
例子:省级连动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>省市级联</title> <!--加载js库--> <script src="js/myjs.js"></script> </head> <body> 请选择省份: <select id="province" onchange="changeProvince(this.value)"> <option value="湖南省">湖南省</option> <option value="海南省" >海南省</option> <option value="湖北省" >湖北省</option> <option value="广东省" selected>广东省</option> </select> 请选择城市: <select id="citys"></select> </body> </html> <script> //第一步:声明省份对应的城市 //第一种组织数据的方式(使用数组) // var provinces = []; // provinces['湖南省'] = ['长沙','岳阳','常德','株洲','湘潭']; // provinces['海南省'] = ['海口','三亚','文昌','琼州']; // provinces['湖北省'] = ['武汉','黄冈','襄阳','十堰','荆州'] ; // provinces['广东省'] = ['广州','深圳','珠海','佛山','东莞']; //第二种组织数据的方式(使用json对象) var provinces = { '湖南省':['长沙','岳阳','常德','株洲','湘潭'], '海南省':['海口','三亚','文昌','琼州'], '湖北省':['武汉','黄冈','襄阳','十堰','荆州'], '广东省':['广州','深圳','珠海','佛山','东莞'] } //第二步:改变省份时触发onchange事件,显示对应的城市 function changeProvince(v){ //2.1)根据传递过来的省份得到省份对应的城市数组 var citys = provinces[v]; //清空城市下拉列表框 $('citys').options.length = 0; //2.2)遍历城市数组并为id="citys"的列表框赋值 for(var i in citys){ //下面的参数1:代表文本 参数2:代表option的值 $('citys').options.add(new Option(citys[i],citys[i])); } } //第三步:当窗体加载完毕时,应该让被选择的省份的城市加载到citys下拉框中 window.onload=function(){ changeProvince($('province').value); } </script>
2.表格的复制:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> #tables{ width: 1000px; height: 100px; margin:0 auto; border:1px solid pink; } tr td{ border:1px solid red; text-align:center; } a{ text-decoration:none; } #tr1{ text-align:right; } #tr3{ display: none; } </style> <body> <table id="tables"> <tr> <td id="tr1" colspan=5><a href="#" onclick="addStudent()">添加</a></td> </tr> <tr id="tr2"> <td>学号</td> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>操作</td> </tr> <tr id="tr3"> <td> <input type="text" > </td> <td> <input type="text"> </td> <td><input type="text"></td> <td><input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女</td> <td onclick="dele(this)"><a href="#">删除</a></td> </tr> </table> </body> </html> <script src="js/j.js"></script> <script> function addStudent() { //取到要复制表格的id var va=$("tr3"); //得到单元集合 var vas=va.cells; //插入数据 var tr=$("tables").insertRow(); for(var i=0;i<vas.length;i++){ var emnoy=tr.insertCell(); emnoy.innerHTML=vas[i].innerHTML; } // var tr=va.cloneNode(true); // tr.style.display="table-row"; // //2.将复制的值添加到table中 // $("tables").appendChild(tr); } //删除 function dele(s){ //得到要删除的行 var tr=s.parentNode; $("tables").deleteRow(tr.rowIndex); } </script>