05_jQuery(一)

JQuery(一)

• JQuery文档非常完善
• 今日重点:
  • JQ选择器的学习
• 概述
  • jQuery是javascript的一个库,很轻量级
  • 在实际开发中,都不会使用javascript,即使使用,也是很少的一部分公司使用,一般都是用javascript封装好的一些小型框架
  • jQuery兼容CSS3，jQuery2.0之后不再支持ie6,ie7,ie8
  • jQuery1.8.3用的最多
• 引入JQ

<!--现在1.8.3用的比较多-->
<script src="../../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        alert("Hello JQuery!");
    });
</script>

• jQuery 和 javascript页面加载区别

  • javascript页面加载区别

  /*传统js如果调用两次window.onload会存在覆盖问题,后面的覆盖前面的*/
  window.onload = function() {alert('hello world1')}
  window.onload = function() {alert('hello world2')}
  

  • jQuery加载比js快
    • JQ:dom加载完成后就会加载
    • JS:整个页面加载完毕再调用
  • jQuert不存在覆盖问题,顺序执行

  jQuery(document).ready(function() { //1
      alert('hello world1');
  });
  $(document).ready(function(         //2
      alert('hello world2');
  ));
  $(function(                         //3
      alert('hello world3')
  ))；
  /*
  简写方式
  $(function(){})
  */
  

• JQ获取元素

//页面加载
$(function(){
    //传统方式获取
    document.getElementById('id').onclick = function(){
        location.href = 'http://www.google.com'
    }
    //JQ方式获取
    $('#id').click(function(){
        location.href = 'http://google.com';
    })
});

• DOM对象和jQuery对象的转换

//JS的dom操作
document.getElementById('span_1').innerHTML = 'xxxx';
//jQuery的dom操作
$(function(){//docuent加载完后执行,不加这行代码,事件不能绑定
    $('#btn').click(function(){
        //jQuery获取的对象不能调用js对象的方法，反过来也一样
        //$('#span_1').innerHTML = 'xxxx';
        $('#span_1').html('xxxx');
    });
});

//jQuery转DOM
$('#btn').click(function(){
    //jQuery获取的对象转换为DOM对象
    //$('#span_1').get(0) //这样就编程DOM对象
    $('#span_1').get(0).innerHTML = 'xxxx';
    $('#span_1')[0].innerHTML = 'xxxx';
});

//DOM转jQuery
function fun() {
    var spanEle = document.getElementById('#span_1');
    //$(spanEle) //这样就转成了Jquery对象了
    $(spanEle).html('xxxx');
}

jQuery选择器

• 基本选择器

  • id选择器:"#id"

  $("#id_name").css("background-color","pink");
  

  • 类选择器:".class"

  $(".class_name").css('background-color',"yellow");
  

  • 元素选择器:

  $("div").css("background-color","#FF6500");
  

  • 匹配所有的元素(*):只要是标签都匹配

  $("*").css("background-color",'red');
  

  • 并集选择器:select1,select2,select3(将多个选择器匹配的到的元素合并后返回)

  //选择id为id_name并且类为class_name的元素
  $("#id_name,.class_name").css("background-color","#FF6500");
  

• 层级选择器

  • 在给定的祖先元素下匹配所有的元素(子孙关系)

  $("body div").css("background-color","paleturquoise");
  

  • 给定父元素下的所有子元素(父子关系)

  $("body>div").css("background-color","gold");
  

  • 匹配所有紧接在prev元素后的next元素(同桌)

  //id为two后紧挨着的div
  $("#two+div").css("background-color",'#FF6500');
  

  • 匹配prev元素之后的所有siblings元素(兄弟)

  //id为one的所有div兄弟元素
  $("#one~div").css('background-color',"#FF0000");
  

• 基本过滤器

  • 第一个元素

  //body下的第一个div元素
  $("body>div:first").css("background-color",'pink');
  

  • 最后一个元素

  //body下最后一个div
  $("body>div:last").css("background-color","blueviolet");
  

  • 奇数集合

  # body下所有div元素中序号为基数的div集合
  $("body div:odd").css("background-color","yellowgreen");
  

  • 偶数集合

  $("body div:even").css("background-color","red");
  

• 属性选择器

//所有有id属性的div元素
$("div[id]").css("background-color",'yellow');

//所有id为two的所有div元素
$("div[id='two']").css('background-color',"#FF0000");

• 表单选择器

$(":input"):查找所有的input元素
$(":text"):查找所有文本框
$(":password"):查找所有密码框
$(":radio"):查找所有单选按钮
$(":checkbox"):查找所有复选框
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")

jQuery弹出广告图片

<script>
    $(function(){
        //1.书写显示广告图片的定时操作
        time = setInterval("showAd()",3000);
    });
    
    //2.书写显示广告图片的函数
    function showAd(){
        //3.获取广告图片，并让其显示
        //$("#img2").show(1000);
        //$("#img2").slideDown(5000);
        $("#img2").fadeIn(4000);
        //4.清除显示图片定时操作
        clearInterval(time);
        //5.设置隐藏图片的定时操作
        time = setInterval("hiddenAd()",3000);
    }
    
    function hiddenAd(){
        //6.获取广告图片，并让其隐藏
        //$("#img2").hide();
        //$("#img2").slideUp(5000);
        $("#img2").fadeOut(6000);
        //7.清除隐藏图片的定时操作
        clearInterval(time);
    }
</script>

• toggle使用

<div>
    <input type="button" value="显示/隐藏" id="btn" /><br />|
    ![](../img/xxxxxx.gif)
</div>

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            $("#img1").toggle();
        });
    });
</script>

jQuery隔行换色

<script type="text/javascript">
    $(function(){
        $("tbody>tr:even").css("background-color","gold");
        $("tbody>tr:odd").css("background-color","pink");
    });
</script>

• 通过JQ设置CSS一般不自己写,都是通过引用UI提供的CSS样式

<!--引入UI给的css样式-->
<link rel="stylesheet" href="../css/style.css" />

$("tbody tr:even").addClass("class_name");
$("tbody tr:even").removeClass("class_name");
//3.获取tbody下面的奇数行并设置背景颜色
$("tbody tr:odd").addClass("class_name");

jQuery全选全不选

<script>
$(function(){
    $("#select").click(function(){
        //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
        //attr方法与JQ的版本有关，在1.8.3及以下有效。
        $("tbody input").attr("checked",this.checked);
        $("tbody input").prop("checked",this.checked);
    });
});
</script>