jquery-1

---恢复内容开始---

jquery的基本概念：1.简介
jQuery = javascript Query(查询)。辅助javascript的开发库。jQuery是一个快速的简介的javascript库。也算是javascript的一个框架
jquery可以实现html页面保持代码和html内容分离。也就是说，在html中不用插入一堆js来调用命令了
神马互动百科上介绍的挺好的
2.优势
1.轻量级
2.强大的选择器
3.出色的DOM操作封装（对DOM节点属性的改变）
4.完善的事件和事件对象兼容机制
5.完善的ajax
6.不会污染全局变量。可以和其他js库兼容
7.出色的浏览器兼容
8.方便的链式操作
9.隐式迭代（jquery一般情况下不需要for循环dom对象）
10.完善的官方文档
11.丰富的插件

3.不足
1.不能向后兼容，现版本不兼容旧版本的东西
2.插件兼容性，比较早期的插件是不适用于新版jQuery的
3.插件之间可能会有冲突，特别是有相同的事件或者相同的选择器的时候
4.jquery在大型框架中，特别是打开投胎UI框架的时候，对公话的支持来说不是很好，但是我们可以使用 jquery UI 来弥补

4.cdn获取百度CND http://libs.baidu.com/jquery/1.11.1/jquery.min.js

5.引入jquery本地
<script src="jquery.js"></script>
引入CDN上的jquery
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
　　一：如何能够使用jquery

　1.在写juqery代码之前，要引入js文件，单独写一个<script>

　2.这是与js所做的对比：

