<script type="text/javascript" src="./jquery-1.7.2.min.js"></script> <script type="text/javascript" defer> //======================================过滤 Filtering====================================== //通过包装集的索引值找到指定包装集元素 $("input").eq(0); //找到返回给定JQuery包装集每一个元素下面的符合条件的子元素的包装集 $("#divPop").find("div"); //从给定的包装集中过滤选出符合条件的包装集 $("input").filter("#button1"); //判断两个包装集中是否有相同包装集元素，有一个相同的就返回真，完全不同则返回假 $("input").is("#text1"); //给map()方法一个JQuery包装集，map()方法可以对该包装集内的每个元素进行改变，然后返回一个改变后的JQuery包装集 //返回的JQuery包装集可以是html元素的JQuery包装集，可以是JS数组的JQuery包装集如果是数组包装集想取其中的值就直接后面加中括号加索引，因为数组包装集没有value属性，自身就是值。 var row_text1button1=$("#text1,#button1").map(function(){ $(this).val("aab"); //return this; //return "abcde"; }); //alert(row_text1button1.eq(0).val()); //alert(row_text1button1[0]); //返回一个在原有包装集中删除了指定包装集元素的包装集，not括号里为指定要删除的元素，原包装集不变 $("input").not("#text1"); //返回从指定索引开始到另一个指定索引之前结束之间的包装集，第一个索引对应元素算返回范围内，第二个索引对应元素不算返回范围内 $("input").slice(0,1); //======================================查找 Finding====================================== //返回包装集中每个元素后面的第一个同辈元素 $("#text1").next(); //返回包装集中每个元素后面的所有同辈元素 $("#text1").nextAll(); //返回包装集每个元素前一个同辈元素包装集 $("#button1").prev(); //返回包装集中每个元素前面所有同辈元素包装集 $("#button1").prevAll(); //找出包装集每个元素的所有同辈元素 $("input").siblings(); //返回指定包装集所有直接子元素包装集 $("#divPop").children(); //返回包装集每一个元素的直接父元素包装集 $("input").parent(); //返回包装集每一个元素的所有父元素包装集，这个方法把<HTML>标签当做最高父元素 $("#div_inner").parents(); //返回前一个$("div")包装集与后面的.find("input")找到的包装集的合集包装集 $("div").find("input").andSelf(); //当原包装集内容改变时返回改变前的内容，这里仍返回$("div")的包装集内容 $("div").find("input").end(); //======================================其他方法====================================== //在DOM载入就绪能够读取并操纵时立即调用所绑定的函数 $().ready(function(){ //alert(); }) //bind绑定一个事件处理器函数。起到事件监听的作用。 $("#button1").bind("click",function(){ //alert("click_button"); }); //如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数 $("#text1").toggle(function(){ alert("a"); },function(){ alert("b"); }) //change侦测值是否有改变 $("#gooodsType_sel").change(function(){ if($("#gooodsType_sel").val() == 2) $("#kaHao_span").show(); else $("#kaHao_span").hide(); }); //设置包装集的value属性值，如果val()括号里无值则返回包装集的value属性值 //<select>标签则可以直接通过此方法获取当前选中项的值 $("#text1").val("bcd"); //设置给定包装集的html内容，html()括号中无值则返回该包装集的html内容 //html内容就是元素网页上标签间的所有字符 $("div").eq(1).html("弹出层1"); //获取标签内的文本字符串，如赋值和html()一样，重写标签内所有字符 $("div:first").text(); //清空包装集的html内容 $("#divPop").empty(); //去掉给定字符串两边开头的空格，返回一个字符串 $.trim(" as df "); //i为每次沥遍的索引值，n为每次沥遍的元素对象相当this，为DOM元素 $("input").each(function(i,n){ //alert(i); }) //移除指定JQuery对象 $("#frist_txt").remove(); //添加一个"<div><p>Hello</p></div>"到id=divPop元素标签中 //如果把"<div><p>Hello</p></div>"换成页面已有元素，如"#text1"则是把"#text1"元素移动到"#divPop"里 $("<div><p>Hello</p></div>").appendTo("#divPop"); //给id=divPop元素标签中添加一个"<div><p>Hello</p></div>"。和上面效果一样，只是实现方式不同 $("#divPop").append("<div><p>Hello</p></div>"); //给id=divPop元素标签后面添加一个"<span>Hello world!</span>" $("<span>Hello world!</span>").insertAfter("#divPop"); $("#button1").click(function(){ //克隆一个对象添加到指定对象标签前 var text1=$("#text1").clone(true); text1.insertBefore("#button1"); //利用查找父元素复制添加 //var div=$(this).parent().clone(true); //div.insertBefore("#button1"); }) //======================================方法技巧====================================== //让文本框获得的焦点在文字右边 $("#button1").click(function(){ $("#text1").focus() $("#text1").val($("#text1").val()); }); //当鼠标移动到文本框时改变字体颜色。用.连续为一个元素捆绑多个事件。 $("#text1").mouseover(function(){ $(this).addClass("color"); }).mouseout(function(){ $(this).removeClass("color"); }) </script> <style type="text/css"> .color{color:#f00;} </style> <input type="text" name="frist_txt" id="frist_txt" value="frist_txt"/> <div> 第一个DIV <input type="text" id="text1" value="abc"/> <input type="button" id="button1" value="button" /> </div> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; 300px; height: 100px; position:absolute;"> <div style="text-align: center;">弹出层 <div id="div_inner"></div> </div> <input type="text" id="text2" value="abc"/> </div> <SELECT name="gooodsType_sel" id="gooodsType_sel" > <OPTION value="0">选择一</OPTION> <OPTION value="1">选择二</OPTION> <OPTION value="2">选择三</OPTION> </SELECT><span id="kaHao_span"><input type="text"/></span>