一、jQuery加载页面方式
原生js是使用window.onload方法加载页面,jquery是采用ready()方法加载页面,这种方法比window.onload方法快。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> // 原生js写法:window.onload window.onload=function(){ var oDiv=document.getElementById('div1'); alert('原生js加载的页面'+oDiv) } // 完整写法 // $(document).ready(function(){ // var $div=$('#div1'); // alert('jquery加载的div页面'+$div); // }) // 加载的简写方式(常用) $(function(){ var $div=$('#div1'); alert('jquery加载的div页面'+$div); }) // jQuery的加载速度比原生js加载速度快的多 </script> </head> <body> <div id="div1">这是一个div页面</div> </body> </html>
二、jQuery选择器
jQuery选择器与CSS选择器方法一样。
<script> $(function(){ // ID选择器 var $div1 = $('#div1'); // 类选择器 var $box = $('.box'); // 标签选择器 var $li = $('li'); // 层级选择器 var $span = $('#div1 span'); // 属性选择器 var $input = $('input[name="input01"]') // 增加样式,css函数是行间样式,直接加在标签上的样式 // ID选择器增加样式 $div1.css({'color':'green','font-size':30}); // 类选择器增加样式 $box.css({'color':'red','fontSize':'40px'}); // 标签选择器增加样式 $li.css({'color':'pink','fontSize':'25px'}); // 层级选择器加样式 $span.css({'font- weight':'bold','color':'yellow'}); // 属性选择器增加样式 $input.css({'width':100,'height':100}); }) </script>
三、对选择集进行过滤
主要有三个方法:has、not、eq
has:包含有某元素; not:不包含有某元素; eq:下标等于多少的元素
<script> $(function(){ // 从页面所有的div元素中选出包含有p元素的标签 var $div1=$('div').has('p'); // 从页面选出class不是box2的div元素 var $div2=$('div').not('.box2'); // 从页面选出第五个div元素,使用下标索引,下标是从0开始 var $div3=$('div').eq(4) // 给选出来的div元素加样式 $div1.css({'color':'red','font-size':25}); $div2.css({'background-color':'pink'}); $div3.css({'weight':'bold','font-size':'30px'}); }) </script> <body> <div class="box1">这是第一个div <p>这是一个段落</p> </div> <div class="box2">这是第二个div</div> <div class="box3">这是第三个div</div> <div class="box4">这是第四个div</div> <div class="box5">这是第五个div</div> </body>
四、选择集转移
<script> $(function(){ // 选择div元素的前面一个元素 var $box1=$('.box').prev().css('background-color','pink'); // 选择div元素前面所有的元素 var $box2=$('.box').prevAll().css({'color':'green','font-size':30}); // 选择div元素的后面一个元素 var $box3=$('.box').next().css('font-weight','bold'); // 选择div元素后面的所有元素 var $box4=$('.box').nextAll().css('background-color','#ddd'); // 选择div元素的父级元素 var $box5=$('.box').parent().css('text-decoration','underline'); // 选择div元素的子级元素 var $box6=$('.box').children().css('background','green'); // 选择除了div自己本身的其他元素 var $box7=$('.box').siblings().css('font-style','italic'); }) </script>
五、jQuery样式操作
1.行间样式操作:包括读取元素样式属性和设置元素样式属性
2.给元素增加样式类名,删除元素样式类名。
$(function(){ var $div = $('#div1'); var $div2 = $('div'); var $a = $('#link01'); // 读取样式属性值: var sSize = $div.css('font-size'); //alert(sSize); // 写入也叫作设置属性值,设置一个值可以不写成字典的形式 $div.css('color','red'); // 设置多个属性值需要写成字典的形式 $div.css({'font-weight':'bold','font-size':30}); //获取多个元素的属性值,默认得到第一个元素的属性值 var sSize02 = $div2.css('font-size'); //alert(sSize02); // 给元素增加类名 $a.addClass('big'); $a.addClass('red'); $a.addClass('noline'); // 删除元素类名 $a.removeClass('red'); $a.removeClass('big'); })
六、绑定事件click,索引
// 需求:点击列表文字,对应的样式发生改变 $(function(){ var $li=$('li') $li.click(function(){ $(this).css({'width':100,'height':100,'color':'red'}) // 获取元素的索引值 var $index=$(this).index() alert($index) }) })
七、动画
把CSS改成animate即可,可以给动画加各种各样的样式:
<style> div {width: 200px; height: 200px; background-color: lightcoral;} </style> <script> $(function(){ // 需求:点击按钮,动画开始 var $but=$('button'); var $div=$('div'); $but.click(function(){ // $div.animate({'width':1200}); /* 参数一:要做动画的样式属性,写成字典的形式 参数二:动画持续的时间,默认是400毫秒,一般不写单位 参数三:动画曲线 默认是 'swing'缓冲运动,还有'linear' 匀速运动 参数四:回调函数,是一个匿名函数,动画结束后会自动调用这个匿名函数 */ $div.animate({'width':1300,'height':700},1000,'swing',function(){ $div.animate({'width':100,'height':100},1000,'linear') }) }) }) </script> </head> <body> <button>动画开始</button> <div></div> </body>
八、练习题一
<script> // 请写出实现的代码: // 提示:基本原理是改变列表容器的left值,根据点击的tab动画运动到对应的left值 $(function(){ var $btn=$('.tab_btns input') var $con=$('.tab_cons') // 获取列表容器的宽度 var $con_size=$con.css('width'); // 一、点击按钮高亮,其他按钮不亮 $btn.click(function(){ $(this).addClass('current').siblings().removeClass('current'); // 二、按钮改变,下面网页内容跟着改变,并且有动画效果 $con.animate({'left':-500*($(this).index())}) }) }) </script>
九、练习题二
<script> // 请写出实现的代码: $(function(){ var $but=$('#btn'); var $pop_main=$('.pop_main'); var $pop_con=$('.pop_con') var $a=$('a'); var $cancel=$('.cancel'); $but.click(function(){ $pop_con.css({'top':0,'margin-top':0,'opacity':0}); $pop_main.css({'display':'block'}); $pop_con.animate({'top':'50%','margin-top':-150,'opacity':1}); $a.click(function(){ $pop_con.animate({'top':0,'margin-top':0,'opacity':0},function(){ $pop_main.css({'display':'none'}); }); }) $cancel.click(function(){ $pop_con.animate({'top':0,'margin-top':0,'opacity':0},function(){ $pop_main.css({'display':'none'}); }); }) }) }) </script>