资讯专栏INFORMATION COLUMN

jQuery初体验

Towers / 2047人阅读

摘要:就像一个大的功能库,给我们返回一个有很多方法属性的对象,然后我们调用它的方法属性就行了。和一样,使用链式代码。一旦找到新的元素,之后的链就操作在新元素上,而不是一开始的元素。一般的变量无法使用方法,使用封装,使其可以使用方法。

jQuery

jQuery就像一个大的功能库,给我们返回一个有很多方法、属性的对象,然后我们调用它的方法、属性就行了。

和Javascript一样,使用链式代码。一旦找到新的元素,之后的链就操作在新元素上,而不是一开始的元素。

一般的javascript变量无法使用jquery方法,使用$("")封装,使其可以使用jquery方法。

var fish = document.getElementById("fish");
$("fish").remove();
获取一个元素

jQuery选择器$("jQuery选择器")和css选择器一样,可以是.可以是#可以是标签

$("div")
$(".color")
$("#mylove")
$("div ul .yellow")
$("#color.yellow")
$("#blur > .pic")
页面准备就绪时
jQuery:
$(document).ready(function(){
    //your code
});

JavaScript:
window.onload=function(){
    //your code
};
监听事件

绑定事件

jQuery:
$("#button").on("事件名称",function(){    //事件名称:click/mousemove/keypress...
    //your code
})

Javascript:
var button=document.getElementById("button1");
button.事件名称=function(){            //事件名称:onclick/onmousemove/onkeypress...
    //your code
}

绑定多个事件

jQuery:
$("#click").bind("click",function(){             //jQuery自动判断浏览器类型并做调整
    //your code
});

JavaScript:
var click=document.getElementById("click");
if(window.attachEvent){        
    click.attachEvent("click",function(){          //IE8或之前
        //your code
    });
}else{                         
    click.addEventListener("click",function(){    //除了IE8或之前
        //your code
    });
}

解绑事件

jQuery: 
//jQuery自动判断浏览器类型并做调整

$("#click").unbind("click");     删除 click 事件
$("#click").unbind();            删除所有事件

JavaScript:
var click=document.getElementById("click");
click.removeEventListener("click");    //除了IE8或之前
click.detachEvent("click");            //IE8或之前

单击

jQuery:
$("#click").click(function(){
    //your code
});

JavaScript:
document.getElementById("click").onclick=function(){
    //your code
};

触发事件trigger()

jQuery:
$("#click").click(function(){
    //your code
});

$("#click").trigger("click");

绑定并只执行一次事件

jQuery:
$("#button").one("事件名称",function(){    //事件名称:click/mousemove/keypress...
    //your code
})

遍历

each()

jQuery:
$("p").each(function(){
    //your code
});

JavaScript:
var p=documentElementsByTagName("p");
for(var i in p){
    p[i] = //yourcode;
};

jQuery集成了很多效果,很好用
slideUP()              向上收起
slideDown()            向下展开
slideToggle()   
fadeIn(速度/ms)         渐入

$.contains(xxx,yyy);    判断 元素xxx 中是不是有 元素yyy
对元素的操作

添加元素

