• jQuery慢慢啃之核心(一)


    1.

    $("div > p"); div 元素的所有p子元素。

    $(document.body).css( "background", "black" );设置页面背景色

    $(myForm.elements).hide()隐藏一个表单中所有元素。

    $("input:radio", document.forms[0]);在文档的第一个表单中,查找所有的单选按钮

    $("div", xml.responseXML);在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。

    2.$("<input type='checkbox'>"); // 创建一个 <input> 元素 在 IE和其他浏览器 中有效:因为IE中必须 <input> 元素的 type 只能写一次

     $("<div><p>Hello</p></div>").appendTo("body");创建一个元素并且添加到指定元素中

     $("<div>", { "class": "test",  text: "Click me!",  click: function(){ $(this).toggleClass("test");}}).appendTo("body");创建一个元素并添加其属性和事件。

     $("<input>", {type: "text",val: "Test",focusin: function() {$(this).addClass("active");},
      focusout: function() {$(this).removeClass("active");}).appendTo("form");

    3.$(document).ready()加载完成后要执行的函数,简化为$(function(){// 文档就绪});

    4.$.holdReady(true);$.getScript("myplugin.js", function() {$.holdReady(false);});//延迟文档加载,主要使用于动态脚本加载器。此方法必须早在文件调用,在这样<head> jQuery脚本后,立即标记

    5.$("img").each(function(i){this.src = "test" + i + ".jpg";});//对每个元素执行处理,注意i是一个索引

      $("img").each(function(){$(this).toggleClass("example");});//转化为jquery对象

      $("button").click(function () {$("div").each(function (index, domEle) {//第一个是索引,第二个是函数依次执行到的元素

       // domEle == this
      $(domEle).css("backgroundColor", "yellow");

      if ($(this).is("#stop")) {
      $("span").text("Stopped at div index #" + index);
      return false; } });});

    6.$("img").size();

      $("img").length;

    7.$("ul").selector//返回当前选择器,此处为ul

    8. $("ul").context//返回原始的DOM节点内容,即jQuery()的第二个参数,此处为[object HTMLDocument] IE返回[object]
    9.$(this).get(0)与$(this)[0]相同,取得其中一个匹配的元素

      $("img").get().reverse();当get没有索引时将获取所有元素数组。

    10.$('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
    $('li').index($('#bar')); //1,传递一个jQuery对象
    $('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
    $('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的索引位置
    $('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。

    11.在元素上定义数据,格式随意

    $("div").data("blah");  // undefined
    $("div").data("blah", "hello");  // blah设置为hello
    $("div").data("blah");  // hello
    $("div").removeData("blah");  //移除blah

    $("div").data("test", { first: 16, last: "pizza!" });
    $("div").data("test").first  //16;
    $("div").data("test").last  //pizza!;

    $("div").removeData("desc url");// 移除键名为"desc"、"url"的数据项,注意中间有空格

     12.

    $("span").queue("p",[function(a){alert(11);},function(b){alert(22);},function(c){alert(33);}]);//添加函数组
    var ff=$("span").queue("p");//获取第一个元素的函数组
    alert(ff.length);
    $("#a").dequeue("p");//执行第一个函数
    $("#a").dequeue("p");//执行第二个函数
    alert(ff.length);
    $("#a").queue("p",function(){alert("补充函数;")});//在追加一个函数
    alert(ff.length);
    //$("#a").clearQueue("p");//清空函数数组
    //$("div").queue("fx", []);//清空函数数组

    13.

    //第一种扩展方法

    $.fn.extend (  

    {   

    tanchu:function(){alert("我是扩展函数")},   

    shuxing:"我是扩展属性",   

    zaitan:function(){alert("第二次弹出")},   

    intext:function(){this.value="ooooo";alert("看看设置内容是否成功。")},   

    check: function(){// 这里的this表示当前jQuery对象        

    this.prop("checked", true);        

    return this;}  

    } );

    //第二种扩展方法

    $.fn.site = "CodePlayer";

    $.fn.check = function(){    

    // 扩展到jQuery原型上后,这里的this表示当前jQuery对象    

    this.prop("checked", true);    

    return this; };

    $.fn.isEmpty = function(){  

    return !$.trim( this.val() );

    //调用

    $("[name=opt]").check( );// 全选复选框  

    $("#b").tanchu();

     $("#b").intext();  

    $("#b").zaitan();

    alert($("#b").shuxing);

    14.扩展jquery本身

    jQuery.extend({
      min: function(a, b) { return a < b ? a : b; },
      max: function(a, b) { return a > b ? a : b; }
    });

    jQuery.min(2,3); // => 2
    jQuery.max(4,5); // => 5

     15.

    jQuery.noConflict();//使$失去原来的含义,用原始的jQuery作为关键字
    // 使用 jQuery
    jQuery("div p").hide();

    var j = jQuery.noConflict();//使用j作为关键字
    // 基于 jQuery 的代码
    j("div p").hide();

    var dom = {};//命名空间
    dom.query = jQuery.noConflict(true);//使用dom.query代替原来的关键字

    // 新 jQuery 的代码
    dom.query("div p").hide();

  • 相关阅读:
    InnoDB引擎面面观
    [读史思考]为何此大神可以同时进入文庙和武庙?
    [源码解析] 当 Java Stream 遇见 Flink
    Alink漫谈(十八) :源码解析 之 多列字符串编码MultiStringIndexer
    [源码解析] Flink UDAF 背后做了什么
    [业界方案] ClickHouse业界解决方案学习笔记
    Istio Routing 实践掌握virtualservice/gateway/destinationrule/AB版本发布/金丝雀发布
    树立个人品牌意识:从背景调查谈谈职业口碑的重要性
    Istio 生产环境用户流量接入方案
    故障管理:故障应急和故障复盘
  • 原文地址:https://www.cnblogs.com/yuliantao/p/4253228.html
Copyright © 2020-2023  润新知