目的:对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的更多相关文章

  1. JQuery常用的api[最好是系统地学习一下《锋利的JQuery》]

    text http://api.jquery.com/text/ Get the combined text contents of each element in the set of matche ...

  2. jQuery常用的API

    1.jQuery给标签添加子元素(父子关系) jQuery对象.append("子"); 将div标签插入到ul标签之后 $("ul").append($('d ...

  3. jquery 常用api 小结2

    *一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...

  4. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  5. jquery中最常用的API有哪些

    jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...

  6. jQuery常用API之jQuery选择器

    3.jQuery常用API 3.1 jQuery选择器 3.1.1 jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致,因此jQuery给我做了封装,是获取元素统一了标准 ...

  7. 24、jQuery常用AJAX-API/Java调用MySQL / Oracle过程与函数

      1)掌握jQuery常用AJAX-API 2)掌握Java调用MySQL / Oracle过程与函数 一)jQuery常用AJAX-API 目的:简化客户端与服务端进行局部刷新的异步通讯 (1)取 ...

  8. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  9. jQuery 3.1 API中文文档

    jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...

  10. jquery常用的一些方法

    一.选择网页元素(标签选择器) $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myCla ...

随机推荐

  1. (备忘)Java Map 遍历

    //最常规的一种遍历方法,最常规就是最常用的,虽然不复杂,但很重要,这是我们最熟悉的,就不多说了!! public static void work(Map<String, Student> ...

  2. web开发:javascript基础

    一.js引入 二.变量的定义 三.三种弹出框 四.调试方式 五.数据类型 六.数据类型转换 七.运算符 八.分支机构 九.循环结构 十.异常处理 十一.函数 一.js引入 - ES: ECMAScri ...

  3. Hadoop_19_MapReduce&&Yarn运行机制

    1.YARN的运行机制 1.1.概述: Yarn集群:负责海量数据运算时的资源调度,集群中的角色主要有:ResourceManager.NodeManager Yarn是一个资源调度(作业调度和集群资 ...

  4. idou老师教你学istio1:如何为服务提供安全防护能力

    之前,已为大家介绍过 Istio 第一主打功能---连接服务. 凡是产生连接关系,就必定带来安全问题,人类社会如此,服务网格世界,亦是如此. 今天,我们就来谈谈Istio第二主打功能---保护服务. ...

  5. mybatis详解(三)

    一,动态sql,where,trim,set和foreach parameterType的属性可以不用写 xml文件sql的书写 <select id="queryByParams&q ...

  6. P5496 【模板】回文自动机(PAM)

    做一下强制在线处理即可 #include <cstdio> #include <algorithm> #include <cstring> using namesp ...

  7. LDA的参数确定和主题数确定方法

    主题数确定:困惑度计算,画出曲线,选择拐点,避免信息丢失和主题冗余 https://blog.csdn.net/u014449866/article/details/80218054 参数调节: 方法 ...

  8. CentOS 7 yum update 升级提示:PackageKit 锁定解决方案

    CentOS 7 系列新安装后都会进行yum update操作,但每次都会遇到PackageKit 锁定问题,提示如下: /var/run/yum.pid 已被锁定,PID 为 2694 的另一个程序 ...

  9. Spring Security 自定义 登陆 权限验证

    转载于:https://www.jianshu.com/p/6b8fb59b614b 项目简介 基于Spring Cloud 的项目,Spring Cloud是在Spring Boot上搭建的所以按照 ...

  10. python录音程序

    # -*- coding: utf-8 -*- # @Time : 18-10-16 下午12:20 # @Author : Felix Wang import pyaudio import nump ...