> 生活笔记  > python
jQuery简单教程-操作HTML元素和属性

jQuery拥有操作DOM的能力,它提供了一系列与DOM相关的方法,这使访问和操作元素和属性变得很容易。首先介绍三个简单实用的用于操作DOM的jQuery方法--text(),html()以及val()。

text() //设置或返回所选元素的文本内容

html() //设置或返回所选元素的内容(包括 HTML 标记)

val() //设置或返回表单字段的值

获取属性

jQuery attr() 方法用于获取属性值。

同样的,jQuery使用上述三个相同的方法设置内容和属性,例如:

//设置内容
$("#btn1").click(function(){
  $("#text1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#text2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#text3").val("Hello");
});

text(),html()和val()的回调函数

上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回希望使用的字符串。

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});//例子来自w3school

通过jQuery还可以添加新元素或者内容

用于添加新内容的四个方法

append() //在被选元素的结尾插入内容
$("p").append("some text");

prepend() //在被选元素的开头插入内容

after() //在被选元素之后插入内容

before() //在被选元素之前插入内容

jQuery删除元素,通过jQuery可以很容易地删除已有的HTML元素。

remove() //删除被选元素及其子元素。

empty() //从被选元素中删除子元素。

需要注意的是,remove()方法可以接受一个参数,允许对被删元素进行过滤。

$("p").remove(".test"); //删除class="test"的所有<p>元素。

jQuery操作CSS

addClass() //向被选元素添加一个或多个类

removeClass() //从被选元素删除一个或多个类

toggleClass() //对被选元素进行添加/删除类的切换操作

css() //设置或返回样式属性
//css()方法设置或返回被选元素的一个或多个样式属性。

jQuery处理元素的尺寸

width()  //width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height()  //height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth()  //innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight()  //innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth()  //outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight()  //outerHeight() 方法返回元素的高度(包括内边距和边框)。

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。


返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度:

 $(document).width()
 $(document).height()
 $(window).width()
 $(window).height()


0条评论
猜你喜欢
精品推荐
扫二维码,加好友一起学习吧!