Jquery 学习之基础一

Posted 2020-08-12

1.添加一个CSS类

$("button").click(function(){
  $("#div1").addClass("important blue");
});

==============================

2.移除一个类

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

==============================

3.切换类

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

==============================

4.Jquery 设置CSS属性

$("p").css("background-color","yellow");//设置一个属性

$("p").css({"background-color":"yellow","font-size":"200%"});//设多个属性

 ==============================

5.清空子元素

$("#div1").empty();//所有在div1块中的内容均被移除

==============================

 6.设置元素的父类属性

$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});//parent() 方法返回被选元素的直接父元素

});

 $("span").parents()//parents() 方法返回被选元素的所有父元素

==============================

7.返回每个div的直接子类元素

$(document).ready(function(){
 $("div").children().css({"color":"red","border":"2px solid red"});
});

==============================

8.find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

 $("div").find("span").css({"color":"red","border":"2px solid red"});

==============================

9.next（）方法返回下一个同胞元素

$("h2").next().css({"color":"red","border":"2px solid red"})；

==============================

10.过滤

$("p").filter(".url");//返回带有类名 "url" 的所有 <p> 元素

==============================

11.first() 方法返回被选元素的首个元素

$("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素：

==============================

12.last() 方法返回被选元素的最后一个元素。

$("div p").last();

==============================

13. eq() 方法返回被选元素中带有指定索引号的元素。

$("p").eq(1);

==============================

14.not() 方法与 filter() 相反。

 $("p").not(".url");//返回不是类url的P元素

==============================

15.三个操作dom的方法、DOM = Document Object Model（文档对象模型）

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

例子：

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

$("#btn1").click(function(){ 
    $("#test1").text("Hello world!"); 
}); 

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

$("#btn2").click(function(){ 
    $("#test2").html("<b>Hello world!</b>"); 
}); 

注：id=test，这一块是文本内容<p>名称: <input type="text" id="test" value="练习easyUI"></p>

通过 jQuery val() 方法可以获得输入字段的值

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

$("#btn3").click(function(){ 
    $("#test3").val("RUNOOB"); //设置值
});

==============================

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

$("button").click(function(){
  alert($("#runoob").attr("href"));//获取id=“runoob”中链接的href属性

$("#runoob").attr("href","http://www.runoob.com/jquery");//设置href属性
});

==============================

17.text()中的参数是回调函数，参数为索引和内容

$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本:雷明轩 (index: " + i + ")";
});
});
});