jQuery常用方法的API
2017-05-10 20:45
267 查看
目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用
each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
append()：追加到父元素之后
prepend()：追加到父元素之前
after()：追加到兄弟元素之后
before()：追加到兄弟元素之前
attr(name)：获取属性值
attr(name,value)：给符合条件的标签添加key-value属性对
$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
remove()：删除自已及其后代节点
val()：获取value属性的值
val("")：设置value属性值为""空串，相当于清空
text()：获取HTML或XML标签之间的值
text("")：设置HTML或XML标签之间的值为""空串
clone()：只复制样式，不复制行为
clone(true)：既复制样式，又复制行为
replaceWith()：替代原来的节点
removeAttr()：删除已存在的属性
addClass()：增加已存在的样式
removeClass()：删除已存在的样式
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass()：如果标签有样式就删除，否则增加样式
offset()：获取对象的left和top坐标
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高
children()：只查询子节点，不含后代节点
next()：下一下兄弟节点
prev()：上一下兄弟节点
siblings()：上下兄弟节点
show()：显示对象
hide()：隐藏对象
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象
方法使用的具体例子
2.
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素内</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(父子关系)
$("ul").append($("div"));
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend($("div"));
</script>
3.
4.
<form>
<table>
<tr>
<td>
<input type="text" name="username" value="张三"/>
</td>
<td>
<input type="password" name="password" value="123456"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//取得form里第一个input元素的type属性,一个参数的atrr获取值
$("form input:first").attr("type");
//设置form下最后个input元素的为只读文本框,两个参数的attr为设置值
$("form input:last").attr("readonly","true");
</script>
5.
<script type="text/javascript">
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
// <body><div id="2015">哈哈</div></body>
//js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈";
divElement.setAttribute("id","2015");
divElement.id = "2015";
document.body.appendChild(divElement);
//jQuery方式
var $div = $("<div id='2015'>哈哈</div>");
$("body").append( $div );
</script>
6.
<ul>
<li>第一项</li>
<li id="secondID">第二项</li>
<li>第三项</li>
</ul>
<div>这是div元素</div>
<script type="text/javascript">
//删除ID为secondID的LI元素
//$("#secondID").remove();
//删除所有LI元素
//$("li").remove();
//删除UL元素
$("ul").remove();
</script>
7.
<div>
哈哈
</div>
<select name="city">
<option value="[广州]">广州</option>
</select>
<script type="text/javascript">
//取得<div>中的内容
$("div").text()
//取得<option>的值和描述
$("option").val()
$("option").text()
</script>
8.
<input type="button" value="原按钮" />
<script type="text/javascript">
//复制原input元素，添加到原input元素后，与其同级
var $old = $(":button");
var $new = $old.clone();
$new.val("新按钮");
$old.after($new);
//为原input元素动态添加单击事件，且复制原input元素，
var $old = $(":button");
$old.click(function() {
alert("动态事件");
});
//添加到原input元素后，与其同级，且和原按钮有一样的行为
var $new = $("input").clone(true);
//true代表复制行为，没有参数只复制样式，不复制行为
$new.val("新按钮");
$old.after($new);
</script>
9.
<table border="1" align="center">
<tr>
<td>
<div style="width:165px;height:23px">
双击会被替换成文本框
</div>
</td>
<td>
不会变
</td>
</tr>
</table>
<script type="text/javascript">
//双击<div>中的文本，用按钮替换文本
$("div").dblclick(function(){
var $text = $("<input type='button' value='原按钮' />");
$(this).replaceWith($text);
});
</script>
10.
<table>
<tr>
<td>
添加属性border/align/width
</td>
<td>
删除属性align
</td>
</tr>
</table>
<script type="text/javascript">
//为<table>元素添加属性border/align/width
$("table").attr("border","6").attr("align","center").attr("width","60%");
//将<table>元素的align属性删除
$("table").removeAttr("align");
</script>
11.
<style type="text/css">
.myClass{
font-size:30px;
color:red
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script></head>
<body>
<div>无样式</div>
<div class="myClass">有样式</div>
<script type="text/javascript">
//为无样式的DIV添加样式
$("div:first").addClass("myClass");
//为有样式的DIV删除样式
$("div:last").removeClass("myClass");
//切换样式，即有样式的变成无样式，无样式的变成有样式
$("div").toggleClass("myClass");
//最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有样式":"无样式");
</script>
12.
<img src="../images/zgl.jpg"/>
<script type="text/javascript">
//获取图片的坐标
var offset = $("img").offset();
var x = offset.left;
var y = offset.top;
alert(x + ":" + y);
//设置图片的坐标
$("img").offset({
top:100,
left:200
});
//获取图片的宽高
var w = $("img").width();
var h = $("img").height();
alert(w+":"+h);
//设置图片的宽高
$("img").width(500);
$("img").height(60);
</script>
13.
14.
<p>
<!--
<img src="../images/zgl.jpg" style="display:none"/>
-->
<img src="../images/zgl.jpg"/>
</p>
<div>
<!-- 加载完毕 -->
</div>
<script type="text/javascript">
//图片隐蔽
$("img").hide();
//图片显示
$("img").show();
</script>
15.
<p>
<img src="../images/zgl.jpg" style="display:none"/>
</p>
<div>
<!-- 显示结果 -->
</div>
<script type="text/javascript">
//淡入显示图片
$("img").fadeIn(3000);
//淡出隐蔽图片
$("img").fadeOut();
</script>
DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用
each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
append()：追加到父元素之后
prepend()：追加到父元素之前
after()：追加到兄弟元素之后
before()：追加到兄弟元素之前
attr(name)：获取属性值
attr(name,value)：给符合条件的标签添加key-value属性对
$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
remove()：删除自已及其后代节点
val()：获取value属性的值
val("")：设置value属性值为""空串，相当于清空
text()：获取HTML或XML标签之间的值
text("")：设置HTML或XML标签之间的值为""空串
clone()：只复制样式，不复制行为
clone(true)：既复制样式，又复制行为
replaceWith()：替代原来的节点
removeAttr()：删除已存在的属性
addClass()：增加已存在的样式
removeClass()：删除已存在的样式
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass()：如果标签有样式就删除，否则增加样式
offset()：获取对象的left和top坐标
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高
children()：只查询子节点，不含后代节点
next()：下一下兄弟节点
prev()：上一下兄弟节点
siblings()：上下兄弟节点
show()：显示对象
hide()：隐藏对象
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象
方法使用的具体例子
2.
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素内</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(父子关系)
$("ul").append($("div"));
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend($("div"));
</script>
3.
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素外</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(兄弟关系)
$("ul").after($("div"));
//DIV标签插入到UL标签之前(兄弟关系)
$("ul").before($("div"));
</script>4.
<form>
<table>
<tr>
<td>
<input type="text" name="username" value="张三"/>
</td>
<td>
<input type="password" name="password" value="123456"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//取得form里第一个input元素的type属性,一个参数的atrr获取值
$("form input:first").attr("type");
//设置form下最后个input元素的为只读文本框,两个参数的attr为设置值
$("form input:last").attr("readonly","true");
</script>
5.
<script type="text/javascript">
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
// <body><div id="2015">哈哈</div></body>
//js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈";
divElement.setAttribute("id","2015");
divElement.id = "2015";
document.body.appendChild(divElement);
//jQuery方式
var $div = $("<div id='2015'>哈哈</div>");
$("body").append( $div );
</script>
6.
<ul>
<li>第一项</li>
<li id="secondID">第二项</li>
<li>第三项</li>
</ul>
<div>这是div元素</div>
<script type="text/javascript">
//删除ID为secondID的LI元素
//$("#secondID").remove();
//删除所有LI元素
//$("li").remove();
//删除UL元素
$("ul").remove();
</script>
7.
<div>
哈哈
</div>
<select name="city">
<option value="[广州]">广州</option>
</select>
<script type="text/javascript">
//取得<div>中的内容
$("div").text()
//取得<option>的值和描述
$("option").val()
$("option").text()
</script>
8.
<input type="button" value="原按钮" />
<script type="text/javascript">
//复制原input元素，添加到原input元素后，与其同级
var $old = $(":button");
var $new = $old.clone();
$new.val("新按钮");
$old.after($new);
//为原input元素动态添加单击事件，且复制原input元素，
var $old = $(":button");
$old.click(function() {
alert("动态事件");
});
//添加到原input元素后，与其同级，且和原按钮有一样的行为
var $new = $("input").clone(true);
//true代表复制行为，没有参数只复制样式，不复制行为
$new.val("新按钮");
$old.after($new);
</script>
9.
<table border="1" align="center">
<tr>
<td>
<div style="width:165px;height:23px">
双击会被替换成文本框
</div>
</td>
<td>
不会变
</td>
</tr>
</table>
<script type="text/javascript">
//双击<div>中的文本，用按钮替换文本
$("div").dblclick(function(){
var $text = $("<input type='button' value='原按钮' />");
$(this).replaceWith($text);
});
</script>
10.
<table>
<tr>
<td>
添加属性border/align/width
</td>
<td>
删除属性align
</td>
</tr>
</table>
<script type="text/javascript">
//为<table>元素添加属性border/align/width
$("table").attr("border","6").attr("align","center").attr("width","60%");
//将<table>元素的align属性删除
$("table").removeAttr("align");
</script>
11.
<style type="text/css">
.myClass{
font-size:30px;
color:red
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script></head>
<body>
<div>无样式</div>
<div class="myClass">有样式</div>
<script type="text/javascript">
//为无样式的DIV添加样式
$("div:first").addClass("myClass");
//为有样式的DIV删除样式
$("div:last").removeClass("myClass");
//切换样式，即有样式的变成无样式，无样式的变成有样式
$("div").toggleClass("myClass");
//最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有样式":"无样式");
</script>
12.
<img src="../images/zgl.jpg"/>
<script type="text/javascript">
//获取图片的坐标
var offset = $("img").offset();
var x = offset.left;
var y = offset.top;
alert(x + ":" + y);
//设置图片的坐标
$("img").offset({
top:100,
left:200
});
//获取图片的宽高
var w = $("img").width();
var h = $("img").height();
alert(w+":"+h);
//设置图片的宽高
$("img").width(500);
$("img").height(60);
</script>
13.
<p>Hello</p>
<div>
<span>
Hello Again
<b>
Bold
</b>
</span>
</div>
<p>And Again</p>
<script type="text/javascript">
//取得div元素的直接子元素内容，不含后代元素
var $span = $("div").children();
$span.text()
//取得div元素的下一个同级的兄弟元素内容
var $next = $("div").next();
$next.text()
//取得div元素的上一个同级的兄弟元素内容
var $prev = $("div").prev();
$prev.text()
//依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").siblings();
alert($all.text());
</script>14.
<p>
<!--
<img src="../images/zgl.jpg" style="display:none"/>
-->
<img src="../images/zgl.jpg"/>
</p>
<div>
<!-- 加载完毕 -->
</div>
<script type="text/javascript">
//图片隐蔽
$("img").hide();
//图片显示
$("img").show();
</script>
15.
<p>
<img src="../images/zgl.jpg" style="display:none"/>
</p>
<div>
<!-- 显示结果 -->
</div>
<script type="text/javascript">
//淡入显示图片
$("img").fadeIn(3000);
//淡出隐蔽图片
$("img").fadeOut();
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery常用的ajax-api-$.ajax()方法
- jQuery常用的ajax-api-load()方法
- jQuery常用的ajax-api-$.post()/$.get()方法
- JQuery 常用方法基础教程
- JQuery 常用方法基础教程
- jQuery 学习 几种常用方法
- jquery常用方法备忘
- JQuery 常用方法基础教程
- java 常用API 方法
- 学习jQuery之旅--新手必须知道的常用方法
- JQUERY 常用方法大全
- Jquery常用方法
- JQUERY 常用方法大全
- JQuery 常用方法基础教程
- JQuery常用方法
- jQuery中常用的函数方法总结
- jquery 常用方法及说明
- JQUERY 常用方法大全
- jquery常用方法总结
- JQuery 常用方法大全