`

jQuery学习笔记 一

jquery 
阅读更多

一 jquery基础选择器
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/page/common/jquery-1.7.2.min.js"></script>
1 id选择器
$("#my_id")
例如：
<body>
<div id="divtest"></div>
</body>
<script type="text/javascript">
$("#divtest").html("设置div的内容");
</script>
2 元素选择器
$("element")
例如：
<body>
<div id="divtest"></div>
</body>
<script type="text/javascript">
$("div").css("font-weight","bold");
</script>
3 类选择器
$(".class")
例如：
<body>
<div id="divtest" class = "red">我穿红衣了</div>
$(".red").html(ddd);
</body>
4 全选选择器
$("*")
例如：
<body>
<div>
<span></span>
<p></p>
<label></label>
</div>
</body>
<script type="text/javascript">
$("div").html("我们是一家人");
</script>
5 sele1,sele2,seleN选择器（多重选择）
$("div,p,#mytestid")
例如：
 <body>
        <div class="red">选我吧！我是red</div>
        <div class="green">选我吧！我是green</div>
        <div class="blue">选我吧！我是blue</div>
       
        <script type="text/javascript">
            $(".red,.green,.blue").html("hi,我们的样子很美哦!");
        </script>
    </body>
6 层次选择器
在应用开发中常常多个元素套在一起，形成复杂的层次关系，通过层次选择器，
可以快速定位某一层次的一个或者多个元素
<body>
<div>
<p>
  <span></span>
</p>
<span></span>
</div>
</body>
<script src="text/javascript">
$("div span").html("我们是一个家族下的子孙");
</script>
7 孩子元素选择器
选择的目标是子集元素 相当于一个家庭中的子辈们
$("parent > child")
<body>
<div>
<p>
 <span></span>
</p>
<span></span>
<span><span>
</div>
</body>
<script type="text/javascript">
$("div>span").html("我们是一个家庭下的字辈们");
</script>
8 prev+next选择器
查找与prev元素紧邻的下一个"next"元素选择器
$("prev+next")
<body>
<div>
码农家族
<span>我是span1</span>
<p>我是p先生</p>
<span>我是span2</span>
<span>我是span3</span>
</div>
<span></span>
</body>
<script type="text/javascript">
$("p+span").html("我是p先生楼下紧邻的码友");
</script>
9 prev~siblings
查找和prev元素同属于一级的并且在它之后的全部相邻元素
<body>
        <div>
            码农家族
            <label></label>
            <p></p>
            <label></label>
            <label></label>
        </div>
        <label></label>
       
        <script type="text/javascript">
            $("p ~label").css("border", "solid 1px red");
            $("p ~label").html("我们都是p先生的粉丝");
        </script>
    </body>

二 jquery过滤选择器
书写时以：开头，通常用于查找集合元素中的某一个位置的单个元素
1 选取第一个元素：first  选取最后一个元素:last
<body>
        <div>改变最后一行"苹果"背景颜色：</div>
        <ol>
            <li>葡萄</li>
            <li>香蕉</li>
            <li>橘子</li>
            <li>西瓜</li>
            <li>苹果</li>
        </ol>
       
        <script type="text/javascript">
            $("li:last").css("color", "red");
        </script>
    </body>
   
2 如果想从一组标签元素数组中，灵活选择任意一个标签元素
:eq(index)
其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素
例如：
<body>
        <div>改变中间行"葡萄"背景颜色：</div>
        <ol>
        <li>橘子</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>苹果</li>
        <li>西瓜</li>
        </ol>
        <script type="text/javascript">
            $("li:eq(2)").css("background-color", "#60F");
        </script>
3 有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便， 它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，
获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。
例如：
 <body>
        <div>改变包含"jQuery"字符内容的背景色：</div>
        <ol>
            <li>强大的"jQuery"</li>
            <li>"javascript"也很实用</li>
            <li>"jQuery"前端必学</li>
            <li>"java"是一种开发语言</li>
            <li>前端利器——"jQuery"</li>
        </ol>
       
        <script type="text/javascript">
            $("li:contains('jQuery')").css("background", "green");
        </script>
    </body>
4 使用包含的元素名称来过滤，:has(selector)过滤选择器的功能是获取玄子琪中包含指定元素名称
的全部元素selector参数就是包含的元素名称
例如：<body>
        <div>改变包含"label"元素的背景色：</div>
        <ol>
            <li><p>我是P先生</p></li>
            <li><label>L妹纸就是我</label></li>
            <li><p>我也是P先生</p></li>
            <li><label>我也是L妹纸哦</label></li>
            <li><p>P先生就是我哦</p></li>
        </ol>
       
         <script type="text/javascript">
            $("li:has('label')").css("background-color", "blue");
        </script>
    </body>
5 获取不可见的元素
:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素
例如：
<body>
        <h3>显示隐藏元素的内容</h3>
        <input id="hidstr" type="hidden" value="我已隐藏起来"/>
        <div></div>
       
        <script type="text/javascript">
        var $strHTML = $("input:hidden").val();
        $("div").html($strHTML);
    </script>
    </body>
6 获得可见元素
:visible过滤选择器获取的是全部可见的元素，
也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。
例如：
<body>
        <h3>修改可见“水果”的背景色</h3>
        <ul>
            <li style="display:none">橘子</li>
            <li style="display:block">香蕉</li>
            <li style="display:">葡萄</li>
            <li>苹果</li>
            <li style="display:none">西瓜</li>
        </ul>
       
        <script type="text/javascript">
            $("li:visible").css("background-color","blue");
        </script>
    </body>
7 [attribute=value]属性选择器
属性作为DOM元素的一个重要特征，也可以用于选择器中，从本节开始将介绍通过元素属性获取元素的选择器，
[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，
其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值
例如：
   <body>
        <h3>改变"title"属性值为"蔬菜"的背景色</h3>
        <ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="水果">苹果</li>
            <li title="水果">西瓜</li>
        </ul>
       
        <script type="text/javascript">
            $("li[title='蔬菜']").css("background-color", "green");
        </script>
8 [attribute!=value]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，
其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。
9 [attribute*=value]属性选择器
它可以获取属性值中包含指定内容的全部元素，
其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。
例如：
 <body>
        <h3>改变"title"属性值包含"果"的背景色</h3>
        <ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="人参果">小西红柿</li>
            <li title="水果">西瓜</li>
        </ul>
       
        <script type="text/javascript">
            $("li[title*='果']").css("background-color", "green");
        </script>
    </body>
10 :first-child子元素过滤选择器
:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，
而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，
它是一个集合，常用多个集合数据的选择处理
例如：
<body>
        <h3>改变每个"蔬菜水果"中第一行的背景色</h3>
        <ol>
            <li>芹菜</li>
            <li>茄子</li>
            <li>萝卜</li>
            <li>大白菜</li>
            <li>西红柿</li>
        </ol>
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>苹果</li>
            <li>西瓜</li>
        </ol>
       
        <script type="text/javascript">
            $("li:first-child").css("background-color", "green");
        </script>
    </body>
11 :last-child子元素过滤选择器
:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，
它也是一个集合，常用多个集合数据的选择处理
例如：
<body>
        <h3>改变每个"蔬菜水果"中最后一行的背景色</h3>
        <ol>
            <li>芹菜</li>
            <li>茄子</li>
            <li>萝卜</li>
            <li>大白菜</li>
            <li>西红柿</li>
        </ol>
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>苹果</li>
            <li>西瓜</li>
        </ol>
       
        <script type="text/javascript">
           $("li:last-child").css("background-color", "blue");
        </script>
    </body>
三 表单选择器
1 :input
:input表单选择器可以实现，它的功能是返回全部的表单元素，
不仅包括所有<input>标记的表单元素，
而且还包括<textarea>、<select> 和 <button>标记的表单元素，因此，它选择的表单元素是最广的。
例如：
<body>
        <h3>修改全部表单元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <select>
            <option>Option</option>
        </select><br />
        <textarea rows="3" cols="8"></textarea><br />
        <button>
            Button</button><br />
        </form>
       
        <script type="text/javascript">
            $("#frmTest :input").addClass("bg_blue");
        </script>
    </body>
2 :text表单文本选择器
:text表单文本选择器可以获取表单中全部单行的文本输入框元素，
单行的文本输入框就像一个不换行的字条工具，使用非常广泛。
例如：
<body>
        <h3>修改多个单行输入框元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="text" id="Text1" value="我是小纸条"/><br />
        <textarea rows="3" cols="8"></textarea><br />
        <input type="text" id="Text2" value="我也是小纸条"/><br />
        <button>
            Button</button><br />
        </form>
       
        <script type="text/javascript">
            $("form :text").addClass("bg_blue");
        </script>
    </body>
3 :password表单密码选择器
:password选择器，它的功能是获取表单中全部的密码输入文本框元素。
例如：
 <body>
        <h3>修改多个密码输入框元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="text" id="Text1" value="单行文本输入框"/><br />
        <input type="password" id="Text2" value="密码文本输入框"/><br />
        <textarea rows="3" cols="8">区域文本输入框</textarea><br />
        <input type="password" id="Text3" value="密码文本输入框"/><br />
        <button>
            Button</button><br />
        </form>
       
        <script type="text/javascript">
            $("#frmTest :password").addClass("bg_red");
        </script>
    </body>
4 :radio单选按钮选择器
:radio选择器可轻松获取表单中的全部单选按钮元素。
例如：
<body>
        <h3>将表单中单选按钮设为不可用</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input id="Radio1" type="radio" />
        <label for="Radio1">
            男</label>
        <input id="Radio2" type="radio" />
        <label for="Radio2">
            女</label><br />
        <button>
            Button</button><br />
        </form>
       
        <script type="text/javascript">
            $("#frmTest :radio").attr("disabled","true");
        </script>
    </body>
5 :checkbox复选框选择器
使用:checkbox选择器可以快速定位并获取表单中的复选框元素
例如：
 <body>
        <h3>将表单的全部复选框设为不可用</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input id="Checkbox1" type="checkbox" />
        <label for="Checkbox1">
            西红柿</label><br />
        <input id="Checkbox2" type="checkbox" />
        <label for="Checkbox2">
            茄子</label><br />
        <input id="Checkbox3" type="checkbox" />
        <label for="Checkbox3">
            黄瓜</label><br />
        <button>
            Button</button><br />
        </form>
       
        <script type="text/javascript">
            $("#frmTest :checkbox").attr("disabled","true");
        </script>
    </body>
6 :submit提交按钮选择器
一个表单中只允许有一个“type”属性值为“submit”的提交按钮，使用:submit选择器可获取表单中的这个提交按钮元素
例如：
 <body>
        <h3>修改表单中提交按钮的背景色</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input type="submit" value="点我就提交了" /><br />
        <button>
            Button</button><br />
        </form>
       
        <script type="text/javascript">
            $("#frmTest input:submit").addClass("bg_red");
        </script>
    </body>
7 :image图像域选择器
:image选择器可以快速获取该类全部元素。例如，在表单中添加两种类型的图像元素，
使用:image选择器获取其中的一种图像元素，并改变该元素的边框样式
8 :button表单按钮选择器
:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素
9 :checked选中状态选择器
有一些元素存在选中状态，如复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素。
10 :selected选中状态选择器
:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。

分享到：
| 跟我学Spring3
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery学习笔记1

    ### Jquery 学习笔记1 本篇笔记主要围绕 jQuery 的基本使用方法展开，包括了 DOM 操作、选择器的使用、属性与过滤器等内容。jQuery 是一款优秀的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画等...

    jQuery学习笔记（一）

    **jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录，本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...

    锋利的JQuery学习笔记.pdf

    锋利的JQuery学习笔记

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...

    jQuery 语法学习笔记

    jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...

    jquery 学习笔记

    **jQuery学习笔记** jQuery，作为一个轻量级的JavaScript库，极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧，帮助初学者快速上手。 ## 一...

    韩顺平jquery学习笔记及练习

    《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源，由知名讲师韩顺平的课程实录整理而成，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    JQuery学习笔记

    以下是对JQuery学习笔记的详细解析： 首先，JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异，导致开发跨浏览器的网页应用变得复杂。为了统一这些...

    jquery学习笔记.rar

    总的来说，这份"jQuery学习笔记"是一份全面的教程资料，涵盖了从基础到进阶的所有重要知识点。通过系统学习，你可以理解jQuery的核心原理，掌握其高效的操作DOM、处理事件、实现动画和进行Ajax通信的方法，从而提升...

    javascript and jquery学习笔记与资料

    这里，我们有针对这两个主题的学习笔记和参考资料，包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先，`JavaScript培训.zip`可能包含的是对...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax？** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用来创建快速动态网页的技术，通过在后台与服务器进行少量数据...

    JQuery学习笔记合集

    **jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分，旨在帮助开发者从初级到高级...

    jQuery学习笔记 jQuery API

    **jQuery学习笔记 jQuery API** jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本笔记旨在帮助开发者快速上手并深入理解jQuery的核心概念和API。 ### 1. jQuery...

    Jquery学习笔记分享

    **jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...

    JQuery学习笔记（技术文档）

    ### JQuery学习笔记（技术文档） #### 一、JQuery能做什么？ JQuery 是一款轻量级的 JavaScript 库，它的设计宗旨是“write less, do more”，即“写得更少，做得更多”。通过JQuery，可以实现以下功能： 1. **...

    JQuery学习笔记（日常积累）

    在深入探讨jQuery的知识点之前，首先需要理解jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。jQuery的核心特性是其选择器，它允许开发者通过CSS样式的语法轻松选取HTML...

    圣思源的jquery学习笔记

    圣思源张龙老师的jQuery学习笔记，深入浅出地剖析了这个库的核心概念和实用技巧，对于想要深入理解jQuery或提升前端技能的开发者来说，无疑是一份宝贵的学习资源。 首先，jQuery的核心理念是"Write Less, Do More...

    jQuery学习笔记

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...

Magicbox
Global site tag (gtag.js) - Google Analytics