jQuery最重要的知识点

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>

jQuery最重要的知识点

猜你喜欢