使用jQuery怎么操作HTML元素和属性

这期内容当中小编将会给大家带来有关使用jQuery怎么操作 HTML元素和属性,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

创新互联公司是一家集网站建设,三台企业网站建设,三台品牌网站建设,网站定制,三台网站建设报价,网络营销,网络优化,三台网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

1. 获取HTML 元素的内容和属性

(1) 获得内容:  text()、html() 以及 val()方法





My Test JQuery
 
  
  $(function(){ 
   //text() - 设置或返回所选元素的文本内容
   $("#btnText").click(function(){
    alert($("#myDiv1").text());
   });
   $("#btnTextSet").click(function(){
    $("#myDiv1").text('这是一个美好的日子');
    alert($("#myDiv1").text());
   });
   //html() - 设置或返回所选元素的内容(包括 HTML 标记)
   $("#btnHtml").click(function(){
    alert($("#myDiv1").html());
   });
   $("#btnHtmlSet").click(function(){
    $("#myDiv1").html('这是一个神奇的世界啊');
    alert($("#myDiv1").html());
   });
   //val() - 设置或返回表单字段的值
   $("#btnVal").click(function(){
    alert($("#myInput1").val());
   });  
   $("#btnValSet").click(function(){
    $("#myInput1").val('好好学习,天天向上');
    alert($("#myInput1").val());
   });
  });
 


 text()方法获取内容
 html()方法获取内容
 val()方法获取内容
 text()方法设置内容  html()方法设置内容  val()方法设置内容  这是一个神奇的 世界啊 
 

使用jQuery怎么操作 HTML元素和属性使用jQuery怎么操作 HTML元素和属性

使用jQuery怎么操作 HTML元素和属性 使用jQuery怎么操作 HTML元素和属性

使用jQuery怎么操作 HTML元素和属性 使用jQuery怎么操作 HTML元素和属性

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





My Test JQuery
 
  
  $(function(){ 
   //attr() 方法用于获取属性值,也用于设置/改变属性值。
   $("#btn_attr1").click(function(){
    alert($("#myHref").attr("href"));
   });
   $("#btn_attr2").click(function(){
    $("#myHref").attr("href","https://www.cnblogs.com");
    alert('超链接属性设置为:'+$("#myHref").attr("href"));
   });
  });
 


 attr()方法获取属性
 attr()方法设置属性  超链接

使用jQuery怎么操作 HTML元素和属性  使用jQuery怎么操作 HTML元素和属性

2. 添加元素:append() 和 prepend() 方法,after() 和 before() 方法





My Test JQuery
 
  
  $(function(){ 
   //append() 方法在被选元素的结尾插入内容(仍然该元素的内部)
   $("#btn_append").click(function(){
    $("#myDiv1").append(" 是的");
   });
   //prepend() 方法在被选元素的开头插入内容(仍然该元素的内部)
   $("#btn_prepend").click(function(){
    $("#myDiv1").prepend("我说 ");
   });
   //before() 方法在被选元素的开头插入内容
   $("#btn_before").click(function(){
    $("#myInput1").before("Hello ");
   });
   //after() 方法在被选元素的开头插入内容
   $("#btn_after").click(function(){
    $("#myInput1").after("World ");
   });
   //特别说明:
   //append() 和 prepend() 方法能够通过参数接收无限数量的新元素
   //after() 和 before() 方法能够通过参数接收无限数量的新元素。
   //可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
   //举例如下:
   /**
   $("#btn_after").click(function(){
    var txt1="程序员";     
    var txt2=$("").text("是厉害的人");  
    var txt3=document.createElement("

");      txt3.innerHTML="好用的jQuery!";        $("#myInput1").after(txt1,txt2,txt3);    });    **/   });    append()方法  prepend()方法
 before()方法  after()方法  这是一个神奇的 世界啊 

 

使用jQuery怎么操作 HTML元素和属性 使用jQuery怎么操作 HTML元素和属性

使用jQuery怎么操作 HTML元素和属性 使用jQuery怎么操作 HTML元素和属性 使用jQuery怎么操作 HTML元素和属性

 3. 删除元素:remove() 方法,empty() 方法





