首页 > 代码库 > Jquery基础1-----入门

Jquery基础1-----入门

1.让jQuery放弃对$符号的使用

  出了jquery之外,仍有一些javascript库也使用了$符号,可以使用jQuery.noConflict();方法让jQuery放弃对$符号的使用

  也可自定义jQuery的简写符号:

  var jq = jQuery.noConflict();

  jq(document).ready(function(){});//jq代替$,成为jquery的简写形式

2.等待DOM就绪

  $(document).ready(function(){

    console.log("在function内部编写代码");

  });

  这种方法的实质是:以函数作为参数传递给ready方法,其实是为jQuery的ready事件绑定事件处理函数,可简写为$(function(){});

3.延迟ready事件的出发事件------holdReady()

  当我们动态载入外部资源时这个方法有用

  $.holdReady(true);//延迟ready事件的触发

  $(document).ready(function(){

    console.log("在function内部编写代码");

  });

  setTimeout(function(){

    $.holdReady(false);//五秒后接触ready时间的延迟

  },5000);

4. 使用上下文限制搜索范围

  1) 将一个选择器用作下一个选择器的上下文

  $(document).ready(function(){

    $("img:odd",$("div")).mouseout(function(){});//选取所有div中的第奇数个img,$("div")用作另一个选择器的上下文。

  });

  2)将HTMLElement对象用作上下文

  $(document).ready(function(){

    var ele = document.getElementById(""block);

    $("img:odd",block).mouseout(function(){});//在block元素内搜索奇数图片

  });

5.确定创建jQuery对象对应的上下文对象-----context属性

  $(document).ready(function() {

    var jq1 = $("img:odd");

    //没有上下文对象,默认为document,由于document没有tagName属性,所以返回undifined
    console.log("No context: " + jq1.context.tagName);//undifined

    //上下文元素为多个元素时,其上下文对象为document
    var jq2 = $("img:odd", $("div"));
    console.log("Multiple context elements: " + jq2.context.tagName);//undifined
    //使用单一HTMLElement元素创建jQuery对象,其上下文对象为该HTMLElement元素
    var jq3 = $("img:odd", document.getElementById("block"));
    console.log("Single context element: " + jq3.context.tagName); //block对应的标签名
   });

 

 

6.jQuery对象和DOM对象的转换与处理

  由DOM对象生成Jquery对象

  var $id1 = $(document.getElementById("id1"));//此时$id1 为jQuery对象

  jQuery对象生成DOM对象:可以通过数组、each、索引等方法获得具体如下

  1)把jQuery对象看成是一个HTMLElement对象数组---享受jQuery高级功能的同时仍可以直接访问DOM

  $(document).ready(function() {
    var elems = $("img:odd");
    for (var i = 0; i < elems.length; i++) {
      console.log(elems[i].tagName + " " + elems[i].src);//直接访问Img对象的src属性
    }
  });

  2)迭代JQuery对象内含的DOM对象

  $(document).ready(function() {
    $("img:odd").each(function(index, elem) {//index为索引,elem为每一个DOM对象
      console.log("Element: " + elem.tagName + " " + elem.src);
    });
  });

  3)获取指定索引位置的HTMLElement对象(DOM对象)

  $(document).ready(function() {
    var elem = $("img:odd").get(1);//获取索引位置为1的DOM元素
    console.log( elem.tagName + " " + elem.src);
  });

  4)确定一个HTMLElement对象的序号----index方法

  $(document).ready(function() {

    var elems = $("body *");
    // index方法传入DOM参数
    var index = elems.index(document.getElementById("oblock"));
    console.log("Index using DOM element is: " + index);

    // index对象传入jQuery对象
    index = elems.index($("#oblock"));
    console.log("Index using jQuery object is: " + index);
  });

  注意:index方法也可传入字符串参数(解释成选择器,可能会造成两个结果集翻转)和空参数(得到一个元素相当于邻居的序号)

  5.jquery支持链式调用

 

Jquery基础1-----入门