文档章节

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

深圳大道
 深圳大道
发布于 2016/12/29 15:39
字数 1340
阅读 9
收藏 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
91
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

没有更多内容

加载失败,请刷新页面

加载更多

centos7 安装 mysql5.7 版本(全)

centos 安装 版本说明 :centos7,mysql5.7 ,不是 centos7 可能有些命令不兼容 安装 mysql-server # 下载并安装 mysql yum wget -i -c http://dev.mysql.com/get/mysql57-community-relea......

sanri1993
25分钟前
3
0
Spring3.x升级到Spring4.x-5.x时关于MappingJacksonHttpMessageConverter的报错问题

在Spring4.x或者以上的版本强使用(不然会报错): org.springframework.http.converter.json.MappingJackson2HttpMessageConverter 如果是Spring4.0获者以下的版本可以使用MappingJacksonH...

code-ortaerc
28分钟前
3
0
OSG 渲染状态污染到其它节点怎么解决?

在根节点补上初始状态

洛克人杰洛
30分钟前
3
0
grid 布局 设置行列间距

本文转载于:专业的前端网站➪grid 布局 设置行列间距 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="widt......

前端老手
42分钟前
3
0
spring-data-elasticsearch 和 Jackson 配合使用的bug

下面先简单描述项目。 项目依赖: dependencies { implementation group: 'org.springframework.boot', name: 'spring-boot-starter-data-elasticsearch', version: '2.1.0.RELEASE'......

Landas
43分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部