文档章节

Jquery基本选择器 层次选择器 过滤选择器 表单选择器使用示例 带注释

深圳大道
 深圳大道
发布于 2016/12/29 15:35
字数 1340
阅读 1
收藏 0
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery示例</title>
    <style type="text/css">
    #menu { 
	    width:300px; 
    }
    .has_children{
	    background : #555;
	    color :#fff;
	    cursor:pointer;
    }
    .highlight{
	    color : #fff;
	    background : green;
    }
    div{
	    padding:0;
    }
    div a{
	    background : #888;
	    display : none;
	    float:left;
	    width:300px;
    }
    </style>
    <!-- 引入 jQuery -->
    <script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        //等待dom元素加载完毕.
        $(document).ready(function () {
            $(".has_children").click(function () {
                $(this).addClass("highlight")			//为当前元素增加highlight类
			    .children("a").show().end()			//将子节点的a元素显示出来并重新定位到上次操作的元素
		    .siblings().removeClass("highlight")		//获取元素的兄弟元素,并去掉他们的highlight类
			    .children("a").hide(); 			//将兄弟元素下的a元素隐藏
            });

            //------------------------------------------------------------------
            //在一个id为table的表格的tbody中,如果每行最后一列中的checkbox没有被禁用
            //则把这行的背景设为红色
            $("#table>tbody>tr:has(td:last:has(:checkbox:enabled))").css("background", "red");
            //------------------------------------------------------------------
            var obj = $("#cr");  //jQuery对象
            obj.click(function () {
                if (obj.is(":checked")) { //jQuery方式判断是否选中
                    alert("感谢你的支持!你可以继续操作!");
                }
            })

            //-----------------------基本选择器----------------------------------
            // 所有的span元素和id为two的div元素
            $('#btn5').click(function () {
                $('span,#two').css("background", "#bfa");
            });

            //-----------------------层次选择器-------------------------------
            // 选择 body内的所有div元素.
            $('#btn1').click(function () {
                $('body div').css("background", "#bbffaa");
            })
            //在body内的选择 元素名是div 的子元素.
            $('#btn2').click(function () {
                $('body > div').css("background", "#bbffaa");
            })
            //选择 所有class为one 的下一个div元素.
            $('#btn3').click(function () {
                $('.one + div').css("background", "#bbffaa");
            })
            //选择 id为two的元素后面的所有div兄弟元素.
            $('#btn4').click(function () {
                $('#two ~ div').css("background", "#bbffaa");
            })
            //------------------------过滤选择器--------------------------------
            //选择第一个div元素.
            $('#btn1').click(function () {
                $('div:first').css("background", "#bfa");
            })
            //选择最后一个div元素.
            $('#btn2').click(function () {
                $('div:last').css("background", "#bfa");
            })
            //选择class不为one的 所有div元素.
            $('#btn3').click(function () {
                $('div:not(.one)').css("background", "#bfa");
            })
            //选择 索引值为偶数 的div元素。
            $('#btn4').click(function () {
                $('div:even').css("background", "#bfa");
            })
            //选择 索引值为奇数 的div元素。
            $('#btn5').click(function () {
                $('div:odd').css("background", "#bfa");
            })
            //选择 索引等于 3 的元素
            $('#btn6').click(function () {
                $('div:eq(3)').css("background", "#bfa");
            })
            //选择 索引大于 3 的元素
            $('#btn7').click(function () {
                $('div:gt(3)').css("background", "#bfa");
            })
            //选择 索引小于 3 的元素
            $('#btn8').click(function () {
                $('div:lt(3)').css("background", "#bfa");
            })
            //选择 所有的标题元素.比如h1, h2, h3等等...
            $('#btn9').click(function () {
                $(':header').css("background", "#bfa");
            })
            //选择 当前正在执行动画的所有元素.
            $('#btn10').click(function () {
                $(':animated').css("background", "#bfa");
            });

            //------------------------内容过滤选择器------------------------------
            //选取含有文本"di"的div元素.
            $('#btn1').click(function () {
                $('div:contains(di)').css("background", "#bbffaa");
            })
            //选取不包含子元素(或者文本元素)的div空元素.
            $('#btn2').click(function () {
                $('div:empty').css("background", "#bbffaa");
            })
            //选取含有class为mini元素 的div元素.
            $('#btn3').click(function () {
                $('div:has(.mini)').css("background", "#bbffaa");
            })
            //选取含有子元素(或者文本元素)的div元素.
            $('#btn4').click(function () {
                $('div:parent').css("background", "#bbffaa");
            })

            //------------------------可见过滤选择器------------------------------
            //选取所有不可见的元素.包括<input type="hidden"/>.
            $('#btn_hidden').click(function () {
                alert("不可见的元素有:" + $('body :hidden').length + "个!\n" +
		   "其中不可见的div元素有:" + $('div:hidden').length + "个!\n" +
		   "其中文本隐藏域有:" + $('input:hidden').length + "个!");
                $('div:hidden').show(3000).css("background", "#bbffaa");
            })
            //选取所有可见的元素.
            $('#btn_visible').click(function () {
                $('div:visible').css("background", "#FF6500");
            })

            //------------------------属性过滤选择器------------------------------
            //选取含有 属性title 的div元素.
            $('#btn1').click(function () {
                $('div[title]').css("background", "#bbffaa");
            })
            //选取 属性title值等于 test 的div元素.
            $('#btn2').click(function () {
                $('div[title=test]').css("background", "#bbffaa");
            })
            //选取 属性title值不等于 test 的div元素.
            $('#btn3').click(function () {
                $('div[title!=test]').css("background", "#bbffaa");
            })
            //选取 属性title值 以 te 开始 的div元素.
            $('#btn4').click(function () {
                $('div[title^=te]').css("background", "#bbffaa");
            })
            //选取 属性title值 以 est 结束 的div元素.
            $('#btn5').click(function () {
                $("div[title$=est]").css("background", "#bbffaa");
            })
            //选取 属性title值 含有 es  的div元素.
            $('#btn6').click(function () {
                $("div[title*=es]").css("background", "#bbffaa");
            })
            //组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有 es 的元素.
            $('#btn7').click(function () {
                $("div[id][title*=es]").css("background", "#bbffaa");
            })

            //------------------------子元素过滤选择器------------------------------
            //选取每个父元素下的第2个子元素
            $('#btn1').click(function () {
                $('div.one :nth-child(2)').css("background", "#bbffaa");
            })
            //选取每个父元素下的第一个子元素
            $('#btn2').click(function () {
                $('div.one :first-child').css("background", "#bbffaa");
            })
            //选取每个父元素下的最后一个子元素
            $('#btn3').click(function () {
                $('div.one :last-child').css("background", "#bbffaa");
            })
            //如果父元素下的仅仅只有一个子元素,那么选中这个子元素
            $('#btn4').click(function () {
                $('div.one :only-child').css("background", "#bbffaa");
            })
	
        });
    </script>
