你的位置:首页 > ASP.net教程

[ASP.net教程]webform(九)——JQuery基础(选择器、事件、DOM操作)


JQuery —— 一个js函数包

一、选择器

1、基本选择器

①id选择器       ②class选择器       ③标签名选择      

④并列选择          ⑤后代选择

代码用法展示:

<title></title>  <script src="js/jquery-1.7.2.min.js"></script></head><body>  <form id="form1" runat="server">    <div id="div1">      <a>aaaaa</a> <%--a标记--%>    </div>    <div id="div2"></div>    <div class="div"></div>    <div></div>     </form></body></html><%--  $  JQuery标志性符--%><script type="text/javascript" >  $("#div1").css("background-color", "red"); //id选择,$("#div1")相当于js中docunment.getElementById("div1"),下面其他类似  $(".div2").css("background-color", "red");  //class选择  $("div").css("background-color", "red");   //标签选择  $("#div1,#div2").css("background-color", "red");  //并列选择,用逗号隔开  $("#div1 a").css("background-color", "red");  //后代选择,用空格隔开</script>

基本选择器

 

2、过滤选择器

(1)、基本过滤

①首个::first        ②尾个::last       ③任意个::eq(索引号)        ④大于::gt(索引号)

⑤小于::lt(索引号)         ⑥排除::not(选择器)         ⑦奇数:odd           ⑧偶数:even

(2)、属性过滤

①属性名过滤:[属性名]   

②属性值过滤:[属性名=属性值]或[属性名!=属性值]

(3)、内容过滤

①文字过滤::contains(“字符串”)

②子元素过滤::has(选择器)

代码用法展示:

<script src="js/jquery-1.7.2.min.js"></script></head><body>  <form id="form1" runat="server">    <div class="div">aaa</div>    <div class="div">bbb</div>    <div class="div" hehe="aaa" he="aaa"><a></a></div>    <div class="div" hehe="bbb">bbb</div>    <div class="div">aaa</div>    <div class="div"><a></a></div>  </form></body></html><script type="text/javascript" >  //基本过滤  $(".div:first").css("background-color", "red");  //取首个  $(".div:last").css("background-color", "red");  //取最后一个  $(".div:eq(2)").css("background-color", "red");  //取任意个, :eq(索引号) 或者$(".div").eq(2).css("background-color", "red");——重点  $(".div:gt(2)").css("background-color", "red");  //:gt(索引号),取大于该索引号的  $(".div:lt(2)").css("background-color", "red");  //:lt(索引号),取小于该索引号的  $(".div:not(.div:eq(2))").css("background-color", "red");  //:not(“选择器”),排除这一个,选剩余的  $(".div:odd").css("background-color", "red");  //:odd,选索引为奇数的  $(".div:even").css("background-color", "red");  //:even,选索引为偶数的  //属性过滤  $(".div[he]").css("background-color", "red");  //[属性名],选有该属性名的  $(".div[hehe=aaa]").css("background-color", "red");  //[属性名=属性值],选有该属性名且是此属性值的  $(".div[hehe!=bbb]").css("background-color", "red");  //[属性名!=属性值],选有该属性名的且属性值不是此的  //内容过滤  $(".div:contains('a')").css("background-color", "red");  //:contains('字符串'),选取包含该字符串的——根据文字  $(".div:has(a)").css("background-color", "red");  //:has(“选择器”),选取包含该选择器的——根据选择器</script>

过滤选择器

 

二、事件

1、常规事件——把js事件前面的on去掉

比如:js:onclick——JQuery:click

2、复合事件

①houver(function(){},functiaon(){})——相当于把mouseover()mouseout()合二为一

②toggle(function(){},function(){},....)——点击事件循环执行,具体看下面的代码用法展示

代码用法展示:

<script src="js/jquery-1.7.2.min.js"></script></head><body>  <form id="form1" runat="server">     <div class="div">aaa</div>    <div class="div">bbb</div>    <div class="div"><a></a></div>    <div class="div">bbb</div>    <div class="div">aaa</div>    <div class="div"><a></a></div>    </form></body></html><script type="text/javascript" >  //单击事件  $(".div").click(function () {    alert('aaa');  });  //双击事件  $(".div").dblclick(function () {    alert('aaa');  });  //复合事件hover——相当于把mouseover()mouseout()合二为一  $(".div").hover(function () {    $(this).css("background-color","red");  }, function () {    $(this).css("background-color", "blue");  });  //复合事件toggle——点击事件循环执行,下面代码中即点击div,循环为div更换背景色  $(".div").toggle(function () {    $(this).css("background-color", "red");  }, function () {    $(this).css("background-color", "yellow");  }, function () {    $(this).css("background-color", "blue");  }, function () {    $(this).css("background-color", "green");  }, function () {    $(this).css("background-color", "orange");  });</script>

常规和复合事件

 

3、事件冒泡(冒泡事件)——冒泡部分转载自:http://www.cnblogs.com/jiqing9006/archive/2012/09/11/2679831.html

      冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

解析:下面是html代码部分:

<body><div id="content">  外层div元素  <span>内层span元素</span>  外层div元素</div><div id="msg"></div></body>

