【  标签选择器 】

 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)

 

我要加入饿了么的队伍中

我要加入美团的队伍，成为一名合格的黄袍加身的人

我要去阿里巴巴

我要去腾讯加入马化腾的队伍

我要加入滴滴的公司

 

我要去加入百度

我要去百度搜索

我不要去百度

【属性选择器】

 属性选择器可以根据是否包含某属性来选取元素 

 []表示属性 选取属性是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')

$('ul').click(function (){

// $('ul').css('display','none')

 css('属性名')方法还可以获取元素的属性值 

console.log( $('ul').css('display') );

if( $('ul').css('display')=='block' ){

$('ul').css('display','none')

}else{

$('ul').css('display','block')

}

}) 

  【层次选择器通过DOM 元素之间的层次关系来获取元素 】

 【后代选择器 】

 $('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');

必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）

才能执行

 window.onload = function (){

document.getElementById('div1').style.background = 'red'

 }

下面的把上面写的覆盖了 

 同一页面不能同时编写多个 

 window.onload = function (){

 document.getElementById('div1').style.fontSize = '30px'

 }

 console.log($());

 console.log(document);

网页中所有DOM文档结构绘制完毕后即刻执行，

可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完

速度比onload要快

同一页面能同时编写多个

$(document).ready(function () {

$('#div1').css('background', 'red')

})

$(document).ready(function () {

$('#div1').css('fontSize', '30px')

})

简写方式 

$(function () {

$('#div1').css('color', '#fff')

})

执行时机

必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行

网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完

编写个数 同一页面不能同时编写多个 同一页面能同时编写多个

简化写法 无 $(function(){

执行代码

}) ;