码迷,mamicode.com
首页 > Web开发 > 详细

Jquery基础1-----入门

时间:2017-07-08 22:21:47      阅读:419      评论:0      收藏:0      [点我收藏+]

标签:转换   使用   功能   传递   选择器   注意   src   高级功能   html   

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-----入门

标签:转换   使用   功能   传递   选择器   注意   src   高级功能   html   

原文地址:http://www.cnblogs.com/gdy1993/p/7138218.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!