注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐
GACHA精选

jQuery简介(1)选择器  

2014-05-10 12:40:14|  分类: jq |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

基本结构

<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js"></script> 


<script>
var time=self.setInterval( function(){
//$("#today").html(date("Y-m-d H:i:s"));
$("#today").html(new Date());
},1000 );

</script>
</head>

<body>

<div id="today">xx-xx-xx</div>

</body>
</html>


1.入门展示
1)基本语法
$(selector).method( function(){} )
例子:
$('button').click( function(){
alert("######");
} )
说明:$是jquery的简写。

2)连缀方法
$(selector).method(function(){}).method2(function(){})

例子:
$("div").click(function(){
//do sth;
}).mouseover(funciton(){
//do sth;
});

3)隐式迭代  $("div").css('color', 'red');
4)$(this);
5)ready()很常用
$(document).ready(function(){
//do sth;
});

小例子

<html>
<head>
<!--
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js"></script>
-->
<script type="text/javascript" src="http://127.0.0.1/js/jquery.min.js"></script>
<script>


$("document").ready(function(){
$('.button').click(function(){
alert("###");
});
});
</script>
</head>

<body>
<input type='button' class='button' value="test" />
<input type='button' class='button' value="test" />
<input type='button' class='button' value="test" />

</body>
</html>



2.jq选择器
1)简介:
--jq是一个以css选择器为核心的javascript库
--支持css规范1-3的几乎所有选择器;
--降低了学习门槛;
--编码时,先选择,再操作;

2)jquery选择器分类(4大类)
--基本选择器
(1)$(#id)   (2)$ ('element') 元素  (3)$(".class") (4)$(*) 所有元素  (5)群组选择器$('#aa, .cc')

2.1--层级选择器
(1)ancestor descendant后代选择器 空格
 $(".sports .football")他将返回class为sports的元素后代中所有class为football的元素;
(2)parent>child 子选择器,
$('.sports > li') 他将返回class为sports的子元素中的所有li元素;
(3)prev + next紧邻下一个元素,例如
$('.sports + li') 返回class为sports的紧接着的下一个li元素;
(4)prev ~siblings选择以后的所有兄弟元素,例如:
$('.sports ~ li')他将返回class为sports的兄弟元素中的li元素;

2.2--属性选择器
(1) [attribute] 
(2) [attribute=value] 
(3) [attribute!=value]   不等于某值,不靠谱。。。。
(4) [attribute^=value]  属性值以某开头的
(5) [attribute$=value] 属性值以某结尾的
(6) [attribute*=value]  属性值包含某的
(7) [attrSel1][attrSel2][attrSelN] 同时包含多个条件的元素
$('[class][type^="c"]') 返回有class属性,并且type属性值为c的元素。

2.3--过滤选择器
(1)基本过滤选择器
:first  选取第一个元素
:last  返回最后一个元素
:not(selector)  去除与给定选择器匹配的元素;如$('tr: not(".new")'); 首先选择所有的tr元素,然后取出其中包含class的元素;

:even 选取索引值为偶数的所有元素;索引值从0开始
:odd 选取索引值为奇数的所有元素;
:eq(index)  索引值为某值的所有元素;
:gt(index) 索引值大于某值的所有元素;
:lt(index) 索引值小于某值的所有元素;

:header 选择<h1>~<h6>的所有标签
:animated 选取执行的动画元素
:focus1.6+ 当前获得焦点的元素

(2)内容过滤选择器
:contains(text) 包含某个特定文本的元素;$('p:contains("英语")')返回文本中包含“英语”的段落。
:empty 选择不包含任何子元素或文本的空元素。
:has(selector)  返回包含某选择器的元素的元素,例如:$('tr: has("th")') 返回包含th元素的tr元素
:parent 选择包含任何子元素或文本的空元素。

$(':empty').css({'width':'50px','height':'100px','background':'red'}); 为空元素设置样式

(3)可见性过滤选择器
:hidden 返回隐藏的元素:$('tr: hidden') 返回隐藏的tr元素;
:visible 返回可见的元素。

(4)子元素过滤选择器
:nth-child 选取特定位置的子元素,唯一一个从1开始计数的选择器;$('tr:nth-child(3n+1)').css('color','red')
:first-child 选取每个父元素的第一个子元素;
:last-child 选取每个父元素的最后一个子元素;
:only-child 如果元素是其父元素的唯一元素,则元素返回。

2.4--表单选择器

:input 选取input、textarea、select和button元素; 
:text 当行文本<input style='text' />
:password 密码框<input style='password' />
:radio  单选按钮
:checkbox 复选框
:submit 提交按钮
:image 图像域
:reset 重置按钮
:button 按钮
:file 文件域
:hidden 隐藏域

表达属性选择器
:enabled 选取所有的可用元素
:disabled 所有的不可用元素<input type='text' disabled='disabled' />
:checked  选取所有处于选中状态的单选框和复选框;
:selected 选取所有处于选中状态的option元素。




--------------------
  评论这张
 
阅读(65)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017