框架拥有操作超文本标记语言元素和属性的强大方法。

1.获取超文本标记语言元素的内容和属性

(1) 获得内容：文本()、html()以及val()方法

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title我的测试JQuery/title脚本类型=' text/JAVAScript ' src=' http :/js/jquery-1。10 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){//text()-设置或返回所选元素的文本内容$('#btnText ').单击(函数(){ alert($('#myDiv1 ')).text())；});$('#btnTextSet ').单击(函数(){ $('#myDiv1 ')).文本('这是一个美好的日子');警报($('#myDiv1 ').text())；});//html() -设置或返回所选元素的内容（包括超文本标记语言标记)$('#btnHtml ').单击(函数(){ alert($('#myDiv1 ')).html())；});$('#btnHtmlSet ').单击(函数(){ $('#myDiv1 ')).html(")这是一个神奇的世界啊');警报($('#myDiv1 ').html())；});//val() -设置或返回表单字段的值$('#btnVal ').单击(函数(){ alert($('#myInput1 ')).val())；});$('#btnValSet ').单击(函数(){ $('#myInput1 '))." val("好好学习，天天向上');警报($('#myInput1 ').val())；});});/脚本/流浆池按钮类型='button' id='btnText'text()方法获取内容/button button type=' button ' id=' btnHtml ' html()方法获取内容/button button type=' button ' id=' btnVal ' val()方法获取内容/button br/button type=' button ' id=' btnTextSet ' text()方法设置内容/button button type=' button ' id=' btnHtmlSet ' html()方法设置内容/button button type=' button ' id=' btnValSet ' val()方法设置内容/button div id='myDiv1 '这是一个神奇的世界啊/div输入类型='text' id='myInput1 '值='大家好/p/body/html

(2) 获取属性： attr()方法

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title我的测试JQuery/title脚本类型=' text/JAVAScript ' src=' http :/js/jquery-1。10 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){//attr()方法用于获取属性值，也用于设置/改变属性值$('#btn_attr1 ').单击(function(){ alert($('#myHref ')).attr(' href ')；});$('#btn_attr2 ').单击(function(){ $('#myHref ')).attr('href '，' https://www .cn博客。com’)；警报('超链接属性设置为：' $('#myHref ').attr(' href ')；});});/脚本/流浆池按钮类型='button' id='btn_attr1'attr()方法获取属性/button br/button type=' button ' id=' BTN _ attr 2 ' attr()方法设置属性/按钮a href=' https://www。百度。com ' id=' Myhref '超链接/a/body/html

2.添加元素：追加()和prepend()方法，在()之后和之前()方法

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title我的测试JQuery/title脚本类型=' text/JAVAScript ' src=' http :/js/jquery-1。10 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){//append()方法在被选元素的结尾插入内容（仍然该元素的内部)$('#btn_append ').单击(函数(){ $('#myDiv1 ')).追加('是的');});//prepend()方法在被选元素的开头插入内容（仍然该元素的内部)$('#btn_prepend ').单击(函数(){ $('#myDiv1 ')).前置('我说');});//之前()方法在被选元素的开头插入内容$('#btn_before ').单击(函数(){ $('#myInput1 ')).在(“你好”)之前；});//之后()方法在被选元素的开头插入内容$('#btn_after ').单击(函数(){ $('#myInput1 ')).在('世界)之后；});//特别说明：//追加()和prepend()方法能够通过参数接收无限数量的新元素//之后()和之前()方法能够通过参数接收无限数量的新元素。 //可以通过文本/HTML、jQuery或者JavaScript/DOM来创建新元素。 //举例如下：/** $('#btn_after ').单击(function(){ var txt1='程序员；var txt2=$('i/i ').文本('是厉害的人');var txt 3=文档。创建元素(' h1 ')；'' txt3.innerHTML='好用的“jQuery！”；$('#myInput1 ').之后(txt1、txt2、txt 3)；});**/});/脚本/流浆池按钮类型='button' id='btn_append'append()方法/button button type=' button ' id=' BTN _ prepend ' prepend()方法/button br/button type=' button ' id=' BTN _ before ' before()方法/button button type=' button ' id=' BTN _ after ' after()方法/button div id=' mydiv 1 ' style='底色：绿色'这是一个神奇的世界啊/div输入类型='text' id='myInput1 '值='大家好//正文/html

3.删除元素：移除()方法，空()方法

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title我的测试JQuery/title脚本类型=' text/JAVAScript ' src=' http :/js/jquery-1。10 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){//remove()方法删除被选元素及其子元素$('#btn_remove ').单击(函数(){ $('#myDiv1 ')).移除();});//空()方法删除被选元素的子元素$('#btn_empty ').单击(函数(){ $('#myDiv2 ')).empty()；});});/脚本/流浆池按钮类型='button' id='btn_remove'remove()方法/button button type=' button ' id=' BTN _ empty ' empty()方法/button br/div id=' mydiv 1 ' style='底色：绿色'这是一个神奇的世界啊/div div id=' mydiv 2 ' style='底色：黄色'这是一个神奇的世界啊/div/body/html

4.获取并设置半铸钢钢性铸铁(铸造半钢)类：addClass()方法，removeClass()方法，toggleClass()方法

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title我的测试JQuery/title脚本类型=' text/JAVAScript ' src=' http :/js/jquery-1。10 .2 .量滴js '/script script type=' text/JavaScript ' $(function(){//addClass()-向被选元素添加一个或多个类$('#btn_addClass ').单击(函数(){ $('#myDiv1 ')).addClass(')蓝色');});//removeClass() -从被选元素删除一个或多个类$('#btn_removeClass ').单击(函数(){ $('#myDiv1 ')).removeClass(“”蓝色');});//toggleClass() -对被选元素进行添加/删除类的切换操作$('#btn_toggleClass ').单击(函数(){ $('#myDiv1 ')).toggleClass('蓝色');});});/script/head style type=' text/CSS ' .蓝色{ font-size :16 px背景-颜色：黄色；}/stylebody按钮类型=' button ' id=' BTN _ addCLaSS ' addCLaSS()方法/button br/button type=' button ' id=' BTN _ remove class ' remove class()方法/button br/button type=' button ' id=' BTN _ toggleClass ' toggleClass()方法/button div id='myDiv1 '这是一个神奇的世界啊/div/body/html

5.css()方法：返回半铸钢钢性铸铁(铸造半钢)属性、设置半铸钢钢性铸铁(铸造半钢)属性、设置多个半铸钢钢性铸铁(铸造半钢)属性

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title我的测试JQuery/title脚本类型=' text/JAVAScript ' src=' http :/js/jquery-1。10 .2 .量滴js/script脚本类型=' text/JavaScript ' $(function(){//返回指定的半铸钢钢性铸铁(铸造半钢)属性的值$('#btn_css1 ').单击（函数(){ alert('myDiv1的背景颜色：' $('#myDiv1 ').css(“”背景色');});//设置指定的半铸钢钢性铸铁(铸造半钢)属性$('#btn_css2 ').单击(函数(){ $('#myDiv1 ')).css(“”背景色','绿色');});//设置多个半铸钢钢性铸铁(铸造半钢)属性$('#btn_css3 ').单击(函数(){ $('#myDiv1 ')).css({ '底色' : '粉色','字号： ' 20px ' })；});});/脚本/流浆池按钮类型='button' id='btn_css1 '获取钢性铸铁属性的值/button br/button type=' button ' id=' BTN _ css2 '设置钢性铸铁属性/button br/button type=' button ' id=' BTN _ css3 '设置多个钢性铸铁属性/button br/div id=' mydiv 1 ' style='底色：黄色'这是一个神奇的世界啊/div/body/html

6.处理尺寸的重要方法：宽度()和高度()方法，innerWidth()和innerHeight()方法，外部宽度()和外部高度()方法。

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title我的测试JQuery/title脚本类型=' text/JAVAScript ' src=' http :/js/jquery-1。10 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){//width()方法设置或返回元素的宽度（不包括内边距、边框或外边距)。//高度()方法设置或返回元素的高度（不包括内边距、边框或外边距)。//innerWidth()方法返回元素的宽度（包括内边距)。//innerHeight()方法返回元素的高度（包括内边距)。//外部宽度()方法返回元素的宽度（包括内边距和边框)。//外部高度()方法返回元素的高度（包括内边距和边框)。$('#btn_css1 ').单击(函数(){ $('#myDiv2 ')).html('width: ' $('#myDiv1 ').width())；$('#myDiv2 ').html($('#myDiv2 ').html()' br/height : ' $(' # mydiv 1 ').高度());$('#myDiv2 ').html($('#myDiv2 ').html()' br/内部宽度： ' $(' # mydiv 1 ').innerWidth())；$('#myDiv2 ').html($('#myDiv2 ').html()' br/inner height : ' $(' # mydiv 1 ').内部高度())；$('#myDiv2 ').html($('#myDiv2 ').html()' br/out width : ' $(' # mydiv 1 ').out width())；$('#myDiv2 ').html($('#myDiv2 ').html()' br/外套高度： ' $('#myDiv1 ').outhealth())；});});/脚本/流浆池按钮类型='button' id='btn_css1 '获取钢性铸铁属性的值/button br/div id=' mydiv 1 ' style='底色：黄色；padd :10 pxmargin 33603 px ' border :1 px纯蓝；'差异区域/div div id=' MyDiv 2 '/div/body/html(9524 . 163.com)

总结

以上所述是小编给大家介绍的框架操作超文本标记语言元素和属性的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！