4.jquery的使用

来源：互联网发布：暴雪泰坦计划知乎编辑：程序博客网时间：2024/06/05 14:09

定义:jQuery是一个兼容多浏览器的javascript库.

理念:write less,do more(写得更少,做得更多)。

使用:

(1)调用库

(2)文件中应用

<html>

<head>

$(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();

});

其他的效果:

显示被隐藏的元素，并隐藏已显示的元素：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");

0 0