1 查询
利用选择器找到要操作的节点之后,获得节点的值、属性值、文本以及 html 内容。
1)html():html 内容:操作双标签中的所有内容,包括文本和子标签,如:alert($('#d1').html())
,相当于 innerHTML 属性
2)text():文本:操作双标签中的文本内容(不包括子标签),如:alert($('#d1').text())
,相当于 innerText 属性
3)val():节点的值:操作匹配元素的value值,如:alert($('#username').val())
,结果为文本框中输入的值。
注意事项:此外,这几个方法也可以用来修改节点的内容、值、文本内容、属性值。如:
$('#d1').html('hello java'); $('#username').val('chang');
2 属性 attr():属性值:操作匹配元素的属性
1)attr(‘attrName’):读取属性。alert($('#d1').attr('id'))
,结果为 d1
2)attr(‘attrName’,‘value’):设置一个属性。
3)attr({“attrName1”:“value1”,“attrName2”:“value2”}):设置多个属性
(
"
选
择
器
"
)
.
a
t
t
r
(
"
属
性
名
"
,
"
属
性
值
"
)
;
或
("选择器").attr("属性名","属性值");或
("选择器").attr("属性名","属性值");或(“选择器”).attr({属性名:“属性值”,属性名:“属性值”,…});
例如:$("img").attr({ src: "test.jpg", alt: "Test Image" });
注意事项:此处属性名可不用引号(单引或双引) ,但属性值必须用引号! 不要把样式当属性了。
4)removeAttr(‘attrName’):删除属性。
3 样式操作
1)attr(‘class’,’’)或者 attr(‘style’,’’):读取和设置。
例如:读取样式:alert(KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲d1').attr('clas…(’#d1’).attr(‘class’,‘s1’); 或 $(’#d1’).attr(‘style’,‘color:red;font-style:italic;’);
2)addClass(''):追加。
例如:$('#d1').addClass('s1 s2');//追加 s1 和 s2 两种样式
3)removeClass('') :移除。
例如:$('#d1').removeClass('s1');//移除样式 s1
4)removeClass('s1 s2 ...sn') :移除多个样式
例如:$('#d1').removeClass('s1 s2');//移除样式 s1 和 s2
5)removeClass():删除所有样式。
6)toggleClass(''):样式来回切换,有该样式就删除,没有就添加。
例如:$('#d1').toggleClass('s3');//样式 s3 一会有一会没(来回切换)
7)hasClass(''):是否有某个样式。
例如:alert($('#d1').hasClass('s3'));//返回值 true 或 false
8)css(''):操作匹配元素css样式,只能读取 style 样式里某个属性的值。
注意事项:无法读取某个样式类不能读取class
例如:<div id="d1" style="font-size:60px;" class="s3">hello jQuery</div>,
则alert($('#d1').css('font-size'));只能读出 60px,若写 alert($('#d1').css('s3'));
则内容为
空,读不出来。
9)css('',''):设置一个 CSS 样式。
例如:$('#d1').css('border','1px solid red');
10)css({'':'','':''}):设置多个样式。
例如:$('#d1').css({'border':'1px solid red','font-size':'50px'});
11)元素CSS位置概念:获取页面元素的位置。格式:position();返回的对象包含两个整型属性:top 和 left。
`$("p").text("上"+$(this).position().top+":左"+$(this).position().left+"`当前元素高:"`+$(this).height());`
12)元素CSS尺寸
1) height():取得匹配元素当前计算的高度值
2) width():取得第一个匹配元素当前计算的宽度值
3) innerHeight():获取第一个匹配元素内部区域高度
4) innerWidth():获取第一个匹配元素内部区域宽度
5) outerHeight():获取第一个匹配元素外部高度
6) outerWidth():获取第一个匹配元素外部宽度