Jquery 学习之基础一

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 + ")"; }); });});

 

 

 

 

转载于:https://www.cnblogs.com/Lxiaojiang/p/5929397.html

相关资源：jQuery学习笔记之基础中的基础