第五章jQuery

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')

jquery和DOM之间的转换：

//dom==>jquery对象

      var oDiv = document.getElementById('box');
      console.log($(oDiv));

      $(oDiv).click(function(){
//       alert(111);
      })

      //第一种方式 jquery ===>DOM对象
      console.log($('button')[0]);

      //第二种方式
      console.log($('button').get(0));
      var isShow = true;

      $('button').get(0).onclick = function(){
//       alert(222);

 show和hide方法

/*
      $('#btn').click(function(){
         if(isShow){
            $('#box').show('slow',function(){
//             alert(111);

               $(this).text('盒子出来了');

               isShow = false;
               $('#btn').text('显示');
            })
         }else{
            $('#box').hide(2000,function(){
//             alert(111);

               $(this).text(' ');
               isShow = true;
               $('#btn').text('隐藏');

            })
         }
      })
      */

      //toggle 开关 如果元素显示则隐藏 ，反之亦然

      $('#btn').click(function(){
         $('#box').toggle(3000,function(){

            alert(111);
         });
      })

动画效果：

$('#btn').click(function () {
    $('#box').animate({width:'0px',height:'0px'},'fast').animate({width:'300px',height:'300px'})
})

右下角小广告效果：

$(function(){
   $('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
      $(this).fadeOut(1000)
          });
})

属性操作:
attr 是为jquery操作
prop 是为DOM的属性操作

3.addClass() removeClass() 添加类 和删除类，可以通过此方法实时添加和删除标签里的类

$('span').addClass('span2 span3')

$('span').removeClass('span2')
var isBig = true;

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

   if(isBig){
      $(this).addClass('active');
      isBig = false;
   }else{
      $(this).removeClass('active');
      isBig = true;

   }     

})

4.值属性的操作 text() html() val()

//仅仅是获取文本
console.log($('#box2').text());
//获取的所有，包括<a></a>这些标签
console.log($('#box2').html());

//获取值
console.log($('input').val());
$('input').val('嘿嘿你个大头鬼')

$('#btn').click(function(){
   var val = $('input').val();

   $("#box2").text(val);
})

//表单控件使用的一个方法
$('input').change(function(){
   console.log($(this).val());
})

//追加元素         $('ul').append('<li><a href="#">luffy</a></li>');

         $('ul').append(oLi);
         //如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作
         $('ul').append($('span'));

         //appendTo()

         $('<a href="#">路飞2</a>').appendTo($('ul'));

//       prepend 插入到被选中的元素的第一个位置
         $('ul').prepend('<li>我是第一个元素</li>')
         $('<li>我是第0个元素</li>').prependTo($('ul'))

         //after  before

         $('ul').after('<h3>我是一个三级标题</h3>');

         //insertAfter
         $('<a href="#">第一个</a>').insertAfter($('ul'));

         $('ul').before('<h2>我是一个二级标题</h2>');

         //insertBefore

//复制操作 clone()

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

            //副本具有与真身一样的事件处理能力 完全克隆
            $(this).clone(true).insertAfter($(this));

         })

//替换 

//       $('h3').replaceWith('<button>替换的按钮</button>');

//       $('<a href="#">替换超链接</a>').replaceAll('button');

//删除
         //empty() 只是清空了被选的内容

//       $('ul').empty();

//       remove() 被选元素 也被删掉了 事件就没有 什么都没有

//       $('ul').remove();

         //detach()  移除匹配的节点元素  删除节点后 事件会保留

         var $btn = $('button').detach();   
         console.log($btn[0]);

         $('ul').append($btn[0]);

//1.获取匹配元素的相对父元素的偏移 position

         
         console.log($('p').position().left);
         console.log($('p').position().top);

         var offsetTop = $('p').position().top + 50 + 'px';

         $('#btn').click(function(){
            $('p').animate({top:offsetTop},1000);
         })

//2.获取匹配元素 相对滚动条卷起的位置信息  scrollTop scrollLeft

//       console.log($(document).scrollLeft());
//       console.log($(document).scrollTop());

         $(document).scroll(function(){
            console.log($(document).scrollLeft());
            console.log($(document).scrollTop());
         })

// offset  获取匹配元素在当前视口的相对偏移 相对于浏览器,包含了padding内充距离

         console.log($('#box').offset());
         console.log($('p').offset().top);
         console.log($('p').offset().left);
         console.log($('#btn').offset().top);

