jqurey的选择器使用

1、基本过滤选择器

基本选择器 $(“基本选择器”)
层次选择器 $(“E>F”)
属性选择器 $(“input[type=text]”)

过滤选择器

             基本过滤选择器内容过滤选择器可见性过滤选择器表单对象过滤选择器

<h1>奇酷教育</h1><h2>基本过滤选择器</h2><ul><li>111111</li><li>222222</li><li class="active">333333</li><li class="active">444444</li><li>555555</li><li>666666</li></ul>

// 基本过滤选择器// 1、选择第一个和最后一个$("li:first").css({"background-color":"red"})$("li:last").css({"background-color":"red"})//2、选择奇偶行 按照下标来看$("li:even").css({"background-color":"green"})$("li:odd").css({"background-color":"blue"})//3、选择指定行 按照下标来看$("li:eq(2)").css({"background-color":"yellow"})//4、选择范围行，大于小于$("li:gt(2)").css({"background-color":"pink"})$("li:lt(2)").css({"background-color":"orange"})//5、排除行$("li:not(.active)").css({"color":"white"})//6、获取所有标题元素，h1-h6console.log($(":header"));

2、jqurey其它过滤选择器

内容过滤选择器
可见过滤选择器

表单对象过滤选择器

      :enabled  选取所有可用元素 :disabled 选取所有不可用元素 :checked  选取所有被选中的元素（单元框、复选框:selected 选取所有被选中的选项元素（下拉列表

<style>
.wrapper>p{display: none;/* visibility: hidden; 不包含*/
}
<style>
<div class="wrapper"><div>郑州</div><div></div><div><p>郑州</p></div><div><span></span></div><p>111</p><p>222</p><form action=""><input type="text" value="张三"><input type="text" disabled value="李四"><input type="checkbox" value="1"><input type="checkbox" value="2"><input type="checkbox" value="2"><select name="" id=""><option value="1">郑州</option><option value="2">开封</option></select></form></div>

// $(“div:contains(‘郑州’)”)选择内容里包含我的所有divconsole.log($(".wrapper div:contains('郑州')"));// $(“div:empty”)选择不包含子元素（含文本）的所有div元素console.log($(".wrapper div:empty"));// $(“div:has(p)”)选择含有p元素的所有div元素console.log($(".wrapper div:has(p)"));// $(“div:parent”)选择拥有子元素（包含文本）的所有div元素console.log($(".wrapper div:parent"));// $(“:hidden”)选择所有不可见元素，console.log($(".wrapper>p:hidden"));// $(“div:visible”)选取所有可见的div元素 console.log($(".wrapper>div:visible"));// :enabled  选取所有可用元素console.log($("input:enabled"));// :disabled 选取所有不可用元素 console.log($("input:disabled"));// :checked  选取所有被选中的元素（单元框、复选框）$("input[type=checkbox]").click(function(){var ch=$("input:checked");//获取所有被选中的元素console.log(ch.length);})// :selected 选取所有被选中的选项元素（下拉列表 ）$("select").change(function(){// html()  text()  val()console.log($(":selected").val());console.log($(":selected").html());})

jqurey的选择器使用相关推荐

jQurey 的选择器
入口函数写法: $(document).ready(function(){ //入口函数 //程序实现部分 }); 第二种写法: $(function(){ //程序实现部分 }); jquery:点 ...
Jquery基础知识
jquery是一个功能强大的第三方库,目前被广泛使用, 微软更是将其作为官方库; 内部封装适配多浏览器,运行速率高于原生 1.写得少,做得多 2.运行速度快 jqurey通过选择器获取标签 $('#m ...
泛微OA_E9之check框选中计分
目录 1.描述及效果 1.1 描述 1.2 效果 1.2.1 例1效果图 1.2.2 例2效果图 2.思路 3.步骤 3.1 本次使用E9流程表单前端接口API介绍 3.1.1 表单字段值变化触发事件 ...
jQurey入门以及选择器
<html> <head> <meta charset="utf-8" /> <title> ...
Jqurey学习笔记---3、jQuery 选择器
jQuery 选择器 jQuery 选择器在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery ...
八、JQurey总结
八.JQurey总结 jquery是一个轻量级的js框架,具有跨浏览器的特性,兼容性好, 并且封装了很多工具,方便使用. 常用的有: 选择器 ,dom操作 ,ajax(ajax不能跨域) ,特效,工具 ...
jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...
视频教程-jQuery交互式前端开发(第一季)：初体验/选择器/事件绑定-jQuery
jQuery交互式前端开发(第一季):初体验/选择器/事件绑定知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老兵 ¥12. ...
javaweb学习笔记2(jquery的使用，以及常用的方法，选择器，过滤器)
javaweb学习笔记2 javascript正则表达式 regfxp对象方式1: var putt=new RegExp("e");//表示要求字符串中必须包含字符串evar ...

jqurey的选择器使用

1、基本过滤选择器

2、jqurey其它过滤选择器

jqurey的选择器使用相关推荐

最新文章

热门文章