Webform——JQuery基础（选择器、事件、DOM操作）
一、选择器
1、基本选择器
①id选择器：# ②class选择器：. ③标签名选择：标签名
④并列选择：用，隔开 ⑤后代选择：用空格隔开
代码用法展示：
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(){},....)——点击事件循环执行，具体看下面的代码用法展示
代码用法展示：
3、事件冒泡（冒泡事件）
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
解析：下面是html代码部分：
对应的jQuery代码如下：
当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。
如何防止这种冒泡事件发生呢？
修改如下：
event.stopPropagation(); // 阻止事件冒泡
或者通过return false来处理。
三、DOM操作
1、操作内容
①表单元素：取值：var s=$(“选择器”).val()
赋值：$(“选择器”).val(“值”)
②非标单元素：取值：var s=$(“选择器”).text(“内容”) var s=$(“选择器”).text(“内容”)
赋值：$(“选择器”).text(“内容”) $(“选择器”).html(“内容”)
代码用法展示：
2、操作属性
①获取属性：var s=$(“选择器”).attr(“属性名”)
②设置属性：$(“选择器”).attr(“属性名”,”属性值”)
③更改属性：$(“选择器”).attr(“属性名”,”属性值”)
④删除属性：$(“选择器”).removeAttr(“属性名”)
代码用法展示：
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(“选择器”)
用法代码展示：
②操作：新建：$(“html字符串”)
添加：appen(jquery对象或字符串)——某个元素内部添加
after(…)——下部平级添加
before(…)——上部平级添加
移除：empty()——清空内部全部元素
remove()——清空元素
复制：clone()
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.7.2.min.js"></script>
<title></title>
<style>
.txt-main {
position: relative;
width: 80%;
margin-left: 10%;
border: 2px solid black;
box-sizing: border-box;
margin-top: 10px;
} .txt-main h3 {
margin-left: 5%;
} .context {
width: 90%;
margin-left: 5%;
border-bottom: 1px solid black;
border-top: 1px solid black;
padding-top: 20px;
padding-bottom: 20px;
} .txt-main span {
display: inline-block;
width: 90%;
margin-left: 5%;
text-align: right;
height: 40px;
line-height: 40px;
}
#txt2 {
width:70%;
height:30px;
margin-left:20px;
font-size:18px;
}
.huifu {
width:100%;
margin-left:20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div> <textarea id="txt1" style="width: 100%; height: 100px;"></textarea><br />
发表人：<input type="text" id="txt-name" />
<input type="button" value="发表" id="btn1" /><br /> </div>
</form>
</body>
</html>
<script type="text/javascript">
$("#btn1").click(function () {
var str = "<div class=\"txt-main\"><h3 id=\"h3\">";
str += $("#txt-name").val(); //这里填充发表人
str += "</h3><div class=\"context\">";
str += $("#txt1").val();//这里填充发表内容
str += "</div><span>2000-1-1</span><input type=\"button\" value=\"删除\" class=\"btn_del\" /><input type=\"button\" value=\"回复\" class=\"btn_ins\" /><br /></div>"; var ttt = $(str);
$(this).next().after(ttt);
});
$(".btn_del").live("click", function () {
$(this).parent().remove();
});
$(".btn_ins").live("click", function () {
var str = "<div class=\"huifu\" ><textarea id=\"txt2\"></textarea></br><input type=\"button\" value=\"提交\" class=\"btn_tijiao\" /></br></div>";
var ttt = $(str);
$(this).next().after(ttt);
});
$(".btn_tijiao").live("click", function () {
var str = "<div class=\"huifu\">";
str += "@";
str += $("#h3").text() + ":";
str += $("#txt2").val();
str += "</div>";
var ttt = $(str);
$(this).parent().after(ttt);
$(this).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.基本选择器 基本选择器 ...
随机推荐
- .NET CORE学习笔记系列(2)——依赖注入[7]: .NET Core DI框架[服务注册]
原文https://www.cnblogs.com/artech/p/net-core-di-07.html 包含服务注册信息的IServiceCollection对象最终被用来创建作为DI容器的IS ...
- python之面相对象进阶
一 isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo(object) ...
- 苹果绿RGB值
ESL的值为:85,123,205 RGB的值为:199,237,204 ESL和RGB只需填一个即可,另一个会自动调整~
- linux 下 命令行中运行 selenium chrome 问题
1.chrome 现在不允许使用root运行了. 2.无界面 chromedriver 调用chrome 会出错. <另外一定要匹配 chromedriver和chrome 的版本. 要不会出各 ...
- 【原创】IDEA一定要改的八条配置
引言 坦白说,我很少写这种操作类型的文章.因为这种文章没啥新意,大家操作步骤肯定是一样的.然而,我答应了我的同事小阳,给她出一篇!毕竟人家打算从Eclipse转IDEA了,于是以示鼓励,写一篇给她! ...
- TensorFlow基础
TensorFlow基础 SkySeraph 2017 Email:skyseraph00#163.com 更多精彩请直接访问SkySeraph个人站点:www.skyseraph.com Over ...
- You earned your Program Management Professional (PgMP)® Credential
You earned your Program Management Professional (PgMP)® Credential. pasting
- System.nanoTime与System.currentTimeMillis的区别(转)
原文地址:http://blog.csdn.net/dliyuedong/article/details/8806868 平时产生随机数时我们经常拿时间做种子,比如用System.currentTim ...
- Mybatis映射文件的自动映射与手动映射问题
Mapper XML 文件 MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单.如果拿它跟具有相同功能的 JDBC 代码进行对比,你会 ...
- 栈（LIFO）
1 栈的定义 栈是限定在表尾进行插入和删除操作的线性表. 2 栈的特点 1)栈是特殊的线性表,线性表也具有前驱后继性: 2)栈的插入和删除操作只能在表尾即栈顶进行: 3)后进先出. 3 栈的实现及关键 ...