Web阶段：第五章：JQuery库（中）-阿里云开发者社区

元素筛选

过滤

eq(index|-index)

选出索引为index 的元素（0开始） ,负号表示可以倒着选（-1开）和:eq()功能一样

first()

选出第一个元素和:first功能一样

last()

选出最后一个元素和:last功能一样

hasClass(class)

是否含有class值

filter(expr|obj|ele|fn)

按照表达式过滤

is(expr|obj|ele|fn)1.6*

是否满足表达式

has(expr|ele)

是否含有表达式的元素

not(expr|ele|fn)

判断一个元素是不是符合表达式

slice(start,[end])

表示从start开始选择直到end,只传递一个start表示从start开始直至结束

查找

children([expr]) 查找所有子元素，传入表达式，表示满足表达式的子元素

closest(expr,[con]|obj|ele)1.6* 表示查找和当前元素最接近的元素

find(expr|obj|ele) 表示查找元素，查找的是后代元素

next([expr]) 查找下一个元素

nextall([expr]) 查找下面所有的元素

nextUntil([exp|ele][,fil])1.6* 查找相邻相邻元素一致到结束

offsetParent() 返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

parent([expr]) 返回父元素

parents([expr]) 返回所有祖先元素

parentsUntil([exp|ele][,fil])1.6* 返回所有祖先元素直到满足表达式为止

prev([expr]) 返回之前的那个元素

prevall([expr]) 返回之前所有的兄弟元素

prevUntil([exp|ele][,fil])1.6* 返回之前所有兄弟元素直到满足表达式为止

siblings([expr]) 返回满足表达式的同辈元素

串联

add(expr|ele|html|obj[,con]) 并联关系。选择当前的元素和add条件中的元素，返回的是这些元素的集合

案例：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>DOM查询</title>
  <style type="text/css">
    div, span, p {
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
    }
    div.mini {
        width: 55px;
        height: 55px;
        background-color: #aaa;
        font-size: 12px;
    }
    div.hide {
        display: none;
    }     
  </style>
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      function anmateIt(){
        $("#mover").slideToggle("slow", anmateIt);
      }
      anmateIt();
      //(1)eq()  选择索引值为等于 3 的 div 元素
      $("#btn1").click(function(){
        $("div").eq(3).css("background-color","#bfa");
      });
      //(2)first()选择第一个 div 元素
       $("#btn2").click(function(){
         //first()   选取第一个元素
        $("div").first().css("background-color","#bfa");
      });
      //(3)last()选择最后一个 div 元素
      $("#btn3").click(function(){
        //last()  选取最后一个元素
        $("div").last().css("background-color","#bfa");
      });
      //(4)filter()在div中选择索引为偶数的
      $("#btn4").click(function(){
        //filter()  过滤   传入的是选择器字符串
        $("div").filter(":even").css("background-color","#bfa");
      });
       //(5)is()判断#one是否为:empty或:parent
      //is用来检测jq对象是否符合指定的选择器
      $("#btn5").click(function(){
        alert( $("#one").is(":parent") );
      });
      //(6)has()选择div中包含.mini的
      $("#btn6").click(function(){
        //has(selector)  选择器字符串    是否包含selector
        $("div").has(".mini").css("background-color","#bfa");
      });
      //(7)not()选择div中class不为one的
      $("#btn7").click(function(){
        //not(selector)  选择不是selector的元素
        $("div").not(".one").css("background-color","#bfa");
      });
      //(8)children()在body中选择所有class为one的div子元素
      $("#btn8").click(function(){
        //children()  选出所有的子元素
        $("body").children("div.one").css("background-color","#bfa");
      });
      //(9)find()在body中选择所有class为mini的div元素
      $("#btn9").click(function(){
        //find()  选出所有的后代元素
        $("body").find("div.mini").css("background-color","#bfa");
      });
      //(10)next() #one的下一个div
      $("#btn10").click(function(){
        //next()  选择下一个兄弟元素
        $("#one").next("div").css("background-color","#bfa");
      });
      //(11)nextAll() #one后面所有的span元素
      $("#btn11").click(function(){
        //nextAll()   选出后面所有的元素
        $("#one").nextAll("span").css("background-color","#bfa");
      });
      //(12)nextUntil() #one和span之间的元素
      $("#btn12").click(function(){
        $("#one").nextUntil("span").css("background-color","#bfa")
      });
      //(13)parent() .mini的父元素
      $("#btn13").click(function(){
        $(".mini").parent().css("background-color","#bfa");
      });
      //(14)prev() #two的上一个div
      $("#btn14").click(function(){
        //prev()  
        $("#two").prev().css("background-color","#bfa")
      });
      //(15)prevAll() span前面所有的div
      $("#btn15").click(function(){
        //prevAll()   选出前面所有的元素
        $("span").prevAll("div").css("background-color","#bfa")
      });
      //(16)prevUntil() span向前直到#one的元素
      $("#btn16").click(function(){
        //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
        $("span").prevUntil("#one").css("background-color","#bfa")
      });
      //(17)siblings() #two的所有兄弟元素
      $("#btn17").click(function(){
        //siblings()    找到所有的兄弟元素，包括前面的和后面的
        $("#two").siblings("div").css("background-color","#bfa")
      });
      //(18)add()选择所有的 span 元素和id为two的元素
      $("#btn18").click(function(){
        //   $("span,#two,.mini,#one")
        $("span").add("#two").add("#one").css("background-color","#bfa");
      });
    });
  </script>
