eminoda
- 浏览: 10359 次
- 性别:
- 来自: 上海
-
最新评论
笔记整理，以供工作查阅。
1.基本选择器
2.层次选择器
---------过滤器-----------------------------------------------------------------
3.基本过滤选择器
4.内容过滤选择器
5.属性过滤选择器
6.可见度过滤选择器
7.子元素过滤选择器
---------表单 过滤器-----------------------------------------------------------------
8.表单过滤选择器
9.表单对象属性过滤选择器
1.基本选择器
<script type="text/javascript">
/*
通过each() 在每个div元素内容前 加入 “each”
通过size() / length 打印页面中 class属性为 xxx 的元素数量
通过index() 打印 id属性为foo 的div标签 是页面内的第几个div标签*/
$(function(){
//获取标签，追加html
$('div').each(function(){
$(this).html("each_"+$(this).html());
});
var size1 = $('.xxx').size();//3
var size2 = $('div.xxx').size();//2
alert(size1+","+size2);
var which = $('div').index($('#foo'));
alert(which);//1,从0开始
});
</script>
<body> <div class="xxx">AAAA</div> <div id="foo">BBBB</div> <div class="xxx">CCCC</div> <div>DDDD</div> <div>EEEE</div> <p class="xxx">FFFF</p> </body>
2.层次选择器
<script type="text/javascript">
/*
将class属性值为xxx的元素下所有a元素字体变为红色
将class属性值为xxx的元素下直接a元素字体变为蓝色
将div元素后所有兄弟a元素，字体变为黄色，大小变为30px */
$(function(){
$('.xxx a').css('color','red');
$('.xxx>a').css('color','blue');
$("div~a").css({"color":"yellow","font-size":"30px"});
});
</script>
<body> <div class="xxx"> <a>div link</a> <p>info <a>p link</a> </p> </div> <a>link</a> <p class="xxx"> <a>p link</a> </p> <a>link</a> </body>
---------过滤器-----------------------------------------------------------------
3.基本过滤选择器
<script type="text/javascript">
/*
设置表格第一行，显示为红色
设置表格除第一行以外 显示为蓝色
设置表格奇数行背景色 黄色
设置表格偶数行背景色 绿色
设置页面中所有标题 显示为灰色
设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色 */
$(function(){
$('table tr:first').css("color","red");
$('table tr:not(:first)').css("color","blue");
$("table tr:even").css("background-color","yellow");
$("table tr:odd").css("background-color","green");
$(":header").css("color","gray");
$("div:not(:animated)").css("background-color","green");
$("div").click(function(){
$(this).slideUp("slow");
$("div:animated").css("background-color","yellow");
});
});
</script>
<body>
<h1>表格信息</h1>
<h2>这是一张商品表</h2>
<table border="1" width="600">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>售价</th>
<th>数量</th>
</tr>
<tr>
<td>001</td>
<td>冰箱</td>
<td>3000</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>洗衣机</td>
<td>2000</td>
<td>50</td>
</tr>
<tr>
<td>003</td>
<td>热水器</td>
<td>1500</td>
<td>20</td>
</tr>
<tr>
<td>004</td>
<td>手机</td>
<td>2188</td>
<td>200</td>
</tr>
</table>
<div>
slideDown(speed, [callback])
概述
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
参数
speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (可选)FunctionFunction在动画完成时执行的函数
</div>
<div>
fadeOut(speed, [callback])
概述
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数
speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (可选)Function在动画完成时执行的函数
</div>
</body>
4.内容过滤选择器
<script type="text/javascript">
/*
设置含有文本内容 ”xxx” 的 div 的字体颜色为红色
设置没有子元素的div元素 文本内容 ”这是一个空DIV“
设置包含p元素 的 div 背景色为黄色
设置所有含有子元素的span字体为蓝色 */
$(function(){
$("div:contains('xxx')").css("color","red");
$("div:empty").html("这是一个空DIV");
$("div:has(p)").css("background-color","yellow");
$("span:parent").css("color","blue");
});
</script>
<body> <div>今天是个晴天</div> <div>明天要去xxx学 java</div> <div><span>JavaScript</span> 是网页开发中脚本技术</div> <span>JavaScriptxxx</span> <div>Ajax 是异步的 JavaScript和 XML</div> <div> <p>jQuery</p> 是 JavaScript一个 轻量级框架</div> <div></div> </body>
5.属性过滤选择器
<script type="text/javascript">
/*
设置所有含有id属性的div，字体颜色红色
设置所有class属性值 含有xxx元素背景色为黄色
对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容
*/
$(function(){
$("div[id]").css("color","red");
$("[class*='xxx']").css("background-color","yellow");
$("div[id][class]").click(function(){
alert($(this).html());
});
alert($("input[name='username']").val());
});
</script>
<div>AAAA</div> <div id="mydiv" class="xxx1">BBBB</div> <div class="xxx2">CCCC</div> <div id="mydiv2">DDDD</div> <div class="divclass">EEEE</div> <div id="xxx" class="xxx3">FFFF</div> <p class="p-xxx">PPPPPP</p> <input type="text" name="username" value="张三" /> </body>
6.可见度过滤选择器
<script type="text/javascript">
/*
为表单中所有隐藏域 添加 class属性，值为xxx
设置table所有 可见 tr 背景色 黄色
设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值
三种设置不可见的方法：input、display、visibility
Display 不占用页面空间
Visibility 占用页面空间
*/
$(function(){
$("input:hidden").addClass("class_value");
$("table tr:visible").css("background-color","yellow");
// 设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值
//$("table tr:hidden").css("color","red");
//$("table tr:hidden").show();
$("table tr:hidden").each(function(){
$(this).css("color","red");
$(this).show();
alert($(this).text()); // html打印代码， text去掉标签输出文本内容
});
});
</script>
<body> <%-- <a href="#" style="visibility: hidden;">xxx</a> <a href="#">百度</a>--%> <form> 订单号 xxx-xxxx 金额 100元 <!-- 隐藏令牌号 --> <input type="hidden" name="token" value="12312-0xccx-zx-asd-21-asd-gdfgd" /> <input type="submit" value="确认支付" /> </form> <table> <tr style="display:none;"> <td>冰箱</td> </tr> <tr style="visibility:hidden;"> <td>洗衣机</td> </tr> <tr> <td>热水器</td> </tr> </table> </body>
7.子元素过滤选择器
<script type="text/javascript">
/*
选择id属性mytable 下3的倍数行，字体颜色为红色
表格 奇数行 背景色 黄色
表格 偶数行 背景色 灰色
只有一个td的 tr元素 字体为 蓝色
*/
$(function(){
$("#mytable tr:nth-child(3n)").css("color","red");
$("#mytable tr:nth-child(odd)").css("background-color","yellow");
//$("#mytable tr:even").css("background-color","yellow");
$("#mytable tr:nth-child(even)").css("background-color","gray");
// $("#mytable tr:odd").css("background-color","yellow");
$("#mytable tr td:only-child").css("color","blue");
});
</script>
<body> <table border="1" width="400" id="mytable"> <tr><td>1</td><td>冰箱</td></tr> <tr><td>2</td><td>洗衣机</td></tr> <tr><td>3</td><td>热水器</td></tr> <tr><td>4</td><td>电饭锅</td></tr> <tr><td>5</td><td>电磁炉</td></tr> <tr><td>6</td><td>豆浆机</td></tr> <tr><td>7</td><td>微波炉</td></tr> <tr><td>8</td><td>电视</td></tr> <tr><td>9</td><td>空调</td></tr> <tr><td>10</td><td>收音机</td></tr> <tr><td>11</td><td>排油烟机</td></tr> <tr><td>12</td><td>加湿器</td></tr> <tr><td>13 电暖气</td>加湿器</tr> </table> </body>
---------表单 过滤器-----------------------------------------------------------------
8.表单过滤选择器
<script type="text/javascript">
/*
对所有text框和password框，添加离焦事件，校验输入内容不能为空
对button 添加 点击事件，提交form表单
*/
$(function(){
$(":text,:password").blur(function(){
var value = $(this).val();
if(value.trim()==""){
alert($(this).attr("name")+"不能为空！");
}
});
// 对button 添加 点击事件，提交form表单
$(":button").click(function(){
$("form").submit();
});
});
</script>
<body> <form action="login"> 用户名 <input type="text" name="username" /> <br/> 密码 <input type="password" name="password" /> <br/> <input type="button" value="提交" /> </form> </body>
9.表单对象属性过滤选择器
<script type="text/javascript">
$(function(){
// 点击button 打印radio checkbox select 中选中项的值
$("#mybutton").click(function(){
alert("性别：" + $("input[name='gender']:checked").val());
// 多选框，val() 只能取到第一个值
//alert("爱好：" + $("input[name='hobby']:checked").val());
$('input[name="hobby"]:checked').each(function(){
alert($(this).val());
});
alert("城市：" + $("select[name='city'] option:selected").val());
// 将注册按钮设置不可用
$("input[value='注册']").attr("disabled","disabled");
});
});
</script>
<body> <form action="regist"> 性别 ：<input type="radio" name="gender" value="男" /> 男 <input type="radio" name="gender" value="女"/> 女 <br/> 爱好: <input type="checkbox" name="hobby" value="体育" />体育 <input type="checkbox" name="hobby" value="读书" />读书 <input type="checkbox" name="hobby" value="音乐" />音乐 <input type="checkbox" name="hobby" value="旅游" />旅游 <br/> 城市 ：<select name="city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> </select><br/> <input type="button" value="获取选中的值 " id="mybutton" /> <input type="submit" value="注册" /> </form> </body>
分享到：
发表评论
-
jquery JSONP解决跨域
2015-08-07 11:42 7581.模拟跨域 <script type=" ... -
jquery ajax
2015-08-06 19:38 01.load <script type="te ... -
jquery event
2015-08-06 16:01 5221.执行顺序 <body> <input ... -
jquery 其他api操作
2015-08-06 14:16 519笔记整理，供以后参阅 1.获得指定元素（上下级元素，上一个，下 ... -
jquery入门：启动顺序，核心用法
2015-08-06 10:08 4341.导入环境 <script type=" ...
相关推荐
本文将深入探讨jQuery中的四种主要选择器：ID选择器、标签选择器、类选择器和属性选择器。这些选择器是jQuery高效地定位页面元素的基础，让我们逐一了解它们。 首先，ID选择器是通过CSS的`#`符号来指定一个元素的...
jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件....
基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器，它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...
**jQuery颜色选择器ColorPicker详解** 在Web开发中，用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中，颜色选择器是一个常见的组件，它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...
**jQuery 实现颜色选择器** 在网页开发中，颜色选择器是一个常见的交互元素，它允许用户方便地选取颜色。在本教程中，我们将探讨如何利用 jQuery 和相关插件来实现一个功能完备的颜色选择器。 首先，`jQuery` 是一...
本项目“jquery周历选择器”利用jQuery的灵活性和易用性，构建了一个适用于混合应用程序（Hybrid App）的周历选择器组件。 1. **周历选择器设计**： - 周历选择器通常用于日程管理或时间规划应用，显示一周的日期...
在JavaScript的世界里，jQuery是一个非常流行和...记住，熟练掌握jQuery选择器将极大地提升你的前端开发效率，让你编写出更加简洁高效的代码。在学习过程中，不断实践和应用这些知识点，你将会成为一个jQuery的大师。
在网页开发中，用户界面的交互性和易用性是至关重要的，而日期和时间选择器则是提升用户体验的一种常见方法。jQuery UI 提供了一个功能强大的时间选择器组件，使得开发者可以轻松地在网页上集成一个优雅的时间选择...
在网页开发中，jQuery时间选择器是一个非常实用的工具，它允许用户通过点击来选取特定的小时和分钟，为表单输入提供了便利。这个“jQuery时间选择器点击选择小时分钟代码”很可能是一个实现这一功能的代码示例或者...
在本文中，我们将深入探讨jQuery日期时间选择器插件，这是一种高效、美观的JavaScript解决方案，用于在网页上添加交互式的日期和时间选择功能。这款插件利用jQuery库的强大功能，为用户提供了简单易用的界面，使他们...
### jQuery选择器全解 #### 一、引言 jQuery是一种快速、简洁的JavaScript库，其核心特性之一便是强大的选择器引擎。通过jQuery选择器，开发者能够轻松地定位和操作DOM（Document Object Model）元素，极大地提高...
首先，我们要理解jQuery选择器的核心概念。jQuery选择器是用于选取HTML元素的工具，它基于CSS选择器，同时添加了一些扩展，使得我们可以更高效地定位和操作DOM元素。例如，`$("#myID")`用于选取ID为"myID"的元素，`$...
这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用，由一位国外专家创建，并进行了轻微的修改。** 在jQuery中，选择器分为多种类型，包括基础选择器、类别选择器、ID选择器、属性...
jquery九大选择器，包含了知识点和案例，深入浅出，可以迅速入门jquery选择器。
"wickedpicker"可能是这个时间选择器插件的名字，它提供了一种方式来为网页添加自定义的时间输入字段。 在JavaScript开发中，表单日历控件和时间选择器是常见的需求。它们允许用户以图形化的方式选择日期和时间，而...
使用这个插件，你需要在HTML文件中引用jQuery库、ColorPicker插件的JS和CSS文件，然后在适当的地方通过jQuery选择器调用插件，并根据需要配置选项。 例如： ```html <!DOCTYPE html> <title>jQuery颜色选择器...
jQuery城市选择器就是解决这一需求的有效工具，它利用JavaScript和jQuery库，提供了一种便捷、高效的交互方式。本文将深入探讨jQuery城市选择器的实现原理、使用方法及其优势。 一、jQuery库基础 jQuery是一个轻量...
《jQuery城市选择器详解》 在网页开发中，常常需要为用户提供便捷的城市选择功能，以满足用户在填写地址或选择服务区域时的需求。jQuery城市选择器便是为此而设计的工具，它结合了jQuery库的强大功能，实现了高效、...
jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇
3. **初始化插件**：使用jQuery选择器选择该元素，然后调用日期选择器插件的初始化方法，例如`$(selector).dateInput(options);`，其中`options`是可选的配置对象。 4. **配置选项**：根据需求设置日期选择器的配置...