jQuery:
$("div").append("

hello!

"); 直接在 div 后面添加元素 p ,p 的内容为 hello! $("div").append($("#color")); 在 div 后面添加本代码中 id="color" 的元素 JavaScript: var div=document.getElementById("div"); var p=doucment.createElement("p"); div.appendChild(p);
 $("div").before("

hello!

"); //在 div 上(前)面插入 "

hello!

" $("div").after("

hello!

"); //在 div 下(后)面插入 "

hello!

"
$("div").wrap("i`m yellow!");    // 
下添加子元素

删除元素

$("div#color").empty();      //empty 方法将元素内容清除,但不删除元素
$("div#color").remove();      //remove 方法直接将元素删除
$("div#color").detach();     //detach 方法将元素删除后暂存在浏览器的内存里,
var $L=$("div#color").detach();  //可以将detach赋给一个变量,删除的元素将可以像数组一样存在变量里

获取元素

$("#fish").eq(n);    //找到 $("#fish") 下面第 n 个子元素,并封装成jquery对象
$("#fish").parent();        //id=fish 的元素的父元素
$("#fish").children();      //id=fish 的元素的子元素
$("#fish").prev();          //id=fish 的元素的上(前)一个元素
$("#fish").next();          //id=fish 的元素的下(后)一个元素

$("#fish").parents();       //id=fish 的元素的所有父元素
$("#fish").siblings();      //id=fish 的元素的所有同级元素
$("#fish").closest("ul");   //离 id=fish 最近的 ul

$(".fish").first();      //取所有 class=fish 元素中第一个元素
$(".fish").eq(n);        //取所有 class=fish 元素中第 n 个元素
$(".fish").last();       //取所有 class=fish 元素中最后一个元素
$(".fish").slice(a,b);   //取 class=fish 中 a 和 b 之间的所有元素,不包括 a 和 b
$(".fish").filter();     //取 class=fish 里面符合 括号里规则 的所有元素
$(".fish").not();        //取 class=fish 里面不符合 括号里规则 的所有元素

$("#fish").parent().parent().next().remove();    //随意组合
$("#fish").closest("ul").parents();              //随意组合
$(".fish").parents().filter(".yellow");          //随意组合
$(".fish ul").children().not("#yellow");         //随意组合

替换元素

$("#fish").replaceWith("

hello!

"); //把 id=fish 的元素替换成

hello!

查找元素index()

  • yellow
  • blue
  • purple
jQuery: var index = $("ul > li").index($("#yellow")); //查找ul下li里#yellow的元素的索引号

this
jQuery:
$(this).click(function(){});

JavaScript:
this.click=function(){};
CSS的操作

jQuery中有addClassremoveClass这样的命令来直接对单个CSS类进行操作
JavaScript有classNameclassList这样的命令,只能对全部CSS类进行操作

jQuery:
$("p").addClass("yellow");
$("p").removeClass("yellow");

JavaScript:
p.className= //your code;
p.classList.add("");
p.classList.remove("");

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95206.html

相关文章

  • flint简单体验

    摘要:它能够使得在不刷新浏览器的情况下,更改本地的前端代码组件,浏览器自动更新预览。直接集成了这项技术,而且建立了专门的通道进行错误的实时反馈。命令行提供了三个主要的命令,。服务器关于服务器,其实是内部起了一个基于的服务器,外加进行消息的通讯。 跟着初探了下flintjs,的确会很棒,超级热更新! 学习地址: http://frontenddev.org/link/ali-11-11-...

    Batkid 评论0 收藏0
  • jQuery体验

    摘要:优化代码的原则就是提出重复的代码。新的叫它,它返回一个对象,对象里面有两个函数,也就是和,并用初始化。当然了这只是的基本原理,实际远比它复杂。 学习了DOM api 之后,做些简单的小练习 在HTML写5个无序列表 选项1 选项2 选项3 选项4 选项5 获取item3的所以的兄弟节点如何做呢? DOM 提供了nextSbiling`prev...

    AlienZHOU 评论0 收藏0
  • 新手的node爬虫体验

    摘要:后来在爬取不到让我一度怀疑人生的时候巧合下,发现磁力链接有小写字母,有长度的,有长度的。。 原文博客: 羞羞的node爬虫 前言 学了一阵子node,除了用 express 写东西,就没怎么做过东西突然就想写个 爬虫 来玩一玩,而且还是爬一些羞羞的东西 使用模块 SuperAgent 是个 http 方面的库,可以发起 get 或 post 请求。 cheerio 大家可以理解成一个 ...

    wemallshop 评论0 收藏0
  • 新手的node爬虫体验

    摘要:后来在爬取不到让我一度怀疑人生的时候巧合下,发现磁力链接有小写字母,有长度的,有长度的。。 原文博客: 羞羞的node爬虫 前言 学了一阵子node,除了用 express 写东西,就没怎么做过东西突然就想写个 爬虫 来玩一玩,而且还是爬一些羞羞的东西 使用模块 SuperAgent 是个 http 方面的库,可以发起 get 或 post 请求。 cheerio 大家可以理解成一个 ...

    canopus4u 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<