1 query
after using the selector node is found to be operated, to obtain values of the nodes, attribute values, text and html content.
1) html (): html content: operating all content ditag, including text and child tags, such as: alert($('#d1').html())
corresponds innerHTML property
2) text (): Text: operating text double label (excluding the sub-label) , such as: alert($('#d1').text())
corresponds innerText property
3) val (): node value: value of the operating value matching elements, such as: alert($('#username').val())
the resulting value is entered in the text box.
Note: In addition, these methods may also be used to modify the contents of the node, values, text content, attribute values. Such as:
$('#d1').html('hello java'); $('#username').val('chang');
2 attributes attr (): Property Value: attribute matching operation element
1) attr ( 'attrName') : to read attributes. alert($('#d1').attr('id'))
, The result is D1
2) attr ( 'attrName', 'value'): Set a property.
3) attr ({ "attrName1" : "value1", "attrName2": "value2"}): a plurality of attributes
( "selector") .attr ({property name: "attribute value", the attribute name: "attribute value", ...});
for example:$("img").attr({ src: "test.jpg", alt: "Test Image" });
Note: attribute name can not here quotes (single or double quotes cited ), but the attribute values must be quoted! Do not attribute the style when.
4) removeAttr ( 'attrName')Delete property.
3 pattern of operations
1) attr ( 'class', '') or attr ( 'style', '' ): read and set.
Example: Reading style: Alert ( Katex the parse error: the Expected 'the EOF', GOT '#' position AT. 3: ( '# D1') attr ( 'Clas .... (' # D1 ') attr (.' Class', . 's1'); or $ ( '# 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 样式里某个属性的值。
Note: You can not read a style class can not read class
example: <div id="d1" style="font-size:60px;" class="s3">hello jQuery</div>,
if alert($('#d1').css('font-size'));只能读出 60px,若写 alert($('#d1').css('s3'));
the content is
empty, could not be read.
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():获取第一个匹配元素外部宽度