JQuery的一些方法
jQuery稳定的版本1.7.2和1.8.3比较稳定的较早的版本。
选择器
$("*")表示所有的元素
$(this)表示选择当前的元素
$("p.intro")表示p标签里面的class=intro元素
$("p:first")表示选择第一个p标签
$("[href]")表示选取所有带有href属性的元素
$("a[target="_blank"]")选取所有a标签里的target属性等于
_blank的元素。
$(":button")选取所有type="button"的input标签和button元素
$("p:event")选择偶数的p标签
$("p:odd")选择奇数的p标签
jQuery里面的事件
click(function(){})点击事件
dbclick双击事件
mouseenter表示鼠标移入的事件
mouseleave表示鼠标移除的事件
keypress键盘按下弹起的事件
keydown键盘点下的事件
keyup键盘弹起的事件
focus获得焦点事件
blur失去焦点的事件
load窗口事件
resize表示窗口事件
$(document).resize(function(){
})表示加载完成后执行的东西
$(function(){
})同上
$(".b").hover(function(){},function(){})hover的效果
$(".b").hide()隐藏
$(".b").show()显示
$(".b").toggle()循环显示隐藏
$(".b").fadeIn()淡入的效果
fadeOut()淡出的效果
fadeToggle()淡出切换
fadeTo("slow",0.15);
slideDown()表示划下的效果
slideUp()表示划出的效果
slideToggle()表示切换的上下滑动
$(".b").animate({"left":"21px"},1000)
动画效果，事件为1s
$(".b").delay(4000)表示延迟的时间为4s钟
stop()结束动画效果
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
表示链接的事件，一个一个的实行，由左往右执行。
写事件的写法
$(".a").on("click",function(){
$(this).prop("value")
})
animate({top:"100px"},1000,"easeInOutExpo")
easeInOutExpo曲线运动
animate({width:100},100,function(){
display:none;
})里面可以在后面加一个函数，表示执行完前面的
在执行后面的函数
选择器
$(".a+.b")表示在其后面紧跟着的一个元素
$(".a").nextAll()紧跟着后面的所有元素
$(".a~.b")紧跟后面所有的.b元素。
$(".b:first")第一个出现的.b元素
$(".b:last")最后一个出现的.b元素
$(".b:even")出现.b偶数个的.b元素
$(".b:odd")出现.b奇数个的.b元素
$(".b:gt(0)")下标大于0的元素
$(".b:lt(2)")下标小于2的元素。
添加节点和删除节点
var a=$("<div></div>")
a.appendTo($("body"))
$("body").append(a) 在里面添加节点添加在后面
$("body").appendTo(a) 在里面添加元素
$("body").after(a) 在外面添加，与其同级并添加到后面
$(".a").before(a) 在外面添加，与其同级并添加到前面
$(".a").prepend(a) 在里面追加元素。元素添加在子级最前面
$(".a").wrap("<div></div>")在.a的元素外面套一层div盒子
$(".a").replaceWith("<strong></strong>")
把a的标签替换为strong标签
添加节点
删除节点
$(".a").empty()
$(".a").remove()
$(".a").detach()
获取元素
$(".a").parent()获取.a的上一个父级
$(".a").parents()获取.a的最顶部的父级 可以在括号里带参数
表示返回到对应的父级元素
$(".a").parentsUntil("body")返回父级到body不包含body元素
$(".a").siblings("p")返回.a的同级元素不包含他本身 里面可以
有参数也可无参数。
$(".a").children()返回他的子级元素可带参数
$(".a").children().eq(0)表示他的第一个子级元素。
$(".a").find("*")表示所有的子级元素，可带不同参数对应不同的
元素。
$(this).next().children().not(".a1").html("lllll");
除了.a元素之外的所有子级元素
$(".box").addClass("on")添加类名class的值
$(".box").removeClass()移除类名。
$(this).index()表示当前元素的子级下标。
$(".box").width()获取该元素的宽度
$(".box").innerWidth()获取其元素的宽度+padding的值
$(".box").outerWidth()获取其元素的宽度+padding+border的值
var p=$(".box").offset()
以左上角为准
p.left获取其准确的x坐标的值，
p.top获取准确的y坐标的值，
可以得到定位的值
var p=$(".box").position()
console.log(p.left)
console.log(p.top)
获取css的属性值，由设置属性值不带设置的值就可以了。
console.log($(".box").css("background-color"))
$("input").val()可以得到其value属性值
输入文本
$(".box").html("<p>sshshsh</p>")相当于js里的innerHTML
$(".box").text("<div>ssss</div>")相当于js里的innerText
$("input").val("ssss") 设置value的值
事件不同作用机制
mouseleave()表示的移开事件在元素里面移动不会生效
而mousesout()表示一样的移开在元素里面移动会生效
同mouseover和mouseenter一样的事件。
$(".a").die("mouseover")解除a元素的mouseover事件
$(".a").die()解除.a的所有的事件
//给事件添加属性可以实现同一个事件不会覆盖。
$(".a").on("click.a",function(){
alert(1)
})
$(".a").on("click.b",function(){
alert(2)
})
$(".a").off("click.a") 表示解除.a的click.a的事件。
解决$冲突的问题。var jq=$.noConflict()
jquery阻止冒泡 jq(".a").click(function(e){
e.stopPropagation()
})
(function($){
$.fn.extend({
changeHtml:function(html){
$(this).html(html); 拓展函数在里面
} 添加一个函数
})
})($)
$(".a").click(function(){
$(this).changeHtml("cscs") 引用的方法。
})
添加属性的方法
$(".a").prop("open",true)
$(".a").attr("open",true)
获取一个属性值
$(".a").prop("value")
var a=$(".a").clone()表示复制这个元素给a
