jquery 基本操作

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1.DOM操作

1. 基本操作

* html() - 类似于原生DOM的innerHTML属性

* 获取 - html()

* 设置 - html(html代码)

* text() - 类似于原生DOM的textContent属性

* 获取 - text()

* 设置 - text(文本内容)

* val() - 类似于原生DOM的value属性

* 获取 - val()

* 设置 - val(value值)

* attr() - 类似于原生DOM的getAttribute()和setAttribute()

* 获取 - attr(attrName)

* 设置 - attr(attrName,attrValue)

* 删除 - removeAttr(attrName)

例如:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM基本操作</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul>
<li id="bj" name="beijing">北京
<ul>
<li>朝阳区</li>
<li>昌平区</li>
<li>东城区</li>
</ul>
</li>
<li id="tj">天津</li>
<li id="nj">南京</li>
</ul>
<input type="text" id="user" value="请输入你的用户名">
<script>
// html()方法
// 1. 获取 - 北京节点的HTML代码
console.log($("#bj").html());
// 2. 设置(不是追加或累加) - 为天津节点设置区
$("#tj").html("天津<ul><li>塘沽区</li></ul>");
// text()方法
// 1. 获取
console.log($("#nj").text());
// 2. 设置
$("#nj").text("被我改了...");
// val()方法
// 1. 获取
console.log($("#user").val());
// 2. 设置
$("#user").val("再次被我改了...");
// attr()方法
// 1. 获取
console.log($("#bj").attr("name"));
// 2. 设置
$("#bj").attr("name","小龙女");
console.log($("#bj").attr("name"));
// 3. 删除
$("#bj").removeAttr("name");
console.log($("#bj").attr("name"));
/* 下面是DOM方法
var bj = document.getElementById("bj");
bj.removeAttribute("name");
console.log(bj.getAttribute("name"));
*/
</script>
</body>
</html>

复制代码

页面效果如下：

2.样式操作

* 基本

* style属性

* class属性

* 方式

* attr() - attr("style",value)或attr("class",className) - 设置样式

* addClass(className) - 追加样式

* 在原有基础上累加一个样式

* removeClass() - 删除样式

* 不传参数 - 删除所有样式

* 传递参数 - 删除指定样式

* toggleClass() - 切换样式

* 是在没有样式与指定样式之间进行切换

* 该方法是addClass()+removeClass()的结合体

* hasClass() - 判断是否含有指定样式

* 该方法必须传递参数

* css()方法

* 获取 - css(attrName)

* 设置

* css(attrName,attrValue) - 每次设置一个样式属性

* css({ //- 每次设置多个样式属性

attrName : attrValue,

...

})

例如:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>jQuery操作样式</title>
<script src="jquery-1.11.3.js"></script>
<style>
div {
width : 200px;
height : 200px;
border : solid 1px black;
background-color : green;
}
.mini {
width : 100px;
height : 100px;
border : solid 1px black;
background-color : red;
}
.one {
width : 400px;
height : 400px;
border : solid 1px black;
background-color : yellow;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="attr方法">
<input type="button" id="btn2" value="addClass方法">
<input type="button" id="btn3" value="removeClass方法">
<input type="button" id="btn4" value="toggleClass方法">
<input type="button" id="btn5" value="hasClass方法">
<input type="button" id="btn6" value="css方法">
<div></div>
<div></div>
<script>
$("#btn1").click(function(){
// 设置 - 覆盖之前所有的样式
$("div:first").attr("class","mini");
});
$("#btn2").click(function(){
// 追加 - 在之前样式的基础上累加样式
$("div:first").addClass("one");
});
$("#btn3").click(function(){
/*
removeClass()方法
* 不传参 - 删除所有样式
* 传参 - 删除指定样式
*/
$("div:first").removeClass("one");
});
$("#btn4").click(function(){
// toggleClass() - 在没有样式与指定样式之间切换
$("div:first").toggleClass("mini");
});
$("#btn5").click(function(){
// hasClass() - 判断是否含有指定样式
alert($("div:first").hasClass("mini"));
});
$("#btn6").click(function(){
/*
$("div:first").css({
width : 150,
height : 150,
background : "blue"
});
*/
$("div:first").css("width","150").css("height","150").css("background","blue");
});
</script>
</body>
</html>

复制代码

效果如下:

点击第一个按钮:

点击第二个按钮:

点击第三个按钮:

点击第四个按钮：

点击第五个按钮：

点击第六个按钮：

[代码片段] jquery 基本操作

[代码片段] jquery 基本操作

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

浏览过的版块

用微信扫一扫