jquery常用命令

Jquery基础：

 

表格中隔行变色： even是偶数的意思，odd是奇数，从0开始，偶数变色

$("tr:even"').css("background-color","#e8f0f2");

$(document).ready()： 网页中所有DOM文档结构绘制完毕后即可执行，可能与DOm相关的文件图片偏没有加载完，同一页面可以编写多个，有简化写法

window.onload ：等待网页中的所有内容加载完毕（包括视频音频图片）才能执行，同一页面不能编写多个，没有简化写法

$(document).ready(function(){alter("我喜欢新技术")})

$(selector).action()： 工厂函数 DOM对象转化为Jquery对象

增加class属性 : $("current").addClass("current")

$(this).css("属性","属性值")： css({"属性1":"属性值1","属性2":"属性值2"})

$(".top-div").show()： $("p").hide() font-weight=bold 加粗

选取后面的同胞元素： 选取p元素后面的class=selected元素，改变背景颜色

$("p").next(".selected").css("backgroud","yellow")

$("h2").css("background-color","#ccffff").next().css("display","block");

DOM对象 jquery对象

var dom=document.getElementById("title");

var obfHtml=dom.innerHTML;

Jquery对象 $("#title").html() 等同于 documemt.getElementById("title").innerHTML;

Jquery转化为DOM：var dom=$("#text").get(0);或者 var dom=$("#text")[0];

slibings（）获取同级的兄弟元素

$("p").slibings().css("属性","属性值")

 

标签选择器： $("dd") $("#id") $(".class")

全局选择器 $("*")

后代选择器 $(".menu span") 获取.menu下的所有子元素和孙元素span

子选择器 $(".menu >span" ) 获取.menu的子元素span

相邻元素选择器 $("h2+dl")： 获取紧邻h2元素后的下一个同辈元素dl

同辈元素选择器 $("h2~dl") ：获取h2元素之后的所有的同辈元素dl

 

属性选择器：[attribute] [attribute=value] [attribute!=value]

[attributr^=value] attributr$=value] attributr*=value]

$("[href^='en']") 选取href属性以en开头元素

$("[href$='.jpg']") 选取以.jpg 结尾的元素

$("[href='txt']") 选取href属性中含有txt的元素

 

$("#news a[class]").css("background",'#c96cbcb');//a标签带有class属性

$("#news a[class='hot']").css("","")//选择class属性值为hot

$("[href]") $("[href='qwe']")

基本过滤选择器：

：first    :last

:not(selector) $("li:not(.three)") 选取class属性不是three的元素

$("li:even") 选取索引是偶数所有的li元素

$("li:odd")选取索引是奇数所有li元素

$(eq(1)) 选取索引等于1的li元素

$("li:gt(1)") 选取索引大于1的li元素

$(".contain :header").css("","" ) 选取h1--h6所有的

可见性过滤选择器：$("p:hidden").show(); 选取所有可见的元素

$("p:visible").hide() 选取隐藏的元素

鼠标事件 click() mouseover() mouseout() mouseenter() mouseleave()

键盘事件 keydown() keyup() keypress()

index() 获取当前元素索引值： var index=$("#nav li span").index(this);

$("#nav li:eq('+index+') span~p").show()

绑定事件：bind

$("".on).bind({

mouseover,function(){

$(".topDown").show();},

mouseout:function(){

$(".topDown").hide();}

})

解绑 unbind $("#nav li:first").unbind("click",content)

 

复合事件 ： hover（ ) toggle()

hover（）相当于mouseover() mouseout()事件组合

$(".top-m .on").hover(function{$(".topDown").show();},

function(){$(".topDown").hide();})

toggle() 模拟鼠标连续click事件

$("input").toggle(

function(){$("body").css();

function(){$("body").css()}})

toggle()方法不带参数，与show() hide()方法作用一样,

toggleClass()可以对样式进行切换,模拟了addClass() removeClass() 实现样式切换

$("input").click(function(){$("p").toggle();})

$("input").click(function(){$("p").toggleClass("red")}) 添加删除class为red的属性

DOM操作：

$(this).css("border","5px solid #f5f5f5")

判断是否有指定的样式：$(selector).hasClass(class)

if(!$("p").hasClass("content")){$("p").addClass("content")}; removeClass()

HTML()代码操作：

html() 可以对HTML代码操作，类似于JS中的innerHTML

$("div.left").html() //获取html代码

$("div.left").html("<div></div>") //设置html代码

text() 可以获取或设置元素文本内容 $("div.first").text() $("div.first").text(“<div></div>”)

val() 获取或者设置元素的value属性值 $(this).val()

创建节点 var $newNode2=$("<li>北京申办冬奥会</li>")

元素内部插入节点 ：

$(A).append(B) 将B插入到A中 $(A).appendTo(B) 将A插入到B

$(A).prepend(B) B前置插入到A中 $(A).prependTo(B) A前置插入到B中

元素外部插入同辈节点：

$(A).after(B) B插入到A之后 $(A).insertAfter(B) A插入到B之后

$(A).before(B) 将B插入之A之前 $(A).insertBefore(B) 将A插入到B之前

 

删除节点：

remove() $("selector").remove([expr]) 删除整个节点

$(selector).empty() 清空节点内容

$(selector).detach() 删除整个节点，保留元素的绑定事件/附加数据

replaceWIth()和replaceAll()用于替换某个节点

attr() 获取与设置元素属性

$(selector).attr([name]) $(selecor).attr({[name1:value]'''''''[name2:value]})

removeAttr()删除元素属性

$(selector).removeAttr(name);

遍历子元素：

children（）获取元素的所有子元素,但不包含子元素的子元素

var $section=$("section").children(); alter($section.length)

遍历同辈元素：

next() $("li:eq(1)").next().addClass("orange") 用于获取紧邻匹配元素之后的元素

prev([expr]) 用于获取紧邻匹配元素之前的元素。$("li:eq(1)").prev().addClass("orange")

slibings([expr]) 获取位于匹配元素前面和后面的所有同辈元素，$("li:eq(1)").slibings().addClass("orange")

遍历前辈元素：parent(）父级元素 parents() 祖先元素

$("li:eq(1)").parent().addClass("orange")

$("li:eq(1)").parents().addClass("orange")

其他遍历方法：$(selector).each(function(XXXXXXX))