<script src="./jquery-1.12.4.js"></script>
<script>
$(function (){
/* 标签选择器 */
// console.log( $('p') )
/* css方法 第一个参数是属性 第二个参数是值 都是字符串类型 */
// $('p').css('background','red')
// let obj = {
// background:"red",
// fontSize:"30px"
// }
// for(var key in obj){
// console.log(typeof key);
// }
/* 类选择器 */
// $('.p1').css({'background':'green','fontSize':'30px'})
/* id选择器 唯一的 只要有一个id选择器其他同名的就不生效了*/
// $('#p1').css('background','red')
/* 并集选择器 */
// $('#p1,.p1').css('background','red')
/* 等同于下面 */
// $('#p1').css('background','red')
// $('.p1').css('background','red')
/* 既要有.p1 又要有.p2 */
// $('.p1.p2').css('background','red')
/* 全局选择器 */
/* 属性值 支持数字和字符串 */
// $('*').css({margin:0,padding:0})
// $('*').css('margin',0)
// $('*').css('padding',0)
})
</script>
</head>
<body>
<p id="p1" class="p1 p2">马上要过年了，好激动，不想上学</p>
<p class="p1 p2">马上要过年了，好激动，不想上学</p>
<p class="p1">马上要过年了，好激动，不想上学</p>
</body>
属性选择器
<!-- <p>我要加入饿了么的队伍中</p><br>
<a>我要加入美团的队伍，成为一名合格的黄袍加身的人</a><br>
<a href="" class="a1">我要去阿里巴巴</a><br>
<a class="a2">我要去腾讯加入马化腾的队伍</a><br>
<h1>我要加入滴滴的公司</h1> -->
<a href="http://www.baidu.com">我要去加入百度</a><br>
<a href="www.baidu.cn">我要去百度搜索</a><br>
<a href="baidu.com">我不要去百度</a><br>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 属性选择器可以根据是否包含某属性来选取元素 */
/* []表示属性 选取属性是href的a标签 */
// $('a[href]').css('color','red')
/* 根据属性的值来选取元素 */
// $('a[class=a1]').css('color','red')
/* 选取不等于属性是某个特定值的元素 */
// $('a[class!=a1]').css('color','red')
/* 指定属性值以指定值开头的元素 */
// $('a[href^=www]').css('background','red')
/* 指定属性值以指定值结尾的元素 */
// $('a[href$=com]').css('background','red')
/* 指定属性值包含指定值的元素 */
// $('a[href*=baidu]').css('background','red')
</script>
层次选择器
<ul>
<p>pppppp</p>
<li>
<p>li p1</p>
</li>
<li>
<p>li p2</p>
</li>
<li>
<p>li p3</p>
</li>
</ul>
<!-- 层次选择器通过DOM 元素之间的层次关系来获取元素 -->
<script src="./jquery-1.12.4.js"></script>
<script>
/* 后代选择器 */
// $('ul p').css('background','red');
/* 子级选择器 */
// $('ul > p').css('background','red');
// $('li > p').css('background','red');
/* 相邻选择器用来选取紧邻目标元素的下一个元素 */
// $('p+li').css('background','red');
/* 同辈选择器用来选取目标元素之后的所有同辈元素 */
// $('p ~ li').css('background','red');
</script>
ready与onload
onload:
必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）
才能执行
同一页面不能同时编写多个
ready：
网页中所有DOM文档结构绘制完毕后即刻执行，
可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
速度比onload要快
同一页面能同时编写多个