</head>
<body>    
  <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
  <input type="button" value="first()选择第一个 div 元素" id="btn2" />
  <input type="button" value="last()选择最后一个 div 元素" id="btn3" />
  <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
  <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
  <input type="button" value="has()选择div中包含.mini的" id="btn6" />
  <input type="button" value="not()选择div中class不为one的" id="btn7" />
  <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
  <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
  <input type="button" value="next()#one的下一个div" id="btn10" />
  <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
  <input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
  <input type="button" value="parent().mini的父元素" id="btn13" />
  <input type="button" value="prev()#two的上一个div" id="btn14" />
  <input type="button" value="prevAll()span前面所有的div" id="btn15" />
  <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
  <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
  <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
  <h3>基本选择器.</h3>
  <br /><br />
  文本框<input type="text" name="account" disabled="disabled" />
  <br><br>
  <div class="one" id="one">
    id 为 one,class 为 one 的div
    <div class="mini">class为mini</div>
  </div>
  <div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other"><b>class为mini,title为other</b></div>
    <div class="mini" title="test">class为mini,title为test</div>
  </div>
  <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
  </div>
  <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>
  <div style="display:none;" class="none">style的display为"none"的div</div>
  <div class="hide">class为"hide"的div</div>
  <span id="span1">^^span元素 111^^</span>
  <div>
    包含input的type为"hidden"的div<input type="hidden" size="8">
  </div>
  <span id="span2">^^span元素 222^^</span>
  <div id="mover">正在执行动画的div元素.</div>
</body>

Jquery 的属性操作

html() 跟innerHTML一样。设置和获取起始标签和结束标签中的内容

text() 跟innerText一样。设置和获取起始标签和结束标签中的文本

val() 跟value属性一样。专门用来操作表单项的value属性。

案例：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function() {
      // val()方法来操作
      //val()方法除了可以设置表单项的value属性值之外。
      // 还可以批量操作表单项的选中状态
      // $(":radio").val(["radio2"]);// 操作单选
      // $(":checkbox").val(["checkbox3","checkbox2","checkbox1"]);//批量操作复选框被选中
      // $("#multiple").val(["mul1","mul3","mul4"]);// 批量操作多选的下拉列表，多个被选中
      // $("#single").val(["sin3"]);// 操作单选的下拉列表，一个被选中
      $(":radio,:checkbox,#multiple,#single").val(["checkbox3","radio2","checkbox2","mul2","mul3","sin2"]);
    });
  </script>
