首页 > 代码库 > Jquery 学习之基础一
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");//设置一个属性
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="http://www.mamicode.com/练习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 + ")";
});
});
});
Jquery 学习之基础一