黑马程序员_JQuery选择器小结
来源:互联网 发布:js插件开发教程 编辑:程序博客网 时间:2024/05/16 01:57
JQuery选择器1
$("#控件id")来根据控件id获得控件的JQuery对象,id值不能重复,在文档中一个元素只能有一个id值,且#不能丢。如:$("#div1").html("<fontcolor=red>Hello</font>")
$("Tagname")来获取所有标签名为Tagname的JQuery对象,如$("div") 选择所有的div标签元素,返回div元素数组
JQuery选择器2:Css选择器
$(".myClass") 选择使用myClass类的css的所有元素,如:
$(function () {
$(".warning").click(function() { alert("这是警告信息"); });
})//点击样式是warning的元素时,弹出这是警告信息
JQuery选择器3:多条件选择器
$("p,div,span.menuitem"),同时选择p标签、div标签、和拥有menuitem样式的span标签,空格不可多不可少
$("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div.myclass")选择id为myElement的元素和class为myclass的div元素
JQuery选择器4:层次选择器
$("form input") 选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器:
$("tr:first")选择所有tr元素的第一个如:
$("#table1 tr:first").css("fontSize","35");//修改第一行的字体大小为35
$("tr:last")选择所有tr元素的最后一个如:
$("#table1 tr:last").css("color", "red");//修改最后一行的字体颜色为红色
$("input:not(:checked) + span")过滤掉:checked的选择器的所有的input元素
$("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd") 选择所有的tr元素的第1,3,5......个元素如:$("#table1tr:gt(0):lt(5):even").css("background","green"); //表头不要参与奇偶
$("#table1 tr:gt(0):lt(5):odd").css("background","yellow");
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:lt(4)") 选择td元素中序号小于4的所有的td元素如:$("#table1tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从新序列中的序号,不要写成lt(4)
$(":header") 选择h1、h2、h3之类的
$("div:animated") 选择正在执行动画效果的div元素
内容过滤选择器:
$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
可视化过滤选择器:
$("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素
属性过滤选择器:
$("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='news']") 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
表单对象选择器:
$(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器:
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$(function (){
$("input[value=显示选中项]").click(function() { //点击value=显示选中项的input元素
var citys =$("input:checked"); //定义citys接收选中的input元素
var arr = newArray(); //定义一个数组
citys.each(function(key, value) { arr[key] = $(value).val(); }) //遍历citys,将值传给数组
alert(arr.join(","))//用数组的join方法显示城市
});
})
------- Windows Phone 7手机开发、.Net培训、期待与您交流! -------- 黑马程序员_JQuery选择器小结
- 黑马程序员_Jquery
- 黑马程序员_学习日记19_jQuery
- 黑马程序员_JQuery学习知识简单总结
- 01_jQuery选择器
- 黑马程序员_Jquery对象和Dom对象及其相互转化
- 黑马程序员_JQuery中对节点的相关操作回顾
- 黑马自学_JQuery
- 909422229_Jquery常用选择器大全
- 黑马程序员 数据库小结
- 黑马程序员_IO小结
- [黑马程序员]switch小结
- 黑马程序员 异常小结
- 黑马程序员-异常小结
- 黑马程序员-----反射小结
- 黑马程序员-----线程小结
- 黑马程序员---代理小结
- 黑马程序员-----多线程小结
- ubuntu简单指令——安装JDK for linux
- ALV 中根据条件设置某个cell 是否可编辑
- 新手站长如何从对手百度优化痕迹中学习
- firefox disabled readonly 可用控件
- Android退出时退出所有Activity的通用类,ActivityManager
- 黑马程序员_JQuery选择器小结
- [社会百态] 黑快餐大厨良心发现:大家真别吃了
- 【算法导论】第八章之计数排序
- linux 进程通信之共享内存
- Android手机创建无线热点,共享网络供电脑或者平板,手机等设备上网
- Xcode 4.4.1 + iOS 5.1.1 免证书真机调试
- IIS32位,64位模式下切换
- 给C++初学者的50条忠告
- Android invalidate 与postInvalidate用法(更新视图)