jQuery常用Method-API
目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
（1）DOM简述与分类
（A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)
（B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，
跨浏览器(ie/firefox/Chrome)的标准规则
（C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程
（D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS
（E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等
（2）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()：淡出隐藏对象
slideUp()：向上滑动
slideDown()：向下滑动
slideToggle()：上下切换滑动，速度快点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> <input type="text" value="xx"/>
<input type="text" value="yy"/>
<input type="text" value="zz"/> <script type="text/javascript">
alert( $("input").val() );//xx
</script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript"> /*用JS语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = new Array("哈哈","呵呵","嘻嘻");
for(var i=0;i<nameArray.length;i++){
document.write(nameArray[i]+"<br/>");
}*/ /*用JSON语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js对象
var $nameArray = $(nameArray);//jquery对象
$nameArray.each(function(){
this表示数组中每一个元素，this属性js对象，this代表string类型
alert(this);
});*/ //用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
var nameArray = [
{
name : "哈哈",
sal : 6000
},
{
name : "嘿嘿",
sal : 7000
},
{
name : "笨笨",
sal : 8000
}
];
var $nameArray = $(nameArray);
$nameArray.each(function(){
//this代表object类型
alert(this.name + ":"+this.sal);
}); </script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> <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> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> <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> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<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属性
//alert( $("form input:first").attr("type") ); //设置form里最后个input元素的为只读文本框
//$("form input:last").attr("readonly","readonly")
//$(":password").attr("readonly","readonly") </script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> <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 );
$(document.body).append( $div ); </script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> <ul id="a">
<li>第一项</li>
<li id="secondID">第二项</li>
<li>第三项</li>
</ul> <ul id="b">
<li>第一条</li>
<li id="secondID">第二条</li>
<li>第三条</li>
</ul> <div>这是div元素</div> <script type="text/javascript"> //删除ID为secondID的LI元素
//$("#secondID").remove(); //删除所有LI元素
//$("#a li").remove(); //删除UL元素
$("#b").remove(); </script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> <div>
哈哈
</div> <select id="city">
<option value="地都">北京</option>
</select> <script type="text/javascript"> //取得<div>中的内容
//alert( $("div").text() ); //取得<option>的值和描述
var $option = $("#city option");
var value = $option.val();
var html = $option.text();
alert(value + ":" + html); </script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> <input type="button" value="原按钮" onclick="alert('静态事件')"/> <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 = $old.clone(true);
//$new.val("新按钮");
//$old.after( $new ); </script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<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='text' style='width:165px;height:23px'/>");
//文本框替代div标签
$(this).replaceWith( $text );
} );
</script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table>
<tr>
<td>
添加属性border/align/width
</td>
<td>
删除属性align
</td>
</tr>
</table> <script type="text/javascript">
//为<table>元素添加属性border/align/width
var $table = $("table").attr("border","2").attr("align","right").attr("width","60%") //将<table>元素的align属性删除
$table.removeAttr("align");
</script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.myClass{
font-size:30px;
color:red
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.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> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> <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(600); </script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>Hello</p>
<div>
<span>
Hello Again
<b>
Bold
</b>
</span>
</div>
<p>And Again</p>
<span>And Span</span> <script type="text/javascript"> //取得div元素的直接子元素内容，不含后代元素
//var $span = $("div").children();
//var content = $span.html();//包含子标签
//var content = $span.text();//不包含子标签
//alert(content); //取得div元素的下一个同级的兄弟元素内容
//var $p = $("div").next();
//alert( $p.text() ); //取得div元素的上一个同级的兄弟元素内容
//alert( $("div").prev().text() ); //依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").siblings("p");
$all.each(function(){
alert( $(this).html() );
}); </script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> <p>
<img src="../images/zgl.jpg"/>
</p> <script type="text/javascript">
//图片隐蔽
$("img").hide(5000); //休息3秒
window.setTimeout(function(){ //图片显示
$("img").show(5000); },3000); </script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>
<img src="../images/zgl.jpg" style="display:none"/>
</p> <script type="text/javascript">
//淡入显示图片
$("img").fadeIn(3000);
//淡出隐蔽图片
$("img").fadeOut(3000);
</script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body> <div>
中国0<br/>
中国1<br/>
中国2<br/>
中国3<br/>
中国4<br/>
中国5<br/>
中国6<br/>
中国7<br/>
中国8<br/>
中国9<br/>
</div> <input type="button" value="我的好友"/> <script type="text/javascript">
//向上下滑动
$(":button").click(function(){
//div标标上下移动
$("div").slideToggle(100);
});
</script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<script type="text/javascript">
function myclick(){
//使用jquery弹出奇数的tr标签下的td里的值，即A1,A2,A3,C1,C2,C3
var $tr = $("table tr:NOT(:last):even");
//在每个tr标签中查询td标签
$tr.each(function(){
//在tr标签中查询所有的td标签
var $td = $(this).find("td");
//迭代
$td.each(function(){
var content = $(this).text();
alert(content);
});
});
}
//写出另一种方式，比第一种更加easy
</script>
</head>
<body>
<table border="2" align="center" width="30%">
<tr>
<td>A1</td><td>A2</td><td>A3</td><td>0</td>
</tr>
<tr>
<td>B1</td><td>B2</td><td>B3</td><td>1</td>
</tr>
<tr>
<td>C1</td><td>C2</td><td>C3</td><td>2</td>
</tr>
<tr>
<td>D1</td><td>D2</td><td>D3</td><td>3</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value=" 测 试 " onclick="myclick()" />
</td>
<td>4</td>
</tr>
</table>
</body>
</html>
jQuery常用Method-API的更多相关文章
- JQuery常用的api[最好是系统地学习一下《锋利的JQuery》]
text http://api.jquery.com/text/ Get the combined text contents of each element in the set of matche ...
- jQuery常用的API
1.jQuery给标签添加子元素(父子关系) jQuery对象.append("子"); 将div标签插入到ul标签之后 $("ul").append($('d ...
- jquery 常用api 小结2
*一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
- jquery中最常用的API有哪些
jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...
- jQuery常用API之jQuery选择器
3.jQuery常用API 3.1 jQuery选择器 3.1.1 jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致,因此jQuery给我做了封装,是获取元素统一了标准 ...
- 24、jQuery常用AJAX-API/Java调用MySQL / Oracle过程与函数
1)掌握jQuery常用AJAX-API 2)掌握Java调用MySQL / Oracle过程与函数 一)jQuery常用AJAX-API 目的:简化客户端与服务端进行局部刷新的异步通讯 (1)取 ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- jQuery 3.1 API中文文档
jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...
- jquery常用的一些方法
一.选择网页元素(标签选择器) $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myCla ...
随机推荐
- Computer Vision_1_Active Appearance Models ：Active Appearance Models——1998
此为计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面. 1. Active Appearance Models 活动表观模型和活动轮廓模型基本思想来源 Snake,现在 ...
- 一 ：了解MVC
介绍 1. ASP.NET WebForm和ASP.NET MVC是并行的关系.都是属于.NET框架下的子框架. 2. MVC项目常用模板 空模板 : 不包含MVC目录结构,需要自己添加. 基本模 ...
- web开发：web前端初识
一.前端三剑客 二.编辑器 三.第一个页面 四.基本标签 五.标签分类 一.前端三剑客 html:完成页面架构的搭建 css:完成页面样式布局 js:完成页面功能 二.编辑器 插件: 插件管理器 ct ...
- swagger2注解使用方法
swagger注解整体说明: @Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI界 ...
- Ubuntu下PHP+MySQL+Apache+PHPStorm的安装和配置
粘贴自:https://www.jianshu.com/p/a6a0d2a29591 1.Apache的安装: $ sudo apt-get update $ sudo apt-get install ...
- java--mybatis的实现原理
动态代理? 需要调试下,看下源码,再研究下……
- Ubuntu系统---EasyECD安装记录
说明:因解决Ubuntu花屏和频繁死机的问题(后来证实本人的电脑显卡驱动有问题),手残毁坏了系统,需重装.之前从未装过系统,经过三天,反复折腾装了近十次的系统,现总结如下. 第一步:Windows 系 ...
- 最小m子段和（动态规划）
问题描述: 给定n个整数组成的序列,现在要求将序列分割为m段,每段子序列中的数在原序列中连续排列.如何分割才能使这m段子序列的和的最大值达到最小? 输入格式: 第一行给出n,m,表示有n个数分成m段, ...
- UVALive 6858——分类讨论&&水题
题目 链接 题意:对于一个$n \times m$的矩阵的最外一圈,问是否能用$k \times 1$的方块填满 分析 考虑左右两边的情况,分类讨论,切记考虑所有可能的情形. #include< ...
- BZOJ 3435 / Luogu 3920 [WC2014]紫荆花之恋 (替罪羊树 动态点分治 套 Treap)
题意 略 分析 引用PoPoQQQ的话 吾辈有生之年终于把这道题切了...QAQ (蒟蒻狂笑) Orz PoPoQQQ,我又抄PoPoQQQ的题解了 - 突然发现有旋Treap没那么难写 学习了一波C ...