</head>
<body>
  单选：
  <input name="radio" type="radio" value="radio1" />radio1
  <input name="radio" type="radio" value="radio2" />radio2
  <br/>
  多选：
  <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
  <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2  
  <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
  <br/>
  下拉多选 ：
  <select id="multiple" multiple="multiple" size="4">
    <option value="mul1">mul1</option>
    <option value="mul2">mul2</option>
    <option value="mul3">mul3</option>
    <option value="mul4">mul4</option>
  </select> 
  <br/>
  下拉单选 ：
  <select id="single">
    <option value="sin1">sin1</option>
    <option value="sin2">sin2</option>
    <option value="sin3">sin3</option>
  </select> 
</body>

attr() attr可以设置和获取属性的值。

prop() prop可以设置和获取属性的值。

prop方法它可以忽略undefined错误。checked属性、selected属性、disalbed属性，readonly属性，等。这些属性在dom对象中都会有true和false值的情况。

并且使用attr操作有返回undefined的情况下。使用prop方法。prop方法只推荐用来操作dom属性中值是true和false的属性。其他的属性都使用attr方法。

attr还有它强大的地方。它可以操作非标准的属性（自定义的属性）。

需求：

案例：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
  $(function(){
    // 全选
    $("#checkedAllBtn").click(function(){
      $(":checkbox").prop("checked",true);
    });
    // 全不选
    $("#checkedNoBtn").click(function(){
      $(":checkbox").prop("checked",false);
    });
    // 反选
    $("#checkedRevBtn").click(function(){
      // 全部球类的复选框
      $(":checkbox[name='items']").each(function(){
//        在遍历的each方法的function函数中，有一个this对象，
//        这个this对象是当前正在遍历到的dom对象
        this.checked = !this.checked;
      });
      // 需要检查一下，是否全部的球类复选框都选中了
      // 如果都选中了，设置【全选/全不选 】也选中，反之亦然
      // 获取全部的球类的个数
      var allCount = $(":checkbox[name='items']").length;
      // 获取选中的球类的个数
      var checkedCount = $(":checkbox[name='items']:checked").length;
      if (allCount == checkedCount) {
        // 全选啦
        $("#checkedAllBox").prop("checked",true);
      } else {
        // 还没选满
        $("#checkedAllBox").prop("checked",false);
      }
    });
    // 提交按钮
    $("#sendBtn").click(function(){
      // 选中的全部和复选框
      $(":checkbox[name='items']:checked").each(function(){
        alert(this.value);
      });
    });
    // 给【全选/全不选 】复选框绑定单击事件
    $("#checkedAllBox").click(function(){
      // 在事件的function函数中，也有一个this对象。这个this对象是当前正在响应事件的dom对象
      // 1 获取【全选/全不选 】的选中状态
//      alert( this.checked );
      // 2 把【全选/全不选 】的选中状态。设置给全部的球类
      $(":checkbox[name='items']").prop("checked",this.checked );
    });
    // 给每一个球类都要绑定单击事件
    $(":checkbox[name='items']").click(function(){
      // 在事件的function函数中，也有一个this对象。这个this对象是当前正在响应事件的dom对象
      // 需要检查一下，是否全部的球类复选框都选中了
      // 如果都选中了，设置【全选/全不选 】也选中，反之亦然
      // 获取全部的球类的个数
      var allCount = $(":checkbox[name='items']").length;
      // 获取选中的球类的个数
      var checkedCount = $(":checkbox[name='items']:checked").length;
      if (allCount == checkedCount) {
        // 全选啦
        $("#checkedAllBox").prop("checked",true);
      } else {
        // 还没选满
        $("#checkedAllBox").prop("checked",false);
      }
    })
  });
</script>
</head>
<body>
  <form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全　选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反　选" />
    <input type="button" id="sendBtn" value="提　交" />
  </form>
</body>

Dom的增删改

内部插入

appendTo(content)

a.appendTo(b); 把a加到b里面添加到最后面

prependTo(content)

a.prependTo(b); 把a添加到b里面添加到最前面

外部插入

insertAfter(content)

a.insertAfter(b); 把a插入到b的后面

insertBefore(content)

a.insertBefore(b); 把a插入到b的前面

替换

replaceWith(content|fn)

a.replaceWith(b) 把a用b替换

