【图片】回复：【学习记录①】jquery【幼熙的游戏吧】

05月16日漏签0天

幼熙的游戏吧关注：9贴子：649

首页上一页 1 2 3 4 下一页尾页
73回复贴，共4页
，跳到页

<返回幼熙的游戏吧

回复：【学习记录①】jquery

只看楼主收藏回复

$或jquery jquery别名
jquery中选择器的用法：
$(selector).method();

20楼2013-12-03 17:41

使用css选择器选择页面元素
常用的css选择器：$('*'),$('p'),$('.class'),$('#id'),$('.parent ul li')
1.使用通配符选择元素
$('*').css('border','1px solid #333');
2.使用过HTML标签选择元素
$('h1').css('font-family','arial,verdana');
使用标签选租期选中元素，然后用css()方法改变当前页面标签为h1元素的font-family属性。
3.使用ID选择器选取元素
$('#sidebar').css('display','none');

22楼2013-12-04 10:25

4.使用类选择器选取元素
用类（.class）
$('.telephone').css('{'padding':'5px','border':'1px solid #ccc','width':'150px'}');

23楼2013-12-04 10:32

5.使用多个类选取一个或多个元素
$(function(){
$('.book.inactive').css('display','none');
});

24楼2013-12-04 10:52

收起回复

6.使用子元素选择器选取元素
当无法使用标签、css和id选择器时，可以使用子元素选择器这种非常有用的页面元素选择器。
$('body > p') //选取body元素内的所有直接子元素p
子元素选择器通过 > 选择符选取给定父元素的直接子元素。

25楼2013-12-04 11:09

收起回复

7.使用后代元素选择器选取元素
子元素选择器只匹配直接元素，比如匹配ul标签内的li标签。如果要选取目标元素的孙子元素、重孙元素，就要使用后代元素选择器。
子元素和后代元素选择器的区别在于是否使用 > 操作符。
去掉 > 符号，就能够选取所有的后代元素（包括子元素）。

26楼2013-12-04 11:28

8组合选择器
有时候需要同时选取多种类型的元素，组合使用类选择器、id选择器、标签选择器或子元素选择器。在jquery中，使用逗号分隔的选择器列表字符串就可以达成目的。
$(function(){
$('.book-1, .book-2, .book-3, .book-4, .book-5, #header, #footer p').css('background','#ccc');
});

27楼2013-12-04 11:49

3.2使用jquery过滤器过滤元素
过滤器的格式为一个冒号加上过滤器的名字，即：过滤器名。
:even和:odd 匹配结果集中的顺序为偶数或奇数
:header 匹配标题元素H1，H2,H3,H4等标签
:not 不匹配后面选择器的元素
:eq(index) 匹配顺序号等于index的元素
:gt(index) 匹配顺序号大于index的元素
:lt(index) 匹配顺序号小于index的元素
:first-child :last-child :only-child
nth-child(index) index从1开始第index个子元素
:has(p) 匹配包含p元素的元素
:contains('this is my text') 匹配包含this is my text的文本元素
:empty 匹配无内容的元素（如<img/>或<p></p>）
:parent 匹配拥有子元素的元素
:hidden 匹配不可见的元素 :visible 可见的元素
:animated 匹配正处于动画过程中的元素

28楼2013-12-04 17:44

懒惰了好几天了...继续开始jquery之路....
向上吧，少年~

29楼2013-12-09 10:11

3-10 为列表或集合中的第一个和最后一个元素设置样式
$(document).ready(function(){
$('ul li:first').css('border','none');
$('ul li:last').css('border','none');
});

31楼2013-12-09 11:29

3-11 找出包含某个元素的元素。 :has 过滤器
$(document).ready(function() {
$('.content:has(p)').css('font-size','25px');
});

32楼2013-12-09 11:52

3-12 找出不包含任何子元素或文本的元素。 :empty 过滤器
<script>
$(document).ready(function() {
$('.error:empty').css('display','none');
});
</script>
<body>
<div id='main'>
<div class='error'></div>

33楼2013-12-09 11:58

收起回复

3-13 根据元素包含的文本过滤器 :contains
查找tr元素下th元素内容包含product，设置边框为2像素，蓝色，虚线。
$(document).ready(function() {
$("tr th:contains('Product')").css('border','2px dotted blue');
});

34楼2013-12-09 12:07

根据元素的属性在DOM中选取元素
$('[attribute*=value]') //*是通配符
$('[attribute|=value]') //目标的属性值等于value或者以value开头且其后紧随跟一个连字符-）
$('[attribute~=value]') //目标属性的值包含value中任意一个子串（value是这样一个字符串，它由多个子串组成，子串之间由空格分隔）
$('[attribute$=value]')// 目标属性的值以value结束
$('[attribute^=value]')//目标属性值是以value开始的
$('[attribute=value]')//目标属性值等于value
$('[attribute!=value]')//！目标属性值不等于value
$('[attribute=value][attribute=value][attribute=value]')//目标元素同时匹配多个属性及其值

35楼2013-12-09 16:17