jQuery学习——知识点的巩固

 

1、添加元素

        append()        在被选元素的结尾插入内容

$("p").append("增加在p标签后")

        

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

$("p").prepend("增加在p标签开头")

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

$("p").after("在后面添加文本")

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

$("p").before("在前面添加文本");

2、获取设置内容

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

//获取
$("#btn1").click(function(){
  alert("Text: " + $("#test").text())
})
//设置
$("#btn1").click(function(){
    $("#test1").text("Hello world!")
})

                html()        设置或返回所选元素的内容（包括 HTML 标签）

//获取
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html())
})
//设置
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>")
})

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

//获取
$("#btn1").click(function(){
  alert("值为: " + $("#test").val())
})
//设置
$("#btn3").click(function(){
    $("#test3").val("RUNOOB")
})

3、获取设置属性

                attr()        获取和设置属性

//获取
$("button").click(function(){
  alert($("#runoob").attr("href"))
})
//设置
$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery")
})
//回调函数
$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"
  })
})

4、删除元素

        remove()        删除被选元素（及其子元素）

$("#div1").remove()

//过滤被删除元素————删除 class="italic" 的所有 <p> 元素
$("p").remove(".italic")

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

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

5、操作CSS

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

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

//通过addClass来定义多个元素
$("button").click(function(){
  $("body div:first").addClass("important blue")
})

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

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

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

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

        css()                        设置或返回样式属性

//返回指定的CSS属性的值，语法：css("propertyname")
    $("p").css("background-color")

//设置指定的CSS属性，语法：css("propertyname","value")
    $("p").css("background-color","yellow")

//设置多个CSS属性，语法：css({"propertyname":"value","propertyname":"value",...})
    $("p").css({"background-color":"yellow","font-size":"200%"})