定义:jQuery是一个兼容多浏览器的javascript库.
理念:write less,do more(写得更少,做得更多)。
使用:
(1)调用库
<script type="text/javascript" src="jquery.js"></script>
(2)文件中应用
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
(3)基本语法
基础语法是:$(selector).action()
-
美元符号定义 jQuery
-
选择符(selector)“查询”和“查找” HTML 元素
-
jQuery 的 action() 执行对元素的操作
(4)jQuery 效果
例子:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
其他的效果:
显示被隐藏的元素,并隐藏已显示的元素:toggle()
淡入淡出:fadeIn(),fadeOut(),fadeToggle(),fadeTo()
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
滑动:slideDown(),slideUp(),slideToggle()
动画: $("div").animate({left:'500px'});
动画停止:
$("#stop").click(function(){
$("#panel").stop();
});
Chaining:$("#p1").css("color","red").slideUp(2000).slideDown(2000);
格式修改后:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
(5)jquery html
★获取
jQuery 拥有可操作 HTML 元素和属性的强大方法。
-
text() - 设置或返回所选元素的文本内容
-
html() - 设置或返回所选元素的内容(包括 HTML 标记)
-
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
获取表单值
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
获取属性
$("button").click(function(){ alert($("#w3s").attr("href")); });
★设置
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
★添加
-
append() - 在被选元素的结尾插入内容
-
prepend() - 在被选元素的开头插入内容
-
after() - 在被选元素之后插入内容
-
before() - 在被选元素之前插入内容
$("p").append("Some appended text.");
★删除
-
remove() - 删除被选元素(及其子元素)
-
empty() - 从被选元素中删除子元素
例子:
$("#div1").empty();
$("p").remove(".italic");
★获取并设置 CSS 类,CSS样式属性
-
addClass() - 向被选元素添加一个或多个类
-
removeClass() - 从被选元素删除一个或多个类
-
toggleClass() - 对被选元素进行添加/删除类的切换操作
-
css() - 设置或返回样式属性
注:css类和css的属性不同...css只负责控制属性
例子:
.important { font-weight:bold; font-size:xx-large; }
.blue { color:blue; }
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
CSS样式属性例子:
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
尺寸
-
width()
-
height()
-
innerWidth()//包括内边距
-
innerHeight()
-
outerWidth()
-
outerHeight()
★遍历
祖先
-
parent()
-
parents()
-
parentsUntil()
后代
-
children()//直接的儿子
-
find()//后面都可以遍历
$("div").find("*");
同胞
-
siblings()
-
next()
-
nextAll()
-
nextUntil()
-
prev()
-
prevAll()
-
prevUntil()
过滤
-
first()//第一个
-
last()//最后一个
-
eq()//索引,就是顺序是第几个
$("p").eq(1);
-
filter()
-
not()
规定一个标准,
再进行选取..
$("p").filter(".intro").css("background-color","yellow");