webform（九）——JQuery基础（选择器、事件、DOM操作）
JQuery —— 一个js函数包
一、选择器
1、基本选择器
①id选择器：# ②class选择器：. ③标签名选择：标签名
④并列选择：用，隔开 ⑤后代选择：用空格隔开
代码用法展示：
<title></title>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<a>aaaaa</a> <%--a标记--%>
</div>
<div id="div2"></div>
<div class="div"></div>
<div></div>
</form>
</body>
</html> <%-- $ JQuery标志性符--%>
<script type="text/javascript" >
$("#div1").css("background-color", "red"); //id选择,$("#div1")相当于js中docunment.getElementById("div1"),下面其他类似
$(".div2").css("background-color", "red"); //class选择
$("div").css("background-color", "red"); //标签选择
$("#div1,#div2").css("background-color", "red"); //并列选择，用逗号隔开
$("#div1 a").css("background-color", "red"); //后代选择，用空格隔开
</script>
基本选择器
2、过滤选择器
（1）、基本过滤
①首个：:first ②尾个：:last ③任意个：:eq(索引号) ④大于：:gt(索引号)
⑤小于：:lt(索引号) ⑥排除：:not(选择器) ⑦奇数：odd ⑧偶数：even
（2）、属性过滤
①属性名过滤：[属性名]
②属性值过滤：[属性名=属性值]或[属性名！=属性值]
（3）、内容过滤
①文字过滤：:contains(“字符串”)
②子元素过滤：:has(选择器)
代码用法展示：
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="div">aaa</div>
<div class="div">bbb</div>
<div class="div" hehe="aaa" he="aaa"><a></a></div>
<div class="div" hehe="bbb">bbb</div>
<div class="div">aaa</div>
<div class="div"><a></a></div>
</form>
</body>
</html>
<script type="text/javascript" >
//基本过滤
$(".div:first").css("background-color", "red"); //取首个
$(".div:last").css("background-color", "red"); //取最后一个
$(".div:eq(2)").css("background-color", "red"); //取任意个， :eq(索引号) 或者$(".div").eq(2).css("background-color", "red");——重点
$(".div:gt(2)").css("background-color", "red"); //:gt(索引号)，取大于该索引号的
$(".div:lt(2)").css("background-color", "red"); //:lt(索引号)，取小于该索引号的
$(".div:not(.div:eq(2))").css("background-color", "red"); //:not(“选择器”)，排除这一个，选剩余的
$(".div:odd").css("background-color", "red"); //:odd，选索引为奇数的
$(".div:even").css("background-color", "red"); //:even，选索引为偶数的 //属性过滤
$(".div[he]").css("background-color", "red"); //[属性名]，选有该属性名的
$(".div[hehe=aaa]").css("background-color", "red"); //[属性名=属性值]，选有该属性名且是此属性值的
$(".div[hehe!=bbb]").css("background-color", "red"); //[属性名！=属性值]，选有该属性名的且属性值不是此的
//内容过滤
$(".div:contains('a')").css("background-color", "red"); //:contains('字符串')，选取包含该字符串的——根据文字
$(".div:has(a)").css("background-color", "red"); //:has(“选择器”)，选取包含该选择器的——根据选择器
</script>
过滤选择器
二、事件
1、常规事件——把js事件前面的on去掉
比如：js：onclick——JQuery：click
2、复合事件
①houver(function(){},functiaon(){})——相当于把mouseover()mouseout()合二为一
②toggle(function(){},function(){},....)——点击事件循环执行，具体看下面的代码用法展示
代码用法展示：
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="div">aaa</div>
<div class="div">bbb</div>
<div class="div"><a></a></div>
<div class="div">bbb</div>
<div class="div">aaa</div>
<div class="div"><a></a></div> </form>
</body>
</html>
<script type="text/javascript" >
//单击事件
$(".div").click(function () {
alert('aaa');
});
//双击事件
$(".div").dblclick(function () {
alert('aaa');
});
//复合事件hover——相当于把mouseover()mouseout()合二为一
$(".div").hover(function () {
$(this).css("background-color","red");
}, function () {
$(this).css("background-color", "blue");
});
//复合事件toggle——点击事件循环执行，下面代码中即点击div，循环为div更换背景色
$(".div").toggle(function () {
$(this).css("background-color", "red");
}, function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "blue");
}, function () {
$(this).css("background-color", "green");
}, function () {
$(this).css("background-color", "orange");
});
</script>
常规和复合事件
3、事件冒泡（冒泡事件）——冒泡部分转载自：http://www.cnblogs.com/jiqing9006/archive/2012/09/11/2679831.html
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
解析：下面是html代码部分：
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div> <div id="msg"></div>
</body>
对应的jQuery代码如下：
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
$('#msg').html(txt);// 设置html信息
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
冒泡Jquery
当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。
如何防止这种冒泡事件发生呢？
修改如下：
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
阻止冒泡一
event.stopPropagation(); // 阻止事件冒泡
或者通过return false来处理。
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
return false;
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
return false;
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
阻止冒泡二
三、DOM操作
1、操作内容
①表单元素：取值：var s=$(“选择器”).val()
赋值：$(“选择器”).val(“值”)
②非标单元素：取值：var s=$(“选择器”).text(“内容”) var s=$(“选择器”).text(“内容”)
赋值：$(“选择器”).text(“内容”) $(“选择器”).html(“内容”)
代码用法展示：
<script type ="text/javascript" >
//$(document).ready相当于js中的window.onload
$(document).ready(function () {
$("#a").click(function () {
$(this).text("bbbb");//改变a标记的显示内容
})
$("#btn1").click(function () {
$("#txt").val("aaaaaa");//改变文本框的显示内容
$(this).val("bbbb");//改变按钮的显示内容
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<%--操作内容 start--%>
<a id="a">aaaaa</a>
<input type ="text" id="txt" />
<input type ="button" id="btn1" value ="btn1" />
<%--操作内容 end--%>
</form>
</body>
操作内容
2、操作属性
①获取属性：var s=$(“选择器”).attr(“属性名”)
②设置属性：$(“选择器”).attr(“属性名”,”属性值”)
③更改属性：$(“选择器”).attr(“属性名”,”属性值”)
④删除属性：$(“选择器”).removeAttr(“属性名”)
代码用法展示：
<style type="text/css" >
.aaa {
border :5px solid red;
}
.bbb {
border :10px solid blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<%--操作属性 start--%>
<input type ="text" id="txt1" />
<input type ="button" id="btn1" value ="btn1" />
<input type ="button" id="btn2" value ="btn2" />
<input type ="button" id="btn3" value ="btn3" />
<%--操作属性 end--%>
</form>
</body>
</html>
<script type ="text/javascript" >
$("#btn1").click(function () {
$("#txt1").attr("disabled", "disabled");//点击btn1按钮，给文本框设置不可用属性和class
$("#txt1").attr("class", "aaa");
}); $("#btn2").click(function () {
$("#txt1").removeAttr("disabled").attr("class","bbb");//点击btn2按钮，删除文本框不可用属性,并且更改class属性
}); $("#btn3").click(function () {
var aa = $("#txt1").attr("class");//点击btn3按钮，获取文本框的class属性，然后alert弹出看看
alert(aa);
});
</script>
操作属性
3、操作样式（一般用操作属性就可以）
①操作内联样式：获取样式：var s=$(“选择器”).css(“样式名”)
设置样式：$(“选择器”).css(“样式名”,”值”)、
$("#btn1").click(function () {
$("#txt1").css("border", " 5px solid red");});
②操作样式表的class：添加class：$(“选择器”).addClass(“class名”)
移除class：$(“选择器”).removeClass(“class名”)
添加移除交替class：$(“选择器”).toggleClass(“class名”)
4、操作相关元素
①查找：父辈、前辈：parent() parents(“选择器”)
子代、后代：children(“选择器”) find(“选择器”)
兄弟：哥哥：prev() prevAll(“选择器”)
弟弟：next() next All(“选择器”)
用法代码展示：
<script src="js/jquery-1.7.2.min.js"></script>
<style type="text/css" >
#div1 {
width :400px;
height :400px;
background-color :red;
}
#div2 {
width :300px;
height :300px;
background-color :yellow;
}
#div3 {
width :200px;
height :200px;
background-color :blue;
}
#div4 {
width :100px;
height :100px;
background-color :green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"></div>
</div>
</div>
</div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
</form>
</body>
</html>
<script type="text/javascript" >
$("#div4").click(function () {
var p = $(this).parent();//查找div4的父级
var p = $(this).parent().parent();//查找div4的父级的父级
var p = $(this).parents("#div2");//若知道前辈的id或name，可以用parents("选择器")
}); $("#div1").click(function () {
var p = $(this).children("#div2");//查找div1的子级，children("#div3")是找不出来的，div3是div1子集的子集
var p = $(this).find("#div3");//查找div1的后代div3
});
//div1、div5、div6、div7平级
$("#div1").click(function () {
var p = $(this).next();//查找div1的弟弟，可以next().next()
var p = $(this).nextAll("#div6");//nextAll("选择器")，前提知道需要查找的弟弟的选择器
});
$("#div7").click(function () {
var p = $(this).prev();//查找div1的哥哥，可以prev().prev()
var p = $(this).prevAll("#div6");//prevtAll("选择器")，前提知道需要查找的哥哥的选择器
}); </script>
查找
②操作：新建：$(“html字符串”)
添加：appen(jquery对象或字符串)——某个元素内部添加
after(…)——下部平级添加
before(…)——上部平级添加
移除：empty()——清空内部全部元素
remove()——清空元素
复制：clone()
代码用法展示：例子：模仿制作一个微博或者其他的评论页面
<script src="js/jquery-1.7.2.min.js"></script>
<style type="text/css" >
#div1 {
width :400px;
height :400px;
background-color :red;
}
#div2 {
width :300px;
height :300px;
background-color :yellow;
}
#div3 {
width :200px;
height :200px;
background-color :blue;
}
#div4 {
width :100px;
height :100px;
background-color :green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"></div>
</div>
</div>
</div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
</form>
</body>
</html>
<script type="text/javascript" >
$("#div4").click(function () {
var p = $(this).parent();//查找div4的父级
var p = $(this).parent().parent();//查找div4的父级的父级
var p = $(this).parents("#div2");//若知道前辈的id或name，可以用parents("选择器")
}); $("#div1").click(function () {
var p = $(this).children("#div2");//查找div1的子级，children("#div3")是找不出来的，div3是div1子集的子集
var p = $(this).find("#div3");//查找div1的后代div3
});
//div1、div5、div6、div7平级
$("#div1").click(function () {
var p = $(this).next();//查找div1的弟弟，可以next().next()
var p = $(this).nextAll("#div6");//nextAll("选择器")，前提知道需要查找的弟弟的选择器
});
$("#div7").click(function () {
var p = $(this).prev();//查找div1的哥哥，可以prev().prev()
var p = $(this).prevAll("#div6");//prevtAll("选择器")，前提知道需要查找的哥哥的选择器
}); </script>
css
前台代码：
<title></title>
<script src="js/jquery-1.7.2.min.js"></script>
<link href="css/css7.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="boss">
<div id="top">
<textarea id="txt1"></textarea>
<input type="button" id="btn1" value="提交" />
</div>
<div id="bottom">
<%--评论div start--%>
<div class="item">
<div class="item_top">aaaaaaaa</div>
<div class="item_txt">
aaaaaaa
</div>
<div class="item_bottom">
--
<input type="button" class="btn_del" value="删除" />
</div>
</div>
<%--评论div end--%>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$("#btn1").click(function () {
var oTxt = $("#txt1").val();//取文本框的内容
var aaa = "<div class=\"item\">";
aaa += "<div class=\"item_top\">aaaaaaaa</div><div class=\"item_txt\">";
aaa += oTxt;
aaa += "</div><div class=\"item_bottom\">";
aaa += "1999-1-1 <input type=\"button\" value=\"删除\" class=\"btn_del\" /></div></div>";//拼接评论div的字符串
//判断是否已有评论
if ($(".item").length <= ) {
$("#bottom").append(aaa);//若没有，直接在 $("#bottom")内部添加一个
}
else {
$(".item").eq().before(aaa);//若有，从索引为0的一个，上部平级添加
//$(".item").eq(0).after(aaa);//若有，从索引为0的一个，下部平级添加
}
}); //live()——未来事件，即给还没有出现但一定会出现的元素添加事件，只要这个class是.btn_del的元素出现，就会绑上这个事件
$(".btn_del").live("click", function () {
$(this).parent().parent().remove();
});
</script>
webform（九）——JQuery基础（选择器、事件、DOM操作）的更多相关文章
- jQuery基础-选择器，样式操作
入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...
- jQuery基础知识点（DOM操作）
1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...
- 读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- 第25篇 jQuer快速学习（上）---选择器和DOM操作
这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...
- jQuery基础之事件
jQuery基础之事件方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> <s ...
- jquer 事件，选择器，dom操作
一.jQuery简介 jQuery 是一个 JavaScript 库.(其实就是js,就是封装了,语法上有些不一样) jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 ...
- jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- [转]jQuery 选择器和dom操作
居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...
- Jquery 事件 DOM操作
常规事件: 把JS的事件 on去掉即可 例如:js document.getElementById("id").onclinck=function(){} Jquery ...
随机推荐
- 一个小型的CMS后台管理平台发布啦～
由于我不太懂怎么把博客园里我上传的文件共享,所以只好先放到百度网盘里了 数据库和发布的网站都放在这里 http://pan.baidu.com/s/1eQw3DOA 有问题请参考以下链接: http: ...
- Linux 与 Linux Windows 文件共享 小知识
Linux 与 Linux Windows 文件共享 前提说明:windows主机信息:192.168.1.100 帐号:abc 密码:123 共享文件夹:sharelinux主机信息:192.1 ...
- div里嵌套了img 底部会出现白边
因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高.下面这张图中的黑线就是那条基线. 要去掉空格可以使用v ...
- web标准之道——笔记
字体设置 sans和sans-serif为通用字体,具体哪个字体被最终应用由浏览器决定,通用字体只有在其他字体都无效时才会被当作代替方案.通用字体应该放在最后面 sans衬线字体 容易阅读,一般使用在 ...
- Bootstrap3系列：输入框组
1. 基本实例 通过在文本输入框 <input> 前面.后面或是两边加上文字或按钮,实现对表单控件的扩展. .input-group包含.input-group-addon给 .form- ...
- JavaScript权威设计--事件处理介绍(简要学习笔记十七)
1.事件相关概念 事件类型:一个用来说明发生什么类型事件的字符串 事件目标:是发生的事件或与之相关的对象. 事件处理程序(事件监听程序):是处理货响应事件的函数. 事件对象:是与特定事件相关并且包含有 ...
- Android动画：模拟开关按钮点击打开动画（属性动画之平移动画）
在Android里面,一些炫酷的动画确实是很吸引人的地方,让然看了就赏心悦目,一个好看的动画可能会提高用户对软件的使用率.另外说到动画,在Android里面支持3种动画: 逐帧动画(Frame Ani ...
- 《JavaScript 代码优化指南》
~~教你向老鸟一样敲代码~~. 1. 将脚本放在页面的底部 ... <script src="./jquery.min.js"></script> &l ...
- STM32 NVIC配置详解
例程: /* Configure one bit for preemption priority */ NVIC_PriorityGroupConfig(NVIC_PriorityGroup_1) ...
- 在MongoDB的MapReduce上踩过的坑
太久没动这里,目前人生处于一个新的开始.这次博客的内容很久前就想更新上来,但是一直没找到合适的时间点(哈哈,其实就是懒),主要内容集中在使用Mongodb时的一些隐蔽的MapReduce问题: 1.R ...