本次直接上代码阅读
请选择自己习惯的和常用的,其他的则记住既可
实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例