jqyery学籍资料总结
元素选择器
$(document).ready(function(){
$("button").click(function(){
$("h2").hide();
})
})
id选择器，class选择器，所有选择器，当前对象this,子类选择器 首个元素 超链接隐藏，按钮
$("#click1").hide();
$(this).hide();
$("ul li:first").hide();
$("ul li:first-child").hide();
$("[href]").hide();
$(":button").hide()
设置样式：
$("tr:odd").css("background-color","yellow");
---------------------------------
jquery 事件
click dblclick mouseenter mouseleave scroll keypress keydown keyup submit change focus blur
load resize scroll unload
当前对象点击消失
$("p").click(function(){
$(this).hide();
滑动事件：
$(document).ready(function(){
$("#p1").mouseenter(function(){
$("p").css("color","red");
});
$("#p1").mouseout(function(){
$("p").css("color","blue");
});
});
显示、隐藏
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
$("button").click(function(){
$("p").toggle();
});
带渐变效果的显示隐藏
fadeIn()
$("#div1").fadeIn();
$("#div2").fadeIn("fast"); 慢slow
$("#div3").fadeIn(3000);
fadeOut()
fadeToggle() 方法
双击显示和隐藏效果
$(document).ready(function(){
$(":button").dblclick(function(){
$("div").fadeToggle();
})
});
不透明的设置 区间大小0-1
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'450px',
width:'450px'
});
});
});
注意需要设置position
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
动态控制显示隐藏，不要要分号结尾
$("div").animate({
height:'toggle'
滑动改变div大小效果
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'80px'},"slow");
div.animate({font:'宋体'},"slow");
});
});
隐藏提示
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
});
jquery获取文本框的值
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
获取超链接的值
alert($("#w3s").attr("href"));
改变文本框的值
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
DOM操作添加元素
在尾部添加
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
在开头添加数据
prepend() 方法
例子：
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>Before</b>"); }); $("#btn2").click(function(){ $("img").after("<i>After</i>"); }); }); </script> </head> <body> <img src="/images/logo.png" > <br><br> <button id="btn1">Insert before</button> <button id="btn2">Insert after</button> </body> </html>
删除元素
$("#div1").remove();
div内容清空
$("#div1").empty();
过滤删除
$("p").remove(".italic");
-------------------------------------------------
给边框添加样式：
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-size:xx-large;
color:"orange";
}
.blue
{
color:green;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div>
<br>
<button>Add classes to elements</button>
</body>
</html>
删除样式
$("h1,h2,p").removeClass("blue");
toggle样式
$("h1,h2,p").toggleClass("blue");
设置css样式
$("p").css("background-color","yellow");
设置多个样式
$("p").css({"background-color":"yellow","font-size":"200%"});
获取div的宽度和高度
$("#div1").width()
