Jquery--JS的函数包
Jquery-----JS的函数包，直接来调用方法。
一、基本知识
用法：把jquery-1.7.2.js直接复制到要做的网站项目中，拖拽引用和JS用法一样。
二、选择器
【1】基本：
1、取ID：var b= $("#div1");
var a = document.getElementById('div1'); 和 var b= $("#div1");是一样的
2、取class：$(".div");
3、取标签：$("div"); 直接打标记名
【2】组合：
1、并列取：用逗号 隔开
2、后代取：用空格 隔开
【3】过滤选择器：
1、基本过滤：
.首: $(".div:first").css("background-color","red");
.尾: $(".div:last").css("background-color","red");
.取任意一个（等于）：$(".div:eq(2)").css("background-color","red"); 2表示索引
.大于：$(".div:gt(2)").css("background-color","red");
.小于：$(".div:lt(2)").css("background-color","red");
.排除：$(".div:not(.div:eq(2))").css("background-color","red"); :not(选择器)
.奇：$(".div:odd").css("background-color","red");
.偶：$(".div:even").css("background-color","red");
2、属性过滤：
.属性名过滤：$(".div[id]").css("background-color","red");
.属性名值的过滤：[属性名=值] [属性名!=值]
3、内容过滤：
.文字：$(".div:contains('a')").css("background-color","red");
.子元素：$(".div:has("选择器")").css("background-color","red");
三、事件：
【常规事件】
1、单击：
$(".div").click(function () {
alert('aaa');
});
2、双击：
$(".div").dblclick(function () {
alert('aaa');
});
3、复合事件：
●hover(function(){},function(){});
列如：做光棒效果
$(".div").hover(function () {
$(this).css("background-color","red");
}, function () {
$(this).css("background-color", "white");
});
●toggle(function(){},function(){},........);点击事件循环执行
可以 用来点击换图片，最后一个function(){} 不加逗号
$(".div").toggle(function () {
$(this).css("background-color", "red");
}, function () {
$(this).css("background-color", "blue");
}, function () {
$(this).css("background-color", "green");
}, function () {
$(this).css("background-color", "black");
}, function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "red");
});
●未来元素：对象.live("事件名",function(){});
【事件冒泡】阻止事件冒泡
$(".aaa").click(function () {
alert($(this).attr("id"));
return false;//阻止
});
四、DOM操作
【操作内容】
1、表单元素：
取值：var s=$("选择器").val()
赋值：$("选择器").val("值")
2、非表单元素：
取值：var s=$("选择器").html(), var s=$("选择器").text()
赋值：$("选择器").html("内容"), var s=$("选择器").text()
<script type="text/javascript"> $(document).ready(function () { 如果要放到head里必须写这条，一个页面只有一个 $("#a").click(function () { $(this).text("bbbb"); 点击aaaaa替换成bbbb }); $("#btn1").click(function () { 点击按钮替换成bbbb $("#txt").val("aaaaaa"); $(this).val("aaaaaa"); }); }); </script> </head> <body> <form id="form1" runat="server"> <a id="a">aaaaa</a> <input type="text" id="txt" /> <input type="button" value="btn1" id="btn1" /> </form>
【操作属性】
1、获取属性
var s=$("选择器").attr("属性名")
2、设置属性
$("选择器").attr("属性名","属性值")
3、删除属性
$("选择器").removeAttr("属性名")
【操作样式】
1、操作内联样式
获取样式：var s=$("选择器").css("样式名")
设置样式：$("选择器").css("样式名","值")
2、操作样式表的class
添加class:$("选择器").addClass("class名")
移除class:$("选择器").removeClass("class名")
添加移除交替class:$("选择器").toggleClass("class名")
【操作相关元素】
1、查找
父、前辈：parent()、parents()
子、后代：children(选择器)-子级，find(选择器)-后代
<script type="text/javascript">
$("#div4").click(function () {
var p = $(this).parent().parent();
alert(p.attr("id"));
});
$("#div1").click(function () {
var p = $(this).children("#div3");
alert(p.attr("id"));
});
</script>
兄弟：
prev（）上一个
prevAll(选择器)
next() 后面的一个元素
nextAll(选择器) 后面兄弟级的元素
<script type="text/javascript">
$("#div4").click(function () {
var p = $(this).prevAll("#div1");
alert(p.attr("id"));
});
</script>
2、操作：
新建：$("HTML字符串")
添加：appen(jquery对象) 内部添加，after(...)下部平级添加， before("...") 上部平级添加
移除：remove() 移除元素， empty() 清空内部全部元素
复制：clone()
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<style type="text/css"> #boss { position:relative; width:70%; height:600px; left:15%; background-color:#e0e0e0; } #top { position:relative; width:80%; left:10%; height:30%; background-color:#0ff; overflow:hidden;/*超出部分隐藏*/ } #txt1 { position:relative; width:100%; height:70%; } #bottom { position:relative; width:80%; left:10%; height:70%; background-color:#ffd800; overflow:auto;/*出现滚动条*/ } .item { position:relative; width:90%; left:5%; margin-top:10px;/*间距*/ background-color:#00ff21; } .item_top { position:relative; width:80%; height:30px; left:10%; line-height:30px;/*字的行高*/ border-bottom:1px solid black;/*底部加一条横实线*/ } .item_txt { position:relative; width:80%; left:10%; word-break:break-all;/*文字内容自动换行*/ } .item_bottom { position:relative; width:80%; height:30px; left:10%; line-height:30px;/*字的行高*/ text-align:right;/*字在右边*/ border-top:1px solid black;/*上部加一条横实线*/ } </style> </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 class="item"> <div class="item_top">aaaaaa</div> <div class="item_txt">wddddd</div> <div class="item_bottom"> 2016-10-19 <input type="button" value="删除" /> </div> </div>--%> </div> </div> </form> </body> </html> <script type="text/javascript"> $("#btn1").click(function () { var otxt = $("#txt1").val();/*点击按钮取出txt1*/ var aa="<div class=\"item\">"; aa+="<div class=\"item_top\">aaaaaa</div><div class=\"item_txt\">"; aa+=otxt; aa+="</div><div class=\"item_bottom\">"; aa+="2016-10-19 <input type=\"button\" value=\"删除\"class=\"btn_del\" /></div></div>"; // $("#bottom").append(aa);/*追加在下面*/ if ($(".item").length <= 0) {/*打开一条也不显示，那取出追加上*/ $("#bottom").append(aa); } else { $(".item").eq(0).before(aa);/*如果有追加在第一个的上面*/ } }); $(".btn_del").live("click",function () {/*删除*/ $(this).parent().parent(). remove();/*清空*/ }); </script>
