jQuery学习(2)
<script type="text/javascript">
//给网页中所有的<p>元素添加onclick事件
$("p").click(function(){
alert($(this).text());
//$(this).text("abc");//改变值
}); //使一个特定的表格隔行变色
//table:eq(0)表示找到第一个表格
$("table:eq(0) tr:even").css("background","red");
//$("table:gt(0) tr:odd").css("background","red");
</script>
<!DOCTYPE html>
<html>
<head>
<title>formObjectFilter.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.js">
</script> </head> <body>
<h1>XXXXX</h1>
<h2>XXXXXXXXXXXXXX</h2>
<h3>XXXXXXXXXXXXXXXXXXXXXXXXX</h3>
<input type="button" value="利用 jQuery 对象的 val()方法改变表单内 type=text 可用<input>元素的值" id="b1"/>
<input type="button" value="利用 jQuery 对象的 val()方法改变表单内 type=text 不可用<input>元素的值" id="b2"/>
<input type="button" value="利用 jQuery 对象的 length 属性获取多选框中的个数" id="b3"/>
<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框中的内容" id="b4"/>
<br/> <input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/>
<br/> <input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4
<br/> <select name="job" size=9 multiple="multiple">
<option value="选项1">选项1^^</option>
<option value="选项2">选项2^^</option>
<option value="选项3">选项3^^</option>
<option value="选项4">选项4^^</option>
<option value="选项5">选项5^^</option>
<option value="选项6">选项6^^</option>
</select> <select id="hsp" name="edu">
<option value="博士">博士^^</option>
<option value="硕士">硕士^^</option>
<option value="本科">本科^^</option>
<option value="小学">小学^^</option>
</select> </body>
<script type="text/javascript">
//利用 jQuery 对象的 val()方法改变表单内 type=text 可用<input>元素的值
$("#b1").click(function(){
$("input[type=text]:enabled").val("XXXXXX");
}); //利用 jQuery 对象的 val()方法改变表单内 type=text 不可用<input>元素的值
$("#b2").click(function(){
$("input[type=text]:disabled").val("XXXXXXX");
}); //利用 jQuery 对象的 length 属性获取多选框中的个数
$("#b3").click(function(){
alert($("input[type=checkbox]:checked").length);
}); //利用 jQuery 对象的 text() 方法获取下拉框中的内容
$("#b4").click(function(){
//alert($("select option:selected").text());
$("select option:selected").each(function(){
alert($(this).text());
});
});
</script> </html>
得到标签类型的个数
<!DOCTYPE html>
<html>
<head>
<title>formFilterselecter2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js">
</script>
</head> <body>
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" />
<input type="button" value="button1" /> </body>
<script type="text/javascript">
alert($(":button").length);//得到所有的button
alert($("button").length);//得到<button/>按照元素标签取值
alert($("input[type='button']").length); </script>
</html>
选择器本身是不难的，难在选择。
1.选择id=yy的元素？
使用基本选择器
2.选择所有div元素
使用简单选择器里的element
3.选择所有p元素和span元素？
多个选择器
4.选择所有隐藏的div
可见性
下面代码可以输出被选中的checkbox个数。
$("#b1").click(function(){
alert($("input[type='checkbox']:checked").length);
});
jquery中的DOM操作
HTML DOM
CSS DOM
快速入门案例
创建节点：
js dom 创建 p var mypnode=document.createElement("p");
jquery 去创建 p var mypnode=$("<p/>");
或者 var mypnode=$("<p></p>");
如果<p></p>有内容， var mypnode=$("<p>我是中国人</p>");
运行时碰到一个小问题：
原因是将代码
var $li=$("<li/>");
错写成了
var $li=("<li/>");
步骤
①创建节点
②添加文本
.text()
③添加属性
.attr("名字","属性的值");
④挂载到指定的元素下
append()//注意这里不是appendchild()
完整代码如下所示：
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
</ul>
</body>
<script type="text/javascript">
//增加<li id="tj" name="tianjin">天津</li> //创建<li></li>
var $li=$("<li/>");
//var $li=$("<li>天津</li>"); //设置文本 <li>天津</li>
$li.text("天津"); //设置属性
$li.attr("id","tj");//attr("id"),表示得到id值，如果attr("id","tj")表示创建
//<li d="tj" name="tianjin">天津</li>
$("#city").append($li);
</script>
添加属性。
内部插入节点
A.append(B);把B加到A后面
A.appendTo(B);把A加到B后面
$li.appendTo("#city");
prepend():向每个匹配的元素的内部的开始出插入内容。
$li.text("发达城市");
$("#city").prepend($li);
after()和before()
/after(content):在每个匹配的元素之后插入内容，反恐这个元素就会自动消失
//$("#sh").after($("#fk")); //before(content):在每个匹配的元素之前插入内容
//$("#sh").before($("#fk")); //insertAfter(content):把所有匹配的元素插入到另一个指定的元素集合的后面
$("#sh").insertAfter($("#fk"));//这个功能和after()功能相反
测试html
<p name="p1">Hello</p>How are<p>you</p>
删除js代码
//从DOM中删除所有匹配的元素
//把所有p元素和p元素的子元素一起去掉
//$("p").remove(); $("#sh").remove(); $("p").empty();//清空节点-情况元素中的所有后代节点（不包含属性节点）
alert($("p").attr("name"));
删除节点
步骤①找到你要删除的元素节点
调用remove()，不需要找的父节点。
清空某个节点的子节点
empty(),它自己要被保留。
复制节点
clone()：克隆匹配的DOM元素，返回值为克隆后的副本，但此时的节点不具有任何行为。
$("button").click(function(){
alert("XXXX");
});
//$("button").clone().prependTo($("p"));
$("button").clone(true).prependTo($("p"));
替换节点
$("p").replaceWith("<p>新</p>");
prependTo是放在前面。
$("p").replaceWith("<button>new</button>");
还有replaceAll();
属性操作
attr():获取属性和设置属性
jQuery中有很多方法都是一个函数实现获取和设置。如：attr(),html(),text(),val(),height(),width(),css()等
removeAttr():删除指定元素的指定属性
<body>
<input type="text" title="abc" value="abc" id="input1"/>
<input type="button" value="abc" id="button1"/>
</body>
<script type="text/javascript">
/* $("#input1").attr("type","button");
$("#button1").attr("type","text");
$("#button1").attr("title","abc"); */ $("#button1").css("background","red");
</script>
样式操作
<!DOCTYPE html>
<html>
<head>
<title>removeElement.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script>
<style type="text/css">
.one{
background:red;
}
.two{
background:blue;
}
</style>
</head> <body>
<input type="button" value="所以获取class和设置class都可以使用attr()方法来完成" id="b1"/>
<input type="button" value="追加样式:addClass()" id="b2"/>
<input type="button" value="移除样式:removeClass() ---从匹配的元素中删除全部或指定的class" id="b3"/>
<input type="button" value="切换样式：toggleClass() -- 控制样式上的重复切换，如果类名存在则删除它，不存在则添加它" id="b4"/>
<input type="button" value="判断是否含有某个样式：hasClass() --- 判断元素中是否含有某个class。如果有，则返回true，否则返回false" id="b5"/>
<div id="first" >
first
</div>
<div id="second">
second
</div> </body>
<script type="text/javascript">
//所以获取 class 和设置 class 都可以使用attr()方法来完成
$("#b1").click(function(){
$("#first").attr("class","one");
});
//追加样式：addClass()
$("#b2").click(function(){
$("#first").addClass("two");
}); //移除样式:removeClass() ---从匹配的元素中删除全部或指定的class
$("#b3").click(function(){
$("#first").removeClass();
});
//切换样式：toggleClass() -- 控制样式上的重复切换，如果类名存在则删除它，不存在则添加它
$("#b4").click(function(){
$("#first").toggleClass("one");
});
//判断是否含有某个样式：hasClass() --- 判断元素中是否含有某个class。如果有，则返回true，否则返回false
$("#b5").click(function(){
alert($("#first").hasClass("one"));
}); </script>
</html>
<body>
<input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br/>
<input type="password" value="" id="b2"/><br/>
<input type="button" value="登录" id="b3"/><br/>
<br/>
</body>
<script type="text/javascript">
$("#b1").focus(function(){
var curValue=$(this).val();
if(curValue==this.defaultValue){
$(this).val("");
}
}); $("#b1").blur(function(){
//获取当前值
var curValue=$(this).val();
if($.trim(curValue)==""){
$(this).val(this.defaultValue);
}
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>test.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script> </head> <body>
<input type="button" value="使单选下拉框的'2号'被选中" id="input1"/><br>
<input type="button" value="使多选下拉框中的'2号'和'5号'被选中"/><br>
<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
<input type="button" value="使单选框的'单选2'被选中"/><br> <br/> <select id="one">
<option>1号</option>
<option>2号</option>
<option>3号</option>
</select>
<select id="many" multiple="multiple" style="height:120px;">
<option selected="selected">1号</option>
<option>2号</option>
<option>3号</option>
<option>4号</option>
<option>5号</option>
<option selected="selected">6号</option>
</select>
<input type="checkbox" name="c" value="check1"/>复选1
<input type="checkbox" name="c" value="check2"/>复选2
<input type="checkbox" name="c" value="check3"/>复选3
<input type="checkbox" name="c" value="check4"/>复选4
<br/>
<input type="radio" name="r" value="radio1"/>单选1
<input type="radio" name="r" value="radio2"/>单选2
<input type="radio" name="r" value="radio3"/>单选3 </body>
<script type="text/javascript">
$(document).ready(function(){
//使单选下拉框的'2'号被选中
$("#input1").click(function(){
$("#one").val("2号");
}); //使多选下拉框选中的'2号'和'5号'被选中
$("input:eq(1)").click(function(){
$("#many").val(["2号","5号"]);
}); //使复选框的'复选2'和'复选4'被选中
$("input:eq(2)").click(function(){
$("input[type='checkbox']").val(["check2","check4"]);
//说明["check2","check4"]是一个数组
}); //使单选框的'单选2'被选中
$("input:eq(3)").click(function(){
$("input[type=radio]").val(["radio2"]);//必须用[]
});
});
</script> </html>
常用的遍历节点方法
取得匹配元素的所有子元素组成的集合:children()。该方法只考虑子元素而不考虑任何后代元素。
取得匹配元素后面紧邻的同辈元素的集合：next();
取得匹配元素前面紧邻的同辈元素的集合：prev();
取得匹配元素前后所有的同辈元素:siblings()
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>removeElement.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script> </head> <body>
<input type="button" id="b2" value="查找所有子元素">
<input type="button" id="b3" value="获取后面的同辈元素">
<input type="button" id="b4" value="获取前面的同辈元素"> <div>
ccccccccccccccccccccc
</div> <div class="one">
<div id="one" >
XXXXXXXXXXXXXXX one
</div> <div id="two" >
XXXXXXXXXXXXXXX two
</div> <div id="three" >
XXXXXXXXXXXXXXX three
</div> <div id="four" >
XXXXXXXXXXXXXXX four
</div>
</div>
<div>
ttttttttttttttt
</div>
</body>
<script type="text/javascript">
//查找所有子元素
$("#b2").click(function(){
$(".one").children().each(function(index,data){
alert(index+" "+$(data).text());
});
}); //获取后面的同辈元素
$("#b3").click(function(){
$(".one").next().each(function(index,data){
alert(index+" "+$(data).text());
});
}); //获取前面的同辈元素
$("#b4").click(function(){
$(".one").prev().each(function(index,data){
alert(index+" "+$(data).text());
});
}); </script>
</html>
jQuery学习(2)的更多相关文章
- jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jquery学习（一）
简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- 很不错的jQuery学习资料和实例
这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...
- jquery学习以及下载链接
jquery学习链接 http://www.w3school.com.cn/jquery/jquery_intro.asp jquery 脚本库下载链接 http://jquery.com/downl ...
- 转载最佳JQuery学习网站
转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript ...
- JQuery学习笔记--01
JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...
随机推荐
- JDK自带的定时任务
import java.util.TimerTask; /** * 实现定时任务 * */ public class MyTimerTask extends TimerTask { @Override ...
- 使用JMeter测试Java项目
一. Apache JMeter工具 1)简介 JMeter——一个100%的纯Java桌面应用,它是Apache组织的开放源代码项目,它是功能和性能测试的工具.JMeter可以用于测试静态或者动态资 ...
- #define的使用方法体会
#define 创建一个宏,该宏是标识符或參数化标识符与标记字符串的关联. 在定义宏之后.编译器可用标记字符串替换源文件里标识符的每一个匹配项. 双击以所有折叠.">语法 #defin ...
- hiho一下 第115周：网络流一•Ford-Fulkerson算法 （Edmond-Karp，Dinic，SAP）
来看一道最大流模板水题,借这道题来学习一下最大流的几个算法. 分别用Edmond-Karp,Dinic ,SAP来实现最大流算法. 从运行结过来看明显SAP+当前弧优化+gap优化速度最快. hi ...
- ASIHTTPRequest中文入门教程全集 http://www.zpluz.com/thread-3284-1-1.html
本文转载至 目录 3 第 1 章 创建和运行请求 5 1.1. 创建一个同步请求 5 1.2. 创建一个异步请求 5 1.3. 使用程序块(blocks ) 6 1.4. 使用 ...
- spring注解集合
spring篇 @Autowired Spring 2.5 引入了 @Autowired 注释,它可以对类成员变量.方法及构造函数进行标注,完成自动装配的工作. Spring 通过一个 BeanPos ...
- [置顶] 2013_CSUST暑假训练总结
2013-7-19 shu 新生训练赛:母函数[转换成了背包做的] shuacm 题目:http://acm.hdu.edu.cn/diy/contest_show.php?cid=20083总结:h ...
- centos7 PXE自动安装环境搭建
原理: 要进行自动安装的主机A,加电启动时以网卡为第一启动设备 1.启动时会向网络广播,找到dhcp服务器B请求分配IP地址信息,服务器B除了给其分配基本的IP信息(ip.netmask.getewa ...
- Oracle数据库获取uuid函数
Oracle新建系统表时,要求主键为32位uuid,推測Oracle肯定会提供相关的函数. 翻阅相关文档,果然发现Oracle提供的函数 sys_guid() 用于获取32位uuid,简单使用为 se ...
- 内存写越界导致破环堆结构引起的崩溃问题定位经验[如报错malloc(): memory corruption或free(): invalid next size]
前段时间开发的一个后端C模块上线后,线上出core,初始时,因为訪问压力不大,所以崩溃是上线3天左右出现的.当时用gdb跟进调用堆栈并检查源代码,发现出core位置的代码沒有啥问题.因为当时开发任务较 ...