jquery备忘

一、jquery基础

1文档就绪函数

$(document).ready(function(){};)
【防止文档在完全加载之前运行jQuery代码】

2 jQ选择器

a）元素选择器
$("p") $("p.intro") $("p#demo")
b）属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
c）CSS3选择器可用于改变html元素css属性
$("p").css("background-color","red");

3 事件

$("button").click(function(){})
$("p").hide();
dbclick、focus、mouseover.....

4 常用效果

a）隐藏显示 $("p").hide(speed,callback) $("p").show()
$("button").click(function(){
$("p").toggle();
});
b）淡入淡出
$("p").fadeIn(speed,callback) $("p").fadeOut(speed,callback)
$("p").fadeToggle(speed,callback)
$(selector).fadeTo(speed,opacity,callback);允许渐变为给定的不透明度
c）滑动
$("p").slideDown() $("p").slideUp()
$("p").slideToggle()
d）动画
$("div").animate({left:"250px"});

二、jQuery HTML

1 、获得内容和属性

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• attr()-获取属性
  $("p").click(function(){
  alert($("#test").text());
  alert($("#test").attr("href"));
  });

2、设置内容和属性

$("#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(){
$("a").attr("href","http://baidu.com");
//同时设置多个属性
$("a").attr({
"href":"http://www.baidu.com",
"title","yhj"
});
});

3、添加元素

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

4、删除元素

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

5、获取并设置css类

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性
  $("button").click(function(){
  $("#div1").addClass("important blue");
  });
  1返回css属性 $("#div1").css("color");
  2设置css属性
  $("#div1").css("color","red");
  $("#div2").css({"background-color":"yellow","font-size":"200px"});

6、尺寸的获取

• width() 设置或返回元素的宽度（不包括内边距、边框或外边距）
• height() 设置或返回元素的高度
• innerWidth() 返回元素的宽度（包括内边距）
• innerHeight() 返回元素的高度（包括内边距）。
• outerWidth() 返回元素的宽度（包括内边距和边框）
• outerHeight() 返回元素的高度（包括内边距和边框）
  $("#div1").width(500).height(500);
  //设置指定的 <div> 元素的宽度和高度

三、jQuery 遍历

根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止

image.png

a 祖先： 向上遍历 DOM 树

• parent() 返回被选元素的直接父元素
• parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素
• parentsUntil() 返回介于两个给定元素之间的所有祖先元素

b 后代： 向下遍历DOM树以查找元素的后代

• children() 返回被选元素的所有直接子元素
• find() 返回被选元素的后代元素，一路向下直到最后一个后代
  $("div").find("*"); // 返回 <div> 的所有后代

c 同胞 水平遍历

• siblings() 返回被选元素的所有同胞元素
• next() 返回被选元素的下一个同胞元素
• nextAll() 返回被选元素的所有跟随的同胞元素
• nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
• prev()
• prevAll()
• prevUntil()

$(document).ready(function(){
$("h2").siblings().css({"color":"red","border":"1px solid gray"});
})

$("h2").siblings("p"); // 返回属于 <h2> 的同胞元素的所有 <p> 元素

$("h2").nextUntil("h6"); // 返回介于 <h2> 与 <h6> 元素之间的所有同胞元素

d 过滤

• first() 返回被选元素的首个元素
• last() 返回被选元素的最后一个元素
• eq() 返回被选元素中带有指定索引号的元素\
• filter() 匹配的元素会被返回
• not() 返回不匹配标准的所有元素

$(document).ready(function(){
$("p").eq(1); // 索引号从 0 开始
$("p").filter(".intro"); // 返回带有类名 "intro" 的所有 <p> 元素
});