replaceAll(selector)

a.replaceAll(b) 用a替换所有的b

删除

empty()

a.empty() 把a掏空，把a里面的所有元素都删除（内容）

remove([expr])

a.remove(b) 所有的a，是b的话就会删除 a.remove()删除a （内容和结构）

案例：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>DOM增删改</title>
  <link rel="stylesheet" type="text/css" href="style/css.css" />
  <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
  $(function(){
    $("#btn01").click(function(){
      //创建一个"广州"节点,添加到#city下[appendTo()]
      //子节点.appendTo(父节点)
      $("<li>广州</li>").appendTo($("#city"))
    });
    $("#btn02").click(function(){
      //创建一个"广州"节点,添加到#city下[prependTo()]
      $("<li>广州</li>").prependTo($("#city"));
    });
    $("#btn03").click(function(){
      //将"广州"节点插入到#bj前面[insertBefore()]
      //前边.insertBefore(后边的)
      $("<li>广州</li>").insertBefore($("#bj"));
    });
    $("#btn04").click(function(){
      //将"广州"节点插入到#bj后面[insertAfter()]
      //后边.insertAfter(前边的)
      $("<li>广州</li>").insertAfter($("#bj"));
    });
    $("#btn05").click(function(){
      //使用"广州"节点替换#bj节点[replaceWith()]
      //被替换的.replaceWith()
      $("#bj").replaceWith("<li>广州</li>")
    });
    $("#btn06").click(function(){
      //使用"广州"节点替换#bj节点[replaceAll()]
      //新的节点.replaceAll(旧的节点)
      $("<li>广州</li>").replaceAll($("#bj"));
    });
    $("#btn07").click(function(){
      //删除#rl节点[remove()]
      //$("ul").remove("#rl");
      //$("#rl").remove();
      $("li").remove("#rl");
    });
    $("#btn08").click(function(){
      //掏空#city节点[empty()]
      $("#city").empty();
    });
    $("#btn09").click(function(){
      //读取#city内的HTML代码
      alert($("#city").html())
    });
    $("#btn10").click(function(){
      //设置#bj内的HTML代码
      alert($("#bj").text())
    });
  });
</script>
</head>
<body>
  <div id="total">
    <div class="inner">
      <p>你喜欢哪个城市?</p>
      <ul id="city">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li>
      </ul>
      <p>你喜欢哪款单机游戏?</p>
      <ul id="game">
        <li id="rl">红警</li>
        <li>实况</li>
        <li>极品飞车</li>
        <li>魔兽</li>
      </ul>
      <p>你手机的操作系统是?</p>
      <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
    </div>
    <div class="inner">
      gender:
      <input type="radio" name="gender" value="male"/>
      Male
      <input type="radio" name="gender" value="female"/>
      Female
      <br>
      <br>
      name:
      <input type="text" name="name" id="username" value="abcde"/>
    </div>
  </div>
  <div id="btnList">
    <div><button id="btn01">创建一个"广州"节点,添加到#city下[appendTo()]</button></div>
    <div><button id="btn02">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
    <div><button id="btn03">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
    <div><button id="btn04">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
    <div><button id="btn05">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
    <div><button id="btn06">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
    <div><button id="btn07">删除#rl节点[remove()]</button></div>
    <div><button id="btn08">掏空#city节点[empty()]</button></div>
    <div><button id="btn09">读取#city内的HTML代码</button></div>
    <div><button id="btn10">设置#bj内的HTML代码</button></div>
  </div>
</body>

JQuery练习

从左到右，从右到左练习

需求：

