jQuery初体验
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("<p>hello!</p>"); 直接在 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("<p>hello!</p>"); //在 div 上(前)面插入 "<p>hello!</p>" $("div").after("<p>hello!</p>"); //在 div 下(后)面插入 "<p>hello!</p>"
$("div").wrap("<a>i`m yellow!</a>"); // <div> 下添加子元素 <a>
删除元素
$("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("<p>hello!</p>"); //把 id=fish 的元素替换成 <p>hello!</p>
查找元素
index()
<ul> <li id="yellow">yellow</li> <li id="blue">blue</li> <li id="purple">purple</li> </ul> jQuery: var index = $("ul > li").index($("#yellow")); //查找ul下li里#yellow的元素的索引号
this
jQuery: $(this).click(function(){}); JavaScript: this.click=function(){};
对CSS
的操作
jQuery中有addClass
、removeClass
这样的命令来直接对单个CSS类
进行操作
JavaScript有className
、classList
这样的命令,只能对全部CSS类
进行操作
jQuery: $("p").addClass("yellow"); $("p").removeClass("yellow"); JavaScript: p.className= //your code; p.classList.add(""); p.classList.remove("");
相关推荐
83510998 2020-08-08
tthappyer 2020-07-25
tztzyzyz 2020-07-05
87281248 2020-07-04
82244951 2020-06-28
89510194 2020-06-27
牵手白首 2020-06-14
开心就好 2020-06-10
84483065 2020-09-11
85477104 2020-08-15
delmarks 2020-06-28
89510194 2020-06-27
hhanbj 2020-11-17
81427005 2020-11-11
EdwardSiCong 2020-11-23
85477104 2020-11-17
seoppt 2020-09-13