　　　　$(function(){   -------->window.onload=function(){          //是在js加载时就绑定函数
　　　 $("#btnId")    ----------->var btnId=document.getElementById("btnId");   //此处是获取元素的节点
  　　　 click        ---------->btnId.onclick=function(){　　　　//此处是绑定点击函数

　　二：选择器

$(function(){
    //1.选择 id 为 one 的元素
    $("#btn1").click(function(){     //解释一个：首先是在窗体加载事件里名写的获取元素的节点，然后为其绑定点击函数，函数内写代码用选择器，是ID选择器用的是#加ID名
     $("#one").css("background-color","#bbffaa");
    });

    //2.选择 class 为 mini 的所有元素
    $("#btn2").click(function(){
     $(".mini").css("background-color","#bbffaa");
    });

    //3.选择元素名是 div 的所有元素
    $("#btn3").click(function(){
     $("div").css("background-color","#bbffaa");
    });

    //4.选择所有的元素
    $("#btn4").click(function(){
     $("*").css("background-color","#bbffaa");
    });

    //5.选择所有的 span 元素和id为two的元素
    $("#btn5").click(function(){
     $("span,#two").css("background-color","#bbffaa");
    });

　　三：层次选择器

$(function(){
    //1.选择 body 内的所有 div 元素后代选择器
    $("#btn1").click(function(){
     $("body div").css("background", "#bbffaa");
    });

    //2.在 body 内, 选择div子元素　　子代选择器
    $("#btn2").click(function(){
     $("body>div").css("background", "#bbffaa");
    });

    //3.选择 id 为 one 的下一个 div 元素　　同为兄弟的下一个元素
    $("#btn3").click(function(){
     $("#one+div").css("background", "#bbffaa");
    });

    //4.选择 id 为 two 的元素后面的所有 div 兄弟元素   为当前元素除自己外以后所有的兄弟
    $("#btn4").click(function(){
     $("#two~div").css("background", "#bbffaa");
    });
   });

　　四：基本过滤选择器

$(document).ready(function(){
    //1.选择第一个 div 元素
    $("#btn1").click(function(){
     $("div:first").css("background", "#bbffaa");
    });

    //2.选择最后一个 div 元素
    $("#btn2").click(function(){
     $("div:last").css("background", "#bbffaa");
    });

    //3.选择class不为 one 的所有 div 元素
    $("#btn3").click(function(){
     $("div:not(.one)").css("background", "#bbffaa");
    });

    //4.选择索引值为偶数的 div 元素
    $("#btn4").click(function(){
     $("div:even").css("background", "#bbffaa");
    });

    //5.选择索引值为奇数的 div 元素
    $("#btn5").click(function(){
     $("div:odd").css("background", "#bbffaa");
    });

    //6.选择索引值为大于 3 的 div 元素
    $("#btn6").click(function(){
     $("div:gt(3)").css("background", "#bbffaa");　　//括号内填的是索引值
    });

    //7.选择索引值为等于 3 的 div 元素
    $("#btn7").click(function(){
     $("div:eq(3)").css("background", "#bbffaa");
    });

    //8.选择索引值为小于 3 的 div 元素
    $("#btn8").click(function(){
     $("div:lt(3)").css("background", "#bbffaa");
    });

    //9.选择所有的标题元素
    $("#btn9").click(function(){
     $(":header").css("background", "#bbffaa");
    });

    //10.选择当前正在执行动画的所有元素
    $("#btn10").click(function(){
     $(":animated").css("background", "#bbffaa");
    });
   });

　　五：内容过滤选择器

$(document).ready(function(){
    //1.选择含有文本 'di' 的 div 元素
    $("#btn1").click(function(){
     $("div:contains(di)").css("background", "#bbffaa");  //contains()中写是是否含有
    });

    //2.选择不包含子元素的div元素
    $("#btn2").click(function(){
     $("div:empty").css("background", "#bbffaa");   //empty不包含子元素
    });

    //3.选择含有 class 为 mini 元素的 div 元素
    $("#btn3").click(function(){
     $("div:has(.mini)").css("background", "#bbffaa");//为选择div中有类名为mini的元素
    });

    //4.选择含有子元素的div元素
    $("#btn4").click(function(){
     $("div:parent").css("background", "#bbffaa"); //选择含有子元素的div元素
    });
   });

六：可见性过滤选择器

$(document).ready(function(){
    //1.选取所有可见的 div 元素
    $("#btn1").click(function(){
     $("div:visible").css("background", "#bbffaa");
    });

    //2.选择所有不可见的 div 元素
    //不可见：display属性设置为none，或visible设置为hidden
    $("#btn2").click(function(){
     $("div:hidden").show("normal").css("background", "#bbffaa");
    });

    //3.选择所有不可见的 input 元素
    $("#btn3").click(function(){
     alert($("input:hidden").val());
    });

七：属性过滤选择器

$(function() {
  //1.选取含有属性title 的div元素
  $("#btn1").click(function() {
   $("div[title]").css("background", "#bbffaa");
  });
  //2.选取属性title值等于'test'的div元素
  $("#btn2").click(function() {
   $("div[title=test]").css("background", "#bbffaa");
  });
  //3.选取属性title值不等于'test'的div元素(没有属性title的也将被选中)
  $("#btn3").click(function() {
   $("div[title!=test]").css("background", "#bbffaa");
  });
  //4.选取属性title值以'te'开始的div元素
  $("#btn4").click(function() {
   $("div[title^=te]").css("background","#bbffaa");
  });
  //5.选取属性title值以'est'结束的div元素
  $("#btn5").click(function() {
   $("div[title$=est]").css("background","#bbffaa");//这是以什么结束的元素
  });
  //6.选取属性title值含有'es'的div元素
  $("#btn6").click(function() {
   $("div[title*=es]").css("background", "#bbffaa");
  });
  //7.组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值含有'es'的 div 元素
  //对于属性过滤选择器，如果多个写在一起，则后面过滤的对象是前面选择器过滤的结果
  $("#btn7").click(function() {
   $("div[id][title*=es]").css("background", "#bbffaa");//这是选取id选则器中title是以es开头的
  });
  //8.选取含有 title 属性值, 且title 属性值不等于 test 的 div 元素
  $("#btn8").click(function() {
   $("div[title][title!=test]").css("background", "#bbffaa");//是选取含有title的属性值,企鹅title的属性值不等于test的div元素
  });

八；子元素过滤选择器

　　//1.选取每个class为one的div父元素下的第2个子元素
    $("#btn1").click(function(){
     //索引值从1开始
     //父元素选择器>子元素选择器是div中的字元素有.one的然后其中的第二个儿子
     $("div.one>:nth-child(2)").css("background","#bbffaa");
     $("div.one>:nth-child(2)").css("background","#bbffaa");//不能太放纵是要还的
    });
    //2.选取每个class为one的div父元素下的第一个子元素
    $("#btn2").click(function(){
     $("div.one>:first-child").css("background","#bbffaa");
    });
    //3.选取每个class为one的div父元素下的最后一个子元素
    $("#btn3").click(function(){
     $("div.one>:last-child").css("background","#bbffaa");
    });
    //4.如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
    $("#btn4").click(function(){
     $("div.one>:only-child").css("background","#bbffaa");
    });

九：表单对象属性过滤器

这就是基础jquery第一部分，希望可以帮助到大家。

---恢复内容结束---

猜你喜欢