<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;
width: 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>
