大心脏666 阅读(24) 评论(0)

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

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");
    });

九:表单对象属性过滤器

//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第一部分,希望可以帮助到大家。

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