JQuery操作HTML文档

寻技术 Html/CSS / JQuery 2023年12月03日 71

一、JQuery选择元素

1.$("p").click(function(){$(this).hide();}

点击HTML页面的任何p元素都会隐藏该p元素

2.$("#test").hide()

隐藏id=test的元素

3.$(".test").hide()

隐藏class=test的元素

总结为$(selector).action()

jQuery位于document.ready函数里面

$(document).ready(function(){

jquery goes here

});

二、JQuery元素选择器

1..$("p.test")选取所有class=test的p元素

2.$("p#test")选取所有id=test的p元素

三、JQuery属性选择器

$("[href]")选取所有带有href属性的元素

$("[href='#']")选取所有href属性=#的元素

$("[href!='#']")选取所有带有href值不等于#的元素

$("[href$='.jpg']")选取所有href值以“.jpg”结尾的元素

四、JQuery CSS选择器

可以改变HTML元素的CSS属性

$("p").css("bachground-color","red");

$("ul li:first")每个<ul>中的第一个<li>

$("div#intro .test")选择id=intro的div中class=test的div元素

五、JQuery获得内容和属性

text(),attr("data-date")

$("[data-date='2016-10-26']").attr("data-date")

六、JQuery css()方法

css()返回被选元素的一个或多个样式属性

$("p").css("background-color")返回收个匹配元素的background-color属性值

设置css属性

css("propertyname","value")

$("p").css("background-color","yellow")

设置多个css属性

css({"propertyname1":"value1","propertyname2":"value2"})

 

关闭

用微信“扫一扫”