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 ...
随机推荐
- lua学习笔记（十二）
弱引用table lua使用自动内存管理机制,通过垃圾回收器来回收内存 垃圾回收器只能回收它认为是垃圾的内容,而不能回收用户认为是垃圾的内容 典型的例子栈,栈一般用一个数组和一 ...
- ANDROID常用的命令（转载，后续自己完善）
1.adb devices:查看当前已连接的设备.2.adb shell:进入android的shell模式.3.echo 3>/proc/sys/vm/drop_caches:清除一下系统的c ...
- SpringBoot Idea 启动报错 Process finished with exit code 1
问题描述:没有其他任何错误日志,只有Process finished with exit code 1 问题原因:Maven POM.xml问题造成 由于是properties是我直接从其他项目中拷贝 ...
- PHP资源,库，工具大全
内容包括:库.框架.模板.安全.代码分析.日志.第三方库.配置工具.Web 工具.书籍.电子书.经典博文等等. 大家可以搜索其它语言,如awesome-java的https://github.com/ ...
- PHP Memcached 面试题
这里收集了经常被问到的关于memcached的问题 * memcached是怎么工作的? * memcached最大的优势是什么? * memcached和MySQL的query cache相比,有什 ...
- PHP-Manual的学习----【语言参考】----【类型】-----【array数组】
1.Array 数组 PHP 中的 数组 实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型.此类型在很多方面做了优化,因此可以把它当成真正的数组,或列表(向量),散列表(是 ...
- 杭电OJ(HDU)-ACMSteps-Chapter Three-《FatMouse' Trade》《今年暑假不AC》《排名》《开门人和关门人》
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2Fpc2luaV92Yw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- app 之间发送文件 ios
本文转载至 http://www.51094.com/?p=212 第一种: 发送一个正常的 pdf 文件,只要是能读取pdf 的都能得到响应 -(IBAction)openDocumentIn ...
- 九度OJ 1252：回文子串 （字符串处理、DP）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:387 解决:224 题目描述: 输入一个字符串,输出该字符串中对称的子字符串的最大长度. 比如输入字符串"google" ...
- 【译】Java语言速览：StackOverflow
Java (请不要与 JavaScript 搞混) 是一种设计为与 Java 虚拟机 (JVM) 一起使用的多用途编程语言.一般称呼安装了相关工具使其可以开发并运行 Java 程序的电脑系统为 &qu ...