jQuery HTML

WEB前端 waitig 415℃ 百度已收录 0评论

1.jQuery – 获得内容和属性
(1)获得内容 – text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() – 设置或返回所选元素的文本内容
html() – 设置或返回所选元素的内容(包括 HTML 标记)
val() – 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

(2)获取属性 – attr()

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

2.jQuery – 设置内容和属性
(1)设置内容 – text()、html() 以及 val()

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

(2)text()、html() 以及 val() 的回调函数

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

(3)设置属性 – attr()

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

3.jQuery – 添加元素
(1)jQuery append() 方法-在被选元素的结尾插入内容

$("p").append("Some appended text.");

(2)jQuery prepend() 方法

$("p").prepend("Some prepended text.");

(3)通过 append() 和 prepend() 方法添加若干新元素

var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3);        // 追加新元素
}

(4)jQuery after()-在被选元素之后插入内容 和 before() 方法-在被选元素之前插入内容

$("img").after("Some text after");
$("img").before("Some text before");

(5)通过 after() 和 before() 方法添加若干新元素

4.jQuery – 删除元素
(1)jQuery remove() 方法-删除被选元素及其子元素

$("#div1").remove();

(2)jQuery empty() 方法-删除被选元素的子元素

$("#div1").empty();

(3)过滤被删除的元素

$("p").remove(".italic");

5.jQuery – 获取并设置 CSS 类
(1)jQuery addClass() 方法-向被选元素添加一个或多个类

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

(2)jQuery removeClass() 方法-从被选元素删除一个或多个类

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

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

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

6.jQuery – css() 方法
(1)返回 CSS 属性

$("p").css("background-color");

(2)设置 CSS 属性

$("p").css("background-color","yellow");

(3)设置多个 CSS 属性

$("p").css({"background-color":"yellow","font-size":"200%"});

7.jQuery – 尺寸
(1)jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

(2)jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

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

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

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

$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

本文由【waitig】发表在等英博客
本文固定链接:jQuery HTML
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)