对应的jQuery代码如下:

<script type="text/javascript">$(function(){  // 为span元素绑定click事件  $('span').bind("click",function(){    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息    $('#msg').html(txt);// 设置html信息  });  // 为div元素绑定click事件  $('#content').bind("click",function(){    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";    $('#msg').html(txt);  });  // 为body元素绑定click事件  $("body").bind("click",function(){    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";    $('#msg').html(txt);  });})</script>

冒泡Jquery

当点击span时,会触发div与body 的点击事件。点击div时会触发body的点击事件。

如何防止这种冒泡事件发生呢?

修改如下:

<script type="text/javascript">$(function(){    // 为span元素绑定click事件  $('span').bind("click",function(event){    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";    $('#msg').html(txt);    event.stopPropagation();  // 阻止事件冒泡  });  // 为div元素绑定click事件  $('#content').bind("click",function(event){    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";    $('#msg').html(txt);    event.stopPropagation();  // 阻止事件冒泡  });  // 为body元素绑定click事件  $("body").bind("click",function(){    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";    $('#msg').html(txt);  });})</script>

阻止冒泡一

event.stopPropagation(); // 阻止事件冒泡

或者通过return false来处理。

<script type="text/javascript">$(function(){    // 为span元素绑定click事件  $('span').bind("click",function(event){    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";    $('#msg').html(txt);    return false;  });  // 为div元素绑定click事件  $('#content').bind("click",function(event){    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";    $('#msg').html(txt);    return false;  });  // 为body元素绑定click事件  $("body").bind("click",function(){    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";    $('#msg').html(txt);  });})</script>

阻止冒泡二

 

 

三、DOM操作

1、操作内容

①表单元素:取值:var s=$(“选择器”).val()      

                       赋值:$(“选择器”).val(“值”)

②非标单元素:取值:var s=$(“选择器”).text(“内容”)            var s=$(“选择器”).text(“内容”)      

                          赋值:$(“选择器”).text(“内容”)       $(“选择器”).html(“内容”)

代码用法展示:

<script type ="text/javascript" >        //$(document).ready相当于js中的window.onload    $(document).ready(function () {      $("#a").click(function () {        $(this).text("bbbb");//改变a标记的显示内容      })      $("#btn1").click(function () {        $("#txt").val("aaaaaa");//改变文本框的显示内容        $(this).val("bbbb");//改变按钮的显示内容      })    });  </script></head><body>  <form id="form1" runat="server">  <%--操作内容  start--%>    <a id="a">aaaaa</a>    <input type ="text" id="txt" />    <input type ="button" id="btn1" value ="btn1" />    <%--操作内容  end--%>  </form></body>

操作内容

 

2、操作属性

①获取属性:var s=$(“选择器”).attr(“属性名”)

②设置属性:$(“选择器”).attr(“属性名”,”属性值”)

③更改属性:$(“选择器”).attr(“属性名”,”属性值”)

④删除属性:$(“选择器”).removeAttr(“属性名”)

代码用法展示:

<style type="text/css" >    .aaa {    border :5px solid red;    }    .bbb {    border :10px solid blue;    }  </style></head><body>  <form id="form1" runat="server">    <%--操作属性  start--%>    <input type ="text" id="txt1" />    <input type ="button" id="btn1" value ="btn1" />    <input type ="button" id="btn2" value ="btn2" />    <input type ="button" id="btn3" value ="btn3" />    <%--操作属性  end--%>  </form></body></html><script type ="text/javascript" >  $("#btn1").click(function () {    $("#txt1").attr("disabled", "disabled");//点击btn1按钮,给文本框设置不可用属性和class    $("#txt1").attr("class", "aaa");  });  $("#btn2").click(function () {    $("#txt1").removeAttr("disabled").attr("class","bbb");//点击btn2按钮,删除文本框不可用属性,并且更改class属性  });  $("#btn3").click(function () {    var aa = $("#txt1").attr("class");//点击btn3按钮,获取文本框的class属性,然后alert弹出看看    alert(aa);  });</script>

操作属性

 

3、操作样式(一般用操作属性就可以)

①操作内联样式:获取样式:var s=$(“选择器”).css(“样式名”)

                            设置样式:$(“选择器”).css(“样式名”,”值”)、

$("#btn1").click(function () {    $("#txt1").css("border", " 5px solid red");});

②操作样式表的class:添加class:$(“选择器”).addClass(“class名”)

                                    移除class:$(“选择器”).removeClass(“class名”)

                                    添加移除交替class:$(“选择器”).toggleClass(“class名”)

 

4、操作相关元素

 ①查找:父辈、前辈:parent()     parents(“选择器”)

                   子代、后代:children(“选择器”)   find(“选择器”)

                   兄弟:哥哥:prev()    prevAll(“选择器”)

                            弟弟:next()    next All(“选择器”)

用法代码展示:

<script src="js/jquery-1.7.2.min.js"></script>  <style type="text/css" >    #div1 {    width :400px;    height :400px;    background-color :red;    }    #div2 {    width :300px;    height :300px;    background-color :yellow;    }    #div3 {    width :200px;    height :200px;    background-color :blue;    }    #div4 {    width :100px;    height :100px;    background-color :green;    }  </style></head><body>  <form id="form1" runat="server">  <div id="div1">    <div id="div2">      <div id="div3">        <div id="div4"></div>      </div>    </div>  </div>    <div id="div5"></div>    <div id="div6"></div>    <div id="div7"></div>  </form></body></html><script type="text/javascript" >  $("#div4").click(function () {    var p = $(this).parent();//查找div4的父级    var p = $(this).parent().parent();//查找div4的父级的父级    var p = $(this).parents("#div2");//若知道前辈的id或name,可以用parents("选择器")  });  $("#div1").click(function () {    var p = $(this).children("#div2");//查找div1的子级,children("#div3")是找不出来的,div3是div1子集的子集    var p = $(this).find("#div3");//查找div1的后代div3  });  //div1、div5、div6、div7平级  $("#div1").click(function () {    var p = $(this).next();//查找div1的弟弟,可以next().next()    var p = $(this).nextAll("#div6");//nextAll("选择器"),前提知道需要查找的弟弟的选择器  });  $("#div7").click(function () {    var p = $(this).prev();//查找div1的哥哥,可以prev().prev()    var p = $(this).prevAll("#div6");//prevtAll("选择器"),前提知道需要查找的哥哥的选择器  });</script>

查找

②操作:新建:$(“html字符串”)

                  添加:appen(jquery对象或字符串)——某个元素内部添加

                           after(…)——下部平级添加

                           before(…)——上部平级添加

                 移除:empty()——清空内部全部元素

                          remove()——清空元素

                 复制:clone()

代码用法展示:例子:模仿制作一个微博或者其他的评论页面

<script src="js/jquery-1.7.2.min.js"></script>  <style type="text/css" >    #div1 {    width :400px;    height :400px;    background-color :red;    }    #div2 {    width :300px;    height :300px;    background-color :yellow;    }    #div3 {    width :200px;    height :200px;    background-color :blue;    }    #div4 {    width :100px;    height :100px;    background-color :green;    }  </style></head><body>  <form id="form1" runat="server">  <div id="div1">    <div id="div2">      <div id="div3">        <div id="div4"></div>      </div>    </div>  </div>    <div id="div5"></div>    <div id="div6"></div>    <div id="div7"></div>  </form></body></html><script type="text/javascript" >  $("#div4").click(function () {    var p = $(this).parent();//查找div4的父级    var p = $(this).parent().parent();//查找div4的父级的父级    var p = $(this).parents("#div2");//若知道前辈的id或name,可以用parents("选择器")  });  $("#div1").click(function () {    var p = $(this).children("#div2");//查找div1的子级,children("#div3")是找不出来的,div3是div1子集的子集    var p = $(this).find("#div3");//查找div1的后代div3  });  //div1、div5、div6、div7平级  $("#div1").click(function () {    var p = $(this).next();//查找div1的弟弟,可以next().next()    var p = $(this).nextAll("#div6");//nextAll("选择器"),前提知道需要查找的弟弟的选择器  });  $("#div7").click(function () {    var p = $(this).prev();//查找div1的哥哥,可以prev().prev()    var p = $(this).prevAll("#div6");//prevtAll("选择器"),前提知道需要查找的哥哥的选择器  });</script>

css

前台代码:

总代码
  <title></title>  <script src="js/jquery-1.7.2.min.js"></script>  <link href="css/css7.css" rel="stylesheet" /></head><body>  <form id="form1" runat="server">    <div id="boss">      <div id="top">        <textarea id="txt1"></textarea>        <input type="button" id="btn1" value="提交" />      </div>      <div id="bottom">        <%--评论div  start--%>        <div class="item">          <div class="item_top">aaaaaaaa</div>          <div class="item_txt">            aaaaaaa            </div>          <div class="item_bottom">            1999-1-1            <input type="button" class="btn_del" value="删除" />          </div>        </div>        <%--评论div  end--%>      </div>    </div>  </form></body></html><script type="text/javascript">  $("#btn1").click(function () {    var oTxt = $("#txt1").val();//取文本框的内容    var aaa = "<div class=\"item\">";    aaa += "<div class=\"item_top\">aaaaaaaa</div><div class=\"item_txt\">";    aaa += oTxt;    aaa += "</div><div class=\"item_bottom\">";    aaa += "1999-1-1 <input type=\"button\" value=\"删除\" class=\"btn_del\" /></div></div>";//拼接评论div的字符串    //判断是否已有评论    if ($(".item").length <= 0) {      $("#bottom").append(aaa);//若没有,直接在 $("#bottom")内部添加一个    }    else {      $(".item").eq(0).before(aaa);//若有,从索引为0的一个,上部平级添加      //$(".item").eq(0).after(aaa);//若有,从索引为0的一个,下部平级添加    }  });  //live()——未来事件,即给还没有出现但一定会出现的元素添加事件,只要这个class是.btn_del的元素出现,就会绑上这个事件  $(".btn_del").live("click", function () {    $(this).parent().parent().remove();  });</script>