JQuery —— 一个js函数包
一、选择器
1、基本选择器
①id选择器 ②class选择器 ③标签名选择
④并列选择 ⑤后代选择
代码用法展示：
<title></title> <script src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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>
原标题：webform（九）——JQuery基础（选择器、事件、DOM操作）
关键词：jquery
我知道了 