-
1、$(".first-div a:first-child") 查找class="first-div"下的第一个a元素,针对所有父级下的第一个 2、$(".first-div a:last-child") 查找class="first-div"下的最后一个a元素，针对所有父级下的最后一个如果只有一个元素的话，last也是第一个元素 3、$(".first-div a:only-child") 查找class="first-div"下的只有一个子元素的a元素 也就是这个唯一子元素就是a 某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配这个元素 4、$(".last-div a:nth-child(2)") 查找class="last-div"下的第二个a元素 5、$(".last-div a:nth-last-child(2)") 查找class="last-div"下的倒数第二个a元素 jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
查看全部 -
查找div中name属性为p1的div元素：$('div[name=p1]')<br> 查找div中name属性包含p2的div元素：$('div[p2]')<br> 查找所有div中，有属性name中的值包含一个连字符“-”的div元素：$('div[name|=a]') 查找所有div中，有属性name中的值包含一个连字符“空”的div元素:$('div[name~=a]') 查找所有div中，属性name的值是用imooc开头的:$('div[name^=imooc]') 查找所有div中，属性name的值是用imooc结尾的:$('div[name=$imooc]') 查找所有div中，有属性name中的值包含一个test字符串的div元素:$('div[name*=test]') 查找所有div中，有属性testattr中的值没有包含"true"的div:$('div[name!=testattr]')
查看全部 -
可见性选择器 $(":visible") ==》 选择所有显示的元素 $(":hidden") ==》 选择所有隐藏的元素
查看全部 -
有几种方式可以隐藏一个元素：
CSS display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0
查看全部 -
$(":contains(text)") //包含指定文本（字符串）的元素 $(":has(selector)") //包含指定选择器的元素 $(":parent") //父级元素 $(":empty") //为空的元素（没有子元素的元素）
查看全部 -
$(":first") //匹配第一个元素 $(":last") //匹配最后一个元素 $(":not(selector)") //不匹配给定选择器的元素 $(":eq(index)") //在匹配的集合中选择索引真为index的元素 $(":gt(index)") //大于给定index值的元素 $(":lt(index)") //小于给定index值的元素 $(":even") //索引值为偶数的元素 $(":odd") //索引值为奇数的元素 $(":header") //所有标题元素，如h1、h2、h3等 $(":lang(language)") //选择指定语言的所有元素 $(":root") //选择该文档的根元素 $(":animated") //所有正在执行动画效果的元素
查看全部 -
层级选择器： $('parent > child') ==》 子选择器：选择所有指定'parent'元素中指定的'child'的直接子元素 $('arcestor descendant') ==》 后代选择器：选择给定的祖先元素的所有后代元素，一个元素的后代可能是改元素的一个孩子，孙子，曾孙等 $('prev + next') ==》 相邻兄弟选择器：选择所有紧接在'prev'元素后的'next'元素 $('prev ~ siblings') ==》 一般兄弟选择器：匹配'prev'元素之后的所有兄弟元素，具有相同的父元素，并匹配过滤'siblings'选择器
查看全部 -
jQuery中我们也可以通过传递*选择器来选中文档页面中的元素
描述：
$( "*" )
抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到
查看全部 -
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色查看全部 -
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0
通过jQuery自带的get()方法
jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性查看全部 -
$().html()用于在屏幕中输出
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
width: 100px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="jquery-1-11-3.js"></script>
</head>
<body>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<script type="text/javascript">
//通过原生方法处理
//获取到所有的节点标记名为div的元素
//给每一个div加上蓝色的边框
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++){
divs[i].style.border="3px solid red";
}
</script>
<script type="text/javascript">
//通过jQuery直接传入标签名p
//标签是可以多个的，所以得到的同样也是一个合集
$(".aaron").css("border", "3px solid blue");
$(".imooc").css("border","3px solid green");
//$(".immoc p").css("color","red");
//不同类同含有p不能为其设置两个属性，相互覆盖，只执行第一个calss中的p属性
$(".aaron p").css("color","green");
$("p").css("background","#fff");
</script>
</body>
</html>
查看全部 -
var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = 'red' //操作dom对象的属性查看全部 -
jQuery 转化成 DOM
var $div=$
查看全部 -
$(":contains(text)") //包含指定文本（字符串）的元素 $(":has(selector)") //包含指定选择器的元素 $(":parent") //父级元素 $(":empty") //为空的元素（没有子元素的元素）
查看全部
举报