收藏
批改状态：合格
老师批语：
本次直接上代码阅读
请选择自己习惯的和常用的，其他的则记住既可
<!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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