</head>
<body>
<div id="menu">
	<div class="has_children">
		<span>第1章-认识jQuery</span>
		<a>1.1-JavaScript和JavaScript库</a>
		<a>1.2-加入jQuery</a>
		<a>1.3-编写简单jQuery代码</a>
		<a>1.4-jQuery对象和DOM对象</a>
		<a>1.5-解决jQuery和其它库的冲突</a>
		<a>1.6-jQuery开发工具和插件</a>
		<a>1.7-小结</a>
	</div>
	<div class="has_children">
		<span>第2章-jQuery选择器</span>
		<a>2.1-jQuery选择器是什么</a>
		<a>2.2-jQuery选择器的优势</a>
		<a>2.3-jQuery选择器</a>
		<a>2.4-应用jQuery改写示例</a>
		<a>2.5-选择器中的一些注意事项</a>
		<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
		<a>2.7-还有其它选择器么?</a>
		<a>2.8-小结</a>
	</div>
	<div class="has_children">
		<span>第3章-jQuery中的DOM操作</span>
		<a>3.1-DOM操作的分类</a>
		<a>3.2-jQuery中的DOM操作</a>
		<a>3.3-案例研究——某网站超链接和图片提示效果</a>
		<a>3.4-小结</a>
	</div>
</div>
<div><input type="checkbox" id="cr"/><label for="cr">我已经阅读了上面制度.</label></div>
</body>
</html>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/8793938

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
jQuery基础与JavaScript与CSS交互-第五章

目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Flex 什么是框架? 框架是程序员将一个又...

达叔小生
2018/08/03
0
0
提升效率 jQuery选择器大全

提升效率 jQuery选择器大全 在jQuery 中,jQuery 为编写代码者提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进...

daniel-john
2014/04/21
92
0
JQuery 选择器与过滤器(随手笔记)

一、表单选择器 虽然可以使用常规的选择器来对表单的元素进行定位,但还是不能满足多变的需求,所以这里我们一起来学习一下JQuery表单选择器。 例如: 二、表单过滤器 JQuery提供了四种表单过...

Red_Ant_hoyl
2018/07/25
0
0
jQuery学习笔记之JavaScript脚本库和元素选择器研究[图]

jQuery学习笔记之JavaScript脚本库和元素选择器研究[图] jQuery是一套JavaScript脚本库,相当于Java的类库,将一些工具方法或者对象方法封装在类库中,方便用户使用。 工厂函数指的是这些内建...

原创小博客
2018/08/06
9
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
43分钟前
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部