JQuery HTML

2017-08-10 本文已影响18人高调的小丑

JQuery捕获和设置

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() -获取属性值

$("#test").text();//获取

$("#test1").text("Hello world!");//设置

回调函数有两个参数：被选元素列表中当前元素的下标，以及原始值。然后以函数新值返回您希望使用的字符串。

$("#test1").text(function(i,old){
  return "旧文本: " + old + " 新文本: Helloworld! (index: " + i + ")"; 
});

JQuery添加元素

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

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

$("p").append(" <b>追加文本</b>。");

通过三种方法创建文本并添加到<body>元素中

function appendText(){
    var txt1="<p>文</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
    
    $("body").after(txt1,txt2,txt3);  
}

JQuery删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

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

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

$("p").remove(".italic");//删除所有class="italic"的p元素

jQuery 操作CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

$("div").addClass("important");
$("div").toggleClass("important");
<style>
    .important
    {
        font-weight:bold;
        font-size:xx-large;
    }
</style>

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

返回css属性

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

设置css属性

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

设置多个css属性
css({"propertyname":"value","propertyname":"value",...});

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

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

示例

$("#div1").width();
$("#div1").innerWidth();

获取浏览器的宽度和高度

alert($(window).height()); //浏览器当前窗口可视区域高度

alert($(document).height()); //浏览器当前窗口文档的高度

alert($(document.body).height()); //浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度

alert($(document).width()); //浏览器当前窗口文档对象宽度

alert($(document.body).width()); //浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度包括border padding margin