//获取元素的宽高

         console.log("宽"+$('#box').width());
         console.log("高"+$('#box').height());

//设置宽高
         $('#box').width(400);

         //innerWidth / outerWidth

淘宝导航栏

$(function () {
    var h = $('.top').height();
        $(document).scroll(function () {
            var scrollTop = $(document).scrollTop();
            if (h<scrollTop){
                $('.nav').css({'display':'block','position':'fixed','top':0})
            }else{
                $('.nav').css('display','none')
            }
        })
})

siblings筛选:筛选给定的同类同胞元素

$(function () {
    $('li').hover(function () {
        console.log('123');
        // $(this).css({'color':'red','font-size':'20px'}).siblings('li').css({'color':'black','font-size':'12px'});
        $(this).addClass('active').siblings('li').removeClass('active');
    })
})

时间流：

“DOM2级事件”规定的事件流包括三个阶段：

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

阻止事件冒泡：

//1.阻止事件冒泡
ev.stopPropagation();

阻止默认事件
ev.preventDefault();
ev.stopPropagation();

     
事件的绑定和移除：

绑定：
function add(){
   console.log('click');
}

function add2(){
   console.log('over');
}

$('#box').bind({
   "click":add,
   "mouseover":add2
})

//添加的事件不能发生在未来==》动态生成的元素不能直接添加对象 里面的事件不能发生了  ==>事件代理

事件代理：

//事件代理 自己完成不了当前的点击事件，交给父级元素来做这件事件
//父级.on('事件名字'，'点击当前的标签元素'，fn)
     $('ul').on('click','li',function () {
         alert('新来的');
     })

     $('ul').append('<li>我是新来的</li>');

自定义事件：trigger

$('button').bind('myClick',function(ev,a,b,c){
   alert(111);       
   alert(a);
   alert(b);
})

//触发自定义的事件
$('button').trigger('myClick',[1,2,3])

鼠标事件：

$("#box").click(function(){
   console.log('click')
})

//双击事件
$("#box").dblclick(function(){
   console.log('dbclick')
})
*/
/*
//鼠标按下不松开
$("#box").mousedown(function(){
   console.log('mousedown');
})

//鼠标松开
$("#box").mouseup(function(){
   console.log('mouseup');
})
*/

被选元素和子元素被选中时 会触发函数  移入和移出
         /*
         $('#box').mouseover(function(){
            console.log('mouseover');
         })
         $('#box').mouseout(function(){
            console.log('mouseout');
         })
         */

         /*
         //只有被选元素移入的时候 才会触发
         $('#box').mouseenter(function(){
            console.log('mouseenter');
         })
         $('#box').mouseleave(function(){
            console.log('mouseleave');
         })
         */

/*获取焦点
         $('input[type=text]').focus(function(){
            console.log($(this).val())
         })

/*失去焦点         
         $('input[type=text]').blur(function(){
            console.log($(this).val())
         })
         */

键盘按下：
         $('input[type=password]').keydown(function(e){
            console.log(e.keyCode);

            if(e.keyCode == 13){
               console.log('enter被按下了')
            }

//          console.log($(this).val())
         })
键盘松开
         $('input[type=password]').keyup(function(){
            console.log($(this).val())
         })

表单事件：

 $(function() {

              //change()s事件

              //此事件仅限于input元素  textarea select
            $('select').change(function(){
                  console.log($('select option:selected').text());

            $('.show').text($('select option:selected').text());

            })

//          select()  仅限于用在 input type=text  textarea
         $('#other').select(function(){
            console.log($(this).val());
         })

         $('form').submit(function(e){
//          
            //阻止默认事件
            e.preventDefault();

            //跟服务端有很大挂钩  下节课 咱们简单的来玩一下ajax技术

            alert(1111);
         })

ajax：

//get请求
         $.ajax({
            url:'./data.json',
            type:'get',
//          dataType:'json',
            success:function(data){

               console.log(data);

            },
            error:function(){

            }
         })
         */

         /*
         //注意：post请求无法演示 马上学django 就可以演示了
         $.ajax({
            url:"/course",
            type:'post',
            data:{
               username:'zhangsan',
               password:'123'
            },
            success:function(data){

               if(data.state == 'ok'&& data.status =='200'){
                  //登录成功
               }

            },
            error:function(err){
               console.log(err);
            }
         })
         */