案例代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
  select {
    width: 100px;
    height: 140px;
  }
  div {
    width: 130px;
    float: left;
    text-align: center;
  }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
  $(function(){
    //【选中添加到右边】单击事件 
    $("button:eq(0)").click(function(){
      // 先查找出左边下拉列表中哪些option被选中
      // 调用appendTo()
      $("select:eq(0) option:selected").appendTo( $("select:eq(1)") );
    });
    //【全部添加到右边】单击事件 
    $("button:eq(1)").click(function(){
      // 先查找出左边下拉列表中哪些option被选中
      // 调用appendTo()
      $("select:eq(0) option").appendTo( $("select:eq(1)") );
    });
    //【选中删除到左边】单击事件 
    $("button:eq(2)").click(function(){
      // 先查找出左边下拉列表中哪些option被选中
      // 调用appendTo()
      $("select:eq(1) option:selected").appendTo( $("select:eq(0)") );
    });
    //【全部删除到左边】单击事件 
    $("button:eq(3)").click(function(){
      // 先查找出左边下拉列表中哪些option被选中
      // 调用appendTo()
      $("select:eq(1) option").appendTo( $("select:eq(0)") );
    });
  });
</script>
</head>
<body>
  <div id="left">
    <select multiple="multiple" name="sel01">
      <option value="opt01">选项1</option>
      <option value="opt02">选项2</option>
      <option value="opt03">选项3</option>
      <option value="opt04">选项4</option>
      <option value="opt05">选项5</option>
      <option value="opt06">选项6</option>
      <option value="opt07">选项7</option>
      <option value="opt08">选项8</option>
    </select>
    <button>选中添加到右边</button>
    <button>全部添加到右边</button>
  </div>
  <div id="rigth">
    <select multiple="multiple" name="sel02">
    </select>
    <button>选中删除到左边</button>
    <button>全部删除到左边</button>
  </div>
</body>

动态添加、删除表格记录（绝对的重点）

需求：

案例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 页面加载完成之后
$(function(){
  // 定义删除的函数，重复使用
  var deleteAFun = function(){
    var $trObj = $(this).parent().parent();
    // find 查找后代
    var name = $trObj.find("td:first").text();
    // confirm是javaScript中提供的一个确认提示框函数，
    // 它接收的参数就是提示框的提示文本内容
    // 这个确认提示框有两个按钮，一个确认，一个取消
    // 用户点击确认，就返回true
    // 用户点击取消，就返回false
    if( confirm("是否需要删除【" + name + "】吗?") ){
      $trObj.remove();
    }
    // 在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
    // 删除点击所在行
    // 不希望跳转怎么办？
    // return false 可以阻止元素的默认行为。
    return false;     
  }
  //提交按钮绑定单击事件
  $("#addEmpButton").click(function(){
    // 获取输入框中，名称，邮箱，工资
    var nameText = $("#empName").val();
    var emailText = $("#email").val();
    var salaryText = $("#salary").val();
    // 创建一个行对象
    var $trObj = $("<tr>"
      + "<td>" + nameText + "</td>"
      + "<td>" + emailText + "</td>"
      + "<td>" + salaryText + "</td>"
      + "<td><a href=\"deleteEmp?id=003\">Delete</a></td>"
      + "</tr>");
    // 找到创建出来的a标签，再给它绑定单击事件
    $trObj.find("a").click(deleteAFun);
    // 添加表表格中
    $trObj.appendTo( $("#employeeTable") );
  });
  // 给删除的a标签绑定单击事件
  $("a").click( deleteAFun );
});
</script>
</head>
<body>
<table id="employeeTable">
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Salary</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>tom@tom.com</td>
    <td>5000</td>
    <td><a href="deleteEmp?id=001">Delete</a></td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>jerry@sohu.com</td>
    <td>8000</td>
    <td><a href="deleteEmp?id=002">Delete</a></td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>bob@tom.com</td>
    <td>10000</td>
    <td><a href="deleteEmp?id=003">Delete</a></td>
  </tr>
</table>
<div id="formDiv">
  <h4>添加新员工</h4>
  <table>
    <tr>
      <td class="word">name: </td>
      <td class="inp">
        <input type="text" name="empName" id="empName" />
      </td>
    </tr>
    <tr>
      <td class="word">email: </td>
      <td class="inp">
        <input type="text" name="email" id="email" />
      </td>
    </tr>
    <tr>
      <td class="word">salary: </td>
      <td class="inp">
        <input type="text" name="salary" id="salary" />
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <button id="addEmpButton" value="abc">
          Submit
        </button>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

Web阶段：第五章：JQuery库（中）

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件