一、选择器

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操作）的更多相关文章

  1. jQuery基础-选择器，样式操作

    入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...

  2. jQuery基础知识点（DOM操作）

    1.样式属性操作     1)设置样式属性操作         ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...

  3. 读<jquery 权威指南>[1]-选择器及DOM操作

    今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...

  4. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  5. 第25篇 jQuer快速学习（上）---选择器和DOM操作

    这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...

  6. jQuery基础之事件

    jQuery基础之事件方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> <s ...

  7. jquer 事件，选择器，dom操作

    一.jQuery简介 jQuery 是一个 JavaScript 库.(其实就是js,就是封装了,语法上有些不一样) jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 ...

  8. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  9. [转]jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

随机推荐

  1. 爬虫实例系列一(requests)

    一 爬虫简介 ''' 爬虫:通过编写程序,模拟浏览器上网,让其去互联网上爬取数据的过程 分类: 通用爬虫:爬取全部的页面数据 聚焦爬虫:抓取页面中局部数据 增量式爬虫:爬取网站中更新出的数据 反爬机制 ...

  2. 解决Error response from daemon: Get https://registry-1.docker.io/v2/library/hello-world/manifests/

    https://blog.csdn.net/quanqxj/article/details/79479943

  3. 【题解】P2324 [SCOI2005]骑士精神

    ·有关IDA* 是带有估值函数的迭代加深搜索,表现出出色的效率. 估值函数可以简单的定义为「已经到位的骑士的个数」. 然后就是普通的迭代加深了. 算法酷炫不一定赢,搜索好才是成功. ——Loli Co ...

  4. day22-多并发编程基础（三）

    今天学习了并发编程中的最后一部分,协程,也是python中区别于java,c等语言中很大不同的一部分 1.协程产生的背景 2.协程的概念 3.yield模拟协程 4.协程中主要的俩个模块 5.协程的应 ...

  5. 转://linux下的CPU、内存、IO、网络的压力测试工具与方法介绍

    转载地址:http://wushank.blog.51cto.com/3489095/1585927 一.对CPU进行简单测试: 1.通过bc命令计算特别函数 例:计算圆周率 echo "s ...

  6. Python—kmeans算法学习笔记

    一.   什么是聚类 聚类简单的说就是要把一个文档集合根据文档的相似性把文档分成若干类,但是究竟分成多少类,这个要取决于文档集合里文档自身的性质.下面这个图就是一个简单的例子,我们可以把不同的文档聚合 ...

  7. 获取任意链接文章正文 API 功能简介

    此文章对开放数据接口 API 之「获取任意链接文章正文」进行了功能介绍.使用场景介绍以及调用方法的说明,供用户在使用数据接口时参考之用. 1. 产品功能 接口开放了根据提供的文章链接 Url 参数,智 ...

  8. MINIST深度学习识别：python全连接神经网络和pytorch LeNet CNN网络训练实现及比较（三）

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 在前两篇文章MINIST深度学习识别:python全连接神经网络和pytorch LeNet CNN网 ...

  9. [官网]Using PuTTY

    Previous | Contents | Next Chapter 3: Using PuTTY Section 3.1: During your session Section 3.1.1: Co ...

  10. spark-MLlib之线性回归

    >>提君博客原创  http://www.cnblogs.com/tijun/  << 假定线性拟合方程: 提君博客原创 变量 Xi 是 i 个变量或者说属性  参数 ai 是 ...