1.入口函数
$(document).ready(function(){})
$(function(){})
$(window).ready(function(){})
2.$===jQuery
3.CSS样式
selector.css({"width":100,"height":100,"background":"red"});
selector.css("width",100);
4.js对象转换成jquery对象 $(js对象)
jquery对象转换成js对象 (1)jquery对象[0] (2)jquery对象.get(索引值)
5.案例
(1)varjqdiv=($div);
jqdiv.css("background","black");
(2)varjqdiv=($div);
for(var i=0;i<jqdiv.length;i++){
jqdiv[i].style.backgroundColor="black";
}
6.层级选择器
$("ul li")子子孙孙 $("ul>li")子代
7.筛选选择器
find:在jq对象后代查找
ul.find("li").css("backgroundColor","red");
不写参数获取所有子元素
console.log(ul.children());
从jquery对象的子代中查找
ul.children("li").css("backgroundColor","red");
查找所选元素中第几个元素
console.log(ul.children("li").eq(1));
eq():从jquery对象的子代中查找该索引值的元素,从0开始
ul.children().eq(1).css("backgroundColor","red");
prev():该元素的上一个兄弟元素
ul.().children().eq(0).prev().css("backgroundColor","red")
next():该元素的下一个兄弟元素
ul.children().eq(0).next().css("backgroundColor","red");
siblings():该元素的所有兄弟元素,除去自己以外
ul.children().eq(1).siblings().css("backgroundColor","red");
parent():某元素的父元素
ul.children().eq(0).parent().css("backgroundColor","red");
8.$(this).index()相对于同胞元素的位置,俗称索引值
9.设置多个样式
$(selector).css({"width":100,"height":100})
设置多个样式
$(selector).css("background","red")
获取样式
$(selector).css("background")
10.类操作
$(selector).addClass("current");
删除类
$(selector).removeClass("current")
判断类
$(selector).hasClass("current") 有:true 无:false
切换类
$(selector).toggleClass("current")
11.show(执行时间,function(){})显示
hide(执行时间,function(){})隐藏
toggle(执行时间,function(){})切换
12.slideUp(时间,function(){})向下滑入,通过改变高度
slideDown(时间,function(){})向上滑出
slideToggle(时间,function(){})切换
13.fadeIn(时间,function(){})淡入 通过控制透明度
fadeOut(时间,function(){})淡出
fadeToggle(时间,function(){})切换
fadeTo()(时间,透明度,function(){})
14.创建节点$("<li class='aa'>我是li标签</li>");
$("ul").html("<li>我是li标签</li>")
15.添加节点
$("ul").append(newLi);newLi.appendTo($("ul")); 在盒子末尾添加
$("ul").prepend(newLi);newLi.prependTo($("ul"));在盒子最前边添加
16.$("li").before(newLi);$("li").after(newLi)在兄弟元素之前或之后添加
17.清空节点
$("ul").html(""); $("ul").empty();
删除元素 自杀式
$("li").eq(0).remove()
$(this).parent().children("div").remove();
18.复制节点
var Newul=$("ul").clone();
$(".box").append(Newul);
19.属性操作
$("div").attr("aaa","111");两个参数表示设置该属性的值 可以添加到标签上
$("div").attr("aaa");一个参数表示获取该属性值
20.移出属性
$("div").removeAttr("class")选择要移出的属性,必须
21.$("checkbox").click(function(){
console.log($(this).prop("checked"));
选中时输出true,取消时输出false
})
22.在设置checked,等时候,要用prop()方法
$("checkbox").prop("checked",true);
23.获取状态值,返回true或false
$("checkbox").prop("checked");
24.val()获取标签的value属性的值,带参数表示设置
text()获取文本值
html()获取文本值,识别标签
25.获取高度$("div").height() 设置高度$("div").height(200)
获取宽度$("div").width() 设置宽度$("div").width(200)
获取边距. innerWidth()获取内边距和内容宽度 outerwidth获取内边距+边框+内容宽度
26.距离页面最顶端或者最左侧的距离和定位无关
$("div").offset().top;
$("div").offset().left
设置距离,和定位没有关系
$("div").offset({"top":100,"left":100})
距离父系盒子中带有定位的盒子的距离(获取的就是定位值,和margin/padding无关)
$("div").position().top
$("div").position().left
设置距离
$("div").position().top="100px"
$("div").position().left="100px"
获取被卷去的头部
$(window).scrollTop()
设置卷去的距离
$(window).scrollLeft(100)
27.绑定事件
这种绑定事件不会层叠掉
$(document).click(function(){
alert(1);
})
$(document).click(function(){
alert(2);
})
bind不推荐,1.7以后不使用,可以同时绑定多个事件
$(document).bind("click mouseenter",function(){
alert(1);
})
$(document).bind("click mouseenter",function(){
alert(2);
})
delegate支持动态创建出来的元素绑定事件
$(document).delegate("div","click mouseenter",function(){\
alert(1)
})
on
$(document).on("click mouseenter","div",{"name",11},function(event){
alert(event.data.name)
})
28.事件解绑
$("div").unbind("click")
$("div").delegate("click")
$("div").off("click")
29.end(),prevAll(),nextAll()使用
$(this).text(have).prevAll("li").text(have).end().nextAll("li").text(none);
30.$("ul li").each(function (index,element){
$(element).css("opacity",(index+1)/10);
})
31.$(this).index() 相对于同胞元素的位置,俗称索引值
32.$(".div").fadeIn(1000).delay(1000).fadeOut(1000)
33.$.each(数组,function(i,value){
})
$("ul li").each(function (index,element) {
$(element).css("opacity",(index+1)/10);
});
34.获取自定义属性
$(selector).data("pid");