第五章jQuery

Posted 2020-12-05 tyh-tesla

DOM文档加载的步骤

1. 解析html结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。
5. 加载图片等外部文件。
6. 页面加载完毕。

执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

简化写法不同

window.onload没有简化写法

$(document).ready(function(){})可以简写成$(function(){});

 

基础选择器

　　　　1.id选择器

         console.log($(‘#brother‘));
         
         $(‘#brother‘).css(‘color‘,‘red‘);

//2.标签选择器

         //设置一个值
//       $(‘a‘).css(‘color‘,‘yellow‘)
//          设置多个值 设置多个值得时候使用对象存储 key:value
         $(‘a‘).css({‘color‘:‘yellow‘,‘font-size‘:‘24px‘});
         
         //3.类选择器
         
         $(‘.li3‘).css(‘background‘,‘green‘);
         
         //4.通配符选择器 * 使用不是很频繁
         
         console.log($(‘*‘));
         //清空整个界面的dom元素
         $(‘*‘).html(‘‘);

//1.后代选择器  div p

$(‘#box p‘).css(‘color‘,‘red‘);


//2.子代选择器  div > p

$(‘#box>p‘).css(‘color‘,‘yellow‘)


//3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +
$(‘#father+p‘).css(‘font-size‘,‘30px‘);



//4.兄弟选择器 ~
$(‘#father~p‘).css(‘background‘,‘blueviolet‘);


console.log($(‘li‘));

//5.获取第一个元素
$(‘li:first‘).css(‘font-size‘,‘50px‘);

//6.获取最后一个元素


$(‘li:last‘).css(‘font-size‘,‘50px‘);


$(‘li:eq(3)‘).css(‘font-size‘,‘50px‘);

基本过滤选择器：

//获取第一个 :first ,获取最后一个 :last

//奇数
$(‘li:odd‘).css(‘color‘,‘red‘);
//偶数
$(‘li:even‘).css(‘color‘,‘yellow‘);

//选中索引值为1的元素 *
$(‘li:eq(1)‘).css(‘font-size‘,‘100px‘);

//大于索引值1
$(‘li:gt(1)‘).css(‘font-size‘,‘50px‘);

//小于索引值1
$(‘li:lt(1)‘).css(‘font-size‘,‘12px‘);

属性选择器：

标签名[属性名] 查找所有含有id属性的该标签名的元素
         $(‘li[id]‘).css(‘color‘,‘red‘);
         
         //匹配给定的属性是what值得元素
         $(‘li[class=what]‘).css(‘font-size‘,‘30px‘);
         //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
         $(‘li[class!=what]‘).css(‘font-size‘,‘50px‘);
         
//       匹配给定的属性是以某些值开始的元素
         $(‘input[name^=username]‘).css(‘background‘,‘gray‘);
         //匹配给定的属性是以某些值结尾的元素
         $(‘input[name$=222]‘).css(‘background‘,‘greenyellow‘);
         
         //匹配给定的属性是以包含某些值的元素
         $(‘button[class*=btn]‘).css(‘background‘,‘red‘)