Bootstrap

jQuery选择器及简单操作

jQuery选择器

首先需要导入jquery到html页面

script src="jquery-1.10.2.min.js">script>

元素选择器  $(“p”);  //p标签选择器

Id选择器  $(“#test”);  //id为test的被选择

类选择器  $(“.test”);

属性选择器   $(“[name=’name’]”);  //选择所有name=name的元素

jQuery操作

1.三个简单实用的用于 DOM 操作的 jQuery 方法:

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

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

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

//返回html元素内容

$("#btn1").click(function(){ alert("Text: " + $("#test").text()); });

//返回整个html元素

 $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });

//返回表单字段的值

$("#btn1").click(function(){ alert("值为: " + $("#test").val()); });

若是设置该值的话,直接在括号里面输出即可

//返回元素的属性

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

//设置元素的属性为#

$("button").click(function(){ alert($("#runoob").attr("href",”#”)); });

2.用于添加新内容的四个 jQuery 方法:

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

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

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

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

//在p元素后面追加文本    默认添加在末尾

$("p").append("追加文本");

//方法在被选元素的开头插入内容。

$("p").prepend("在开头追加文本");

//jQuery after() 方法在被选元素之后插入内容。

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

//jQuery before() 方法在被选元素之前插入内容。

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

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

· remove() - 删除被选元素(及其子元素)

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

//jQuery remove() 方法删除被选元素及其子元素。  删除所有

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

//jQuery empty() 方法删除被选元素的子元素。被选中的元素不会删除

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

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

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

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

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

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

//向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素: 

$("button").click(function(){

 $("h1,h2,p").addClass("blue");

 $("div").addClass("important");

 });

//在不同的元素中删除指定的 class 属性:

$("h1,h2,p").removeClass("blue");

//该方法对被选元素进行添加/删除类的切换操作:

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

//返回指定的 CSS 属性的值,

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

//设置指定的 CSS 属性

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

//设置多个 CSS 属性

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

;