博客列表 >jQuery 的选择器

jQuery 的选择器

无耻的鱼
无耻的鱼原创
2018年04月03日 22:46:44625浏览

本次直接上代码阅读

请选择自己习惯的和常用的,其他的则记住既可

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
</head>
<body>
	<h1>选择器的基本总结</h1>
	<p>1.基本选择器</p>
	<pre>
		$("#id")       ID选择器
		$("p")         元素选择器
		$(".class")    类选择器
	</pre>
	<p>2.内容过滤选择器</p>
	<pre>
		$("#id:contains('内容')")       包含指定文本
		$("p:empty")         			元素内为空
		$(".class:parent")    			包含指定元素的父元素
		$(".class:has()")    			包含指定元素
	</pre>
	<p>3.过滤选择器器</p>
	<pre>
		$("li:first')       第一个li
		$("li:last')        最后一个li
		$("li:even')        第奇数个li(实际是偶数)
		$("li:first')       第偶数个li(实际是奇数)
		$("li:eq(2)")       第二个li
		$("li:gt(2)')       大于2的li
		$("li:lt(2)')       小于2的li
	</pre>
	<p>4.表单选择器</p>
	<pre>
		$(":input")                     匹配所有input元素
		$(":text")         			    匹配所有带有 type="text" 的 input 元素

		其他type为password,submit等的都一样
	</pre>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



再看看实际上运用,这些选择器其实都是想通,可以换着用

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 效果- 隐藏和显示</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<pre>
    jQuery隐藏与显示
    隐藏 hide()
    显示 show()
    切换 toggle()

    参数:时间,函数

</pre>
<button>点击隐藏</button>
<button>点击显示</button>
<button>点击切换</button>
<div style="width: 100px;height: 200px; background: #ffeba9"></div>
<script>
    $('button:first').click(function(){
        $(":empty").hide(1000)
    })
    $('button:first').next().click(function(){
        $("div").show(1000)
    })
    $('button:last').click(function(){
        $("div[style]").toggle(1000)
    })
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议