2、jQuery选择器的基本使用

Sian · 发表于 2016-2-16 17:54:52

本帖最后由 Sian 于 2016-2-16 23:08 编辑

1、基本选择器

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
        <title>jQuery基本操作</title>
        <meta charset="utf-8"/>
        <!--这一行非常重要，没有这一行则没有jQuery库-->
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
        // jQuery预处理
        $(document).ready(function(){
                // 按钮事件
                $('button').click(function(){
                        // 将id为one的元素背景色变为粉色,只有第一个符合条件的元素生效
                        $('#one').css('background', 'pink');
                        // 将类为two的元素背景变为黄色，所有类为two的都会生效
                        $('.two').css('background', 'yellow');
                        // 所有li标签背景设置为蓝色
                        $('li').css('background', 'blue');
                        // 所有id为one，类为two的标签变为绿色（所有id为one，不是符合的第一个！）
                        $('#one, .two').css('background', 'green');
                });
        });
        </script>
</head>

<body>
        <button>按钮</button>
        <ul>
                <li id="one">星期一</li>
                <li id="one">星期二</li>
                <li class="two">星期三</li>
                <li class="two">星期四</li>
        </ul>
</body>

</html>

2、层级选择器

[PHP] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
        <title>jQuery基本操作</title>
        <meta charset="utf-8"/>
        <!--这一行非常重要，没有这一行则没有jQuery库-->
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
        // jQuery预处理
        $(document).ready(function(){
                // 按钮事件
                $('button').click(function(){
                        // 类为week元素下所有的label标签字体改为红色，递归查找
                        $('.week label').css('color', 'red');
                        // 类为week元素下子元素中的label标签字体改为蓝色，只查找一层
                        $('.week > label').css('color', 'blue');
                        // 类为one元素紧接着的第一个li，如果下一个不是li则无效
                        $('.one + li').css('color', 'pink');
                        // 类为one元素以后的同级别兄弟li标签，元素之前或父层级子层级无效
                        $('.one ~ li').css('color', 'green');
                        
                });
        });
        </script>
</head>

<body>
        <ul class="week">
                <label>工作日</label>
                <li>星期一</li>
                <li class="one">星期二</li>
                <li>星期三</li>
                <ul>
                        <label>星期四</label>
                        <li>上午</li>
                        <li>下午</li>
                </ul>
                <label>周末</label>
                <li>星期六</li>
                <li>星期天</li>
        </ul>
        <button>按钮</button>
</body>

</html>

3、属性选择器

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$('button').click(function(){
				// 包含id属性的标签
				$('[id]').css('color','red');
				// 包含for属性并且属性值为week的标签
				$('[for="week"]').css('color', 'green');
				// 某属性不等于某个值的标签(注意：包含html及body标签在内！)
				$('[class!="one"]').css('color', 'blue');
				// 某属性以某个值开头的标签
				$('[class^="t"]').css('color', 'pink');
				// 某属性以某个值结尾的标签
				$('[class$="o"]').css('color', 'green');
				// 某属性包含某个值的标签
				$('[class*="o"]').css('color', 'red');
				// 多个条件
				$('[class][class$="o"]').css('color', 'green');
			});
		});
	</script>
</head>
<body>
	<ul>
		<li class="one">星期一</li>
		<li class="two">星期二</li>
		<li id="three">星期三</li>
		<li for="week">星期四</li>
	</ul>
	<p class="one">This is a p!</p>
	<button id="btn1">按钮</button>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 2、jQuery选择器的基本使用