My Test JQuery
 
  
  $(function(){ 
   //remove() 方法删除被选元素及其子元素
   $("#btn_remove").click(function(){
    $("#myDiv1").remove();
   });
   //empty() 方法删除被选元素的子元素。
   $("#btn_empty").click(function(){
    $("#myDiv2").empty();
   });
  });
 


 remove()方法
 empty()方法
 这是一个神奇的 世界啊 
 这是一个神奇的 世界啊 

使用jQuery怎么操作 HTML元素和属性

使用jQuery怎么操作 HTML元素和属性

使用jQuery怎么操作 HTML元素和属性

4. 获取并设置 CSS 类:addClass() 方法,removeClass() 方法,toggleClass() 方法





My Test JQuery
 
  
  $(function(){ 
   //addClass() - 向被选元素添加一个或多个类
   $("#btn_addClass").click(function(){
    $("#myDiv1").addClass('blue');
   });
   //removeClass() - 从被选元素删除一个或多个类
   $("#btn_removeClass").click(function(){
    $("#myDiv1").removeClass('blue');
   });
   //toggleClass() - 对被选元素进行添加/删除类的切换操作
   $("#btn_toggleClass").click(function(){
    $("#myDiv1").toggleClass('blue');
   });
  });
 


.blue
{
 font-size:16px;
 background-color:yellow;
}


 addClass()方法
 removeClass()方法
 toggleClass()方法  这是一个神奇的 世界啊 

使用jQuery怎么操作 HTML元素和属性 使用jQuery怎么操作 HTML元素和属性 使用jQuery怎么操作 HTML元素和属性

使用jQuery怎么操作 HTML元素和属性 使用jQuery怎么操作 HTML元素和属性

5. css() 方法:返回 CSS 属性、设置 CSS 属性、设置多个 CSS 属性





My Test JQuery
 
  
  $(function(){ 
   //返回指定的 CSS 属性的值
   $("#btn_css1").click(function(){
    alert('myDiv1的背景颜色:'+$("#myDiv1").css("background-color"));
   });
   //设置指定的 CSS 属性
   $("#btn_css2").click(function(){
    $("#myDiv1").css("background-color","green");
   });
   //设置多个 CSS 属性
   $("#btn_css3").click(function(){
    $("#myDiv1").css({"background-color":"pink","font-size":"20px"});
   });
  });
 


 获取css属性的值
 设置css属性
 设置多个css属性
 这是一个神奇的 世界啊 

使用jQuery怎么操作 HTML元素和属性 使用jQuery怎么操作 HTML元素和属性 使用jQuery怎么操作 HTML元素和属性

6. 处理尺寸的重要方法:width() 和 height() 方法,innerWidth() 和 innerHeight() 方法,outerWidth() 和 outerHeight() 方法。





My Test JQuery
 
  
  $(function(){ 
   //width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
   //height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
   //innerWidth() 方法返回元素的宽度(包括内边距)。
   //innerHeight() 方法返回元素的高度(包括内边距)。
   //outerWidth() 方法返回元素的宽度(包括内边距和边框)。
   //outerHeight() 方法返回元素的高度(包括内边距和边框)。
   $("#btn_css1").click(function(){
    $("#myDiv2").html("width: "+$("#myDiv1").width());
    $("#myDiv2").html($("#myDiv2").html()+"
height: "+$("#myDiv1").height());     $("#myDiv2").html($("#myDiv2").html()+"
innerWidth: "+$("#myDiv1").innerWidth());     $("#myDiv2").html($("#myDiv2").html()+"
innerHeight: "+$("#myDiv1").innerHeight());     $("#myDiv2").html($("#myDiv2").html()+"
outerWidth: "+$("#myDiv1").outerWidth());     $("#myDiv2").html($("#myDiv2").html()+"
outerHeight: "+$("#myDiv1").outerHeight());    });   });    获取css属性的值
 Div区域  

使用jQuery怎么操作 HTML元素和属性

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

上述就是小编为大家分享的使用jQuery怎么操作 HTML元素和属性了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


网站题目:使用jQuery怎么操作HTML元素和属性
网页地址:http://scyanting.com/article/gccigi.html

其他资讯