锋利的jQuery笔记1

标签: 我的笔记


认识jQuery

jQuery对象和DOM对象

DOM对象可以通过javascript获取。

var domFoo = document.getElementById("foo");

jQuery对象是jQuery包装DOM对象后产生的对象。
jQuery对象可以使用jQuery里的方法,但不能再使用DOM对象的方法。

DOM对象转成jQuery对象

$( ) 把 DOM对象包装起来就是jQuery对象了

var cr = document.getElementById("cr");//DOM对象
var $cr = $(cr); 

jQuery对象转成DOM对象

可以通过 [index] 得到jQuery里的 DOM 对象

var $cr = $("#cr");      // jQuery对象
var cr = $cr[0];         // DOM对象

页面加载事件(可以写多个ready())

$(document).ready(function(){
   alert("hello world");
})

jQuery选择器

选择器

基本选择器

说明 示例 返回值
id选择器 $("#myDiv") 单个元素
样式选择器 $(".myClass") 集合元素
name选择器 $("div") 集合元素
综合多个选择器 $("#myDiv,div.myClass,span") 集合元素
选择所有元素 $("*") 集合元素

层次选择器

说明 示例 返回值
X的所有后代元素 $("div span") 集合元素
X的所有子元素 $("div>span") 集合元素
X后面的第一个Y元素 $(".myClass+div") 集合元素
X后面的所有同级Y元素 $(".myClass~div") 集合元素

过滤选择器(index从0开始)

基本过滤选择器

说明 示例 返回值
X里的第一个元素 $("div:first") 单个元素
X里的最后一个元素 $("div:last") 单个元素
X里的除去Y的其它元素 $("div:not(.myClass)") 集合元素
X里的所有索引为偶数的元素 $("div:even") 集合元素
X里的所有索引为奇数的元素 $("div:odd") 集合元素
X里索引为index的元素 $("div:eq(index)") 集合元素
X里索引大于index的元素 $("div:gt(index)") 集合元素
X里索引小于index的元素 $("div:lt(index)") 集合元素
所有的标题元素(h1,h2,h3) $(":header") 集合元素
所有正在执行动画的元素 $(":animated") 集合元素
当前获取焦点的所有元素 $(":focus") 集合元素

子元素过滤选择器(index从1开始)

说明 示例 返回值
每个父元素里的第 index/偶数/奇数 个子元素 $(":nth-child(index/even/odd)") 集合元素
每个父元素的第一个子元素 $(":first-child") 集合元素
每个父元素的最后一个子元素 $(":last-child") 集合元素
选择独生子子元素 $("ul li:only-child") 集合元素

内容过滤选择器

说明 示例 返回值
包含制定内容的元素 $(":contains(text)") 集合元素
内容为空的元素 $("div:empty") 集合元素
包含制定元素的元素 $("div:has(span)") 集合元素
有子元素的元素(包括文本) $("div:parent") 集合元素

可见性选择器

说明 示例 返回值
所有不可见的元素
(type=”hidden",
style=”display:none",
style=”visibility:none”)
$(":hidden") 集合元素
所有可见的元素 $(":visible") 集合元素

属性过滤选择器

说明 示例 返回值
含有id属性的元素 $("[id]") 集合元素
class属性值是Y的元素 $("[class=myClass]") 集合元素
class属性值不是Y的元素 $("[class!=myClass]") 集合元素
$("div[id][class=myClass]")
所有含有id属性并且class属性值是myClass的div
集合元素

表单对象属性选择器

说明 示例 返回值
可用元素 $("#myForm:enabled") 集合元素 不可用元素 $("#myForm:disabled") 集合元素
被checked元素 $("#myForm:checked") 集合元素 被selected元素 $("#myForm:selected") 集合元素

表单选择器

说明 示例 返回值
所有:input、select、
button、textarea元素
$(":input") 集合元素
... $(":text") 集合元素
... $(":password") 集合元素
... $(":radio") 集合元素
... $(":checkbox") 集合元素
... $(":submit") 集合元素
... $(":image") 集合元素
... $(":reset") 集合元素
... $(":button") 集合元素
... $(":file") 集合元素
... $(":hidden") 集合元素
... $(":text") 集合元素

选择器的一些注意事项

选择器里不能随便加空格。
如果选择器中两个元素之间有空格,说明前一个元素的后代元素。

var a = $(".test:hidden");  //选取class为“test”的元素里那些隐藏的
var b = $(".test :hidden"); //选取class为“test”的元素的后代里的隐藏元素

jQuery操作DOM

查找节点

查找元素节点

<div id=”myDiv” title=”hello”>123</div>
var str = $("#myDiv").text(); //123

查找属性节点

<div id=”myDiv” title=”hello”>123</div>
var str = $("#myDiv").attr("title"); //hello

创建节点

创建元素节点

var $li1 = $("<span></span>");
$("#myDiv").append($li1); 
//结果:<div id=”myDiv”><span></span></div>

$("span").append("a");
//结果:<div id=”myDiv”><span>a</span></div>

创建文本节点

var $li1 = $("<span>X</span>");
$("#myDiv").append($li1); 
//结果:<div id=”myDiv”><span>X</span></div>

创建属性节点

var $li1 = $("<span title=”111″>first</span>");
$("#myDIv").append($li1);
// 结果:<div id=”myDiv”><span title=”111″>first</span></div>

插入节点

插入到到最后:

$("#myDiv").append("<span></span>"); //往id为myDiv的元素插入span元素
$("<span></span>").appendTo("#myDiv"); //将span元素插入到id为myDiv的元素

插入到最前:

prepend
prependTo

插入到制定元素的后面去(同级):

after
insertAfter

插入到制定元素的前面去(同级):

before
insertBefore

删除节点

$("#myDiv").remove(); //删除id为myDiv的元素

清空节点

$("#myDiv").empty();//清除所有子元素
$("#myDiv").empty("span"); //清除所有span子元素

复制节点

//id为myDiv的元素内的span元素的click
$("#myDiv span").click( function(){

    //将span元素克隆,然后再添加到id为myDiv的元素内
    $(this).clone().appendTo("#myDiv");
    
    //如果clone传入true参数,表示同时复制事件
    $(this).clone(true).appendTo("#myDiv");
})

替换节点

//将所有p元素替换成后者
$("p").replaceWith("<strong> 您好</strong>"); 

//倒过来写,同上
$("<strong>您好</strong>").replaceAll("p"); 

包裹节点

//用b元素把所有strong元素单独包裹起来
$("strong").wrap("<b></b>"); 

//把b元素包裹在strong元素内
$("strong").wrapInner("<b></b>");

属性操作

//读
var txt = $("#myDiv").arrt("title"); 

//写
$("#myDiv").attr("title",”我是标题内容"); 

//多个属性同时写
$("#myDiv").attr({“title”:"我是标题内容", “alt”:"我还是标题"); 

//移除属性
$("#myDiv").removeArrt("alt");

样式操作

//读
var txt = $("#myDiv").arrt("class"); 

//写
$("#myDiv").attr("class",”myClass"); 

//追加样式
$("#myDiv").addClass("other"); 

//移除样式
$("#myDiv").removeClass("other"); 
$("#myDiv").removeClass("one two"); 
//移除所有样式
$("#myDiv").removeClass(); 

//切换样式
$("#myDiv").toggleClass("other"); 

//判断是否有other样式
$("#myDiv").hasClass("other"); 

设置和获取HTML、文本和值

//获取元素的HTML代码(js的innerHTML)
alert( $("#myDiv").html() ); 
//设置元素的HTML代码
$("#myDiv").html("<span>hello</span>"); 

//获取元素的文本内容(js的innerText)
alert( $("#myDiv").text() ); 
//设置元素的文本内容
$("#myDiv").text("hello"); 

//获取元素的value值(支持文本框、下拉框、单选框、复选框等)
alert( $("#myInput").val() );
//设置元素的value值(下拉框、单选框、复选框带有选中效果)
$("#myInput").val("hello");

遍历节点

//获取所有子元素(不考虑后代)
var $cList = $("#myDiv").children(); 
//获取下一个同辈元素
var $sNext = $("#myDiv").next(); 
//获取上一个同辈元素
var $sPrev = $("#myDiv").prev(); 
//获取所有同辈元素
var $sSibl = $("#myDiv").siblings();
//获取最近的匹配元素(向上查找,包括自己)
var $pClos = $("#myDiv").closest("span"); 

CSS-DOM操作

//读样式值
$("#myDiv").css("color"); 
//写样式值
$("#myDiv").css("color", “blue");
//多个写
$("#myDiv").css({“color”:"blue", “fontSize”:"12px"}); 

//设置元素的透明度
$("#myDiv").css("opacity", “0.5″);

//设置元素的高度
$("#myDiv").css("height"); //(单位:px)
$("#myDiv").height(); //无单位

//设置元素的宽度
$("#myDiv").css("width");//(单位:px)
$("#myDiv").width(); 

//元素在当前窗口的相对偏移量
var offset = $("#myDiv").offset();
alert( offset.top + “|” + offset.left );

//元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
var offset = $("#myDiv").position(); 
alert( offset.top + “|” + offset.left );

//获取元素的滚动条距离顶端的距离
$("#txtArea").scrollTop(); 
//...左侧...
$("#txtArea").scrollLeft();
//设置...顶端...
$("#txtArea").scrollTop(100); 
//设置...左侧...
$("#txtArea").scrollLeft(100);

jQuery的事件和动画

事件

加载DOM

  • ready,表示DOM加载完成(不包含图片等非文字媒体文件),
  • onload,表示包含图片等文件在内的所有元素都加载完成。

区别:

  • ready DOM就绪时就可以被调用,onload 需要所有元素完全加载后才执行;
  • ready可以有多个

简写:

  $(document).ready(function(){
      console.log("1");
  })
  //$(document)可以简写为$(),因此:
  $().ready(function(){
      console.log("2");
  })
  //还可以再次简化为:
  $(function(){
      console.log("3");
  })

一般控制样式的,比如图片大小控制放在onload 里面加载;
jS事件触发事件,可以在ready 里面加载;

事件绑定

可以通过bind()为元素绑定事件

bind( type, [data, ] fn );
type:指事件的类型:

  • blur(失去焦点)、
  • focus(获得焦点)、
  • load(加载完成)、
  • unload(销毁完成)、
  • resize(调整元素大小)、
  • scroll(滚动元素)、
  • click(单击元素事件)、
  • dbclick(双击元素事件)
  • mousedown(按下鼠标)、
  • mouseup(松开鼠标)、
  • mousemove(鼠标移过)、
  • mouseover(鼠标移入)、
  • mouseout(鼠标移出)、
  • mouseenter(鼠标进入)、
  • mouseleave(鼠标离开)、
  • change(值改变)、
  • select(下拉框索引改变)、
  • submit(提交按钮)、
  • keydown(键盘按下)、
  • keyup(键盘松开)、
  • keypress(键盘单击)、
  • error(异常)

data:指事件传递的属性值,event.data 额外传递给对象事件的值
fn:指绑定的处理函数,在此函数体内,$(this)指携带相应行为的DOM元素

简写:

$(function(){
    $("#panel h5.head").bind("mouseover",function(){
         $(this).next().show();
    }).bind("mouseout",function(){
         $(this).next().hide();
    })
})
//简写为:
$(function(){
    $("#panel h5.head").mouseover(function(){
        $(this).next().show();
    }).mouseout(function(){
        $(this).next().hide();
    })
})

合并事件

1、hover(enter,leave)
鼠标移入执行enter、移出事件执行leave

$("# myDiv").hover(function() {
    $(this).css("border", “1 px solid black");
    0
}, function() {
    $(this).css("border", “none");
});

2、toggle(fn1,fn2,…fnN)
鼠标每点击一次,执行一个函数,直到最后一个后重复

$("# myDiv").toggle(function() {
    $(this).css("border", “1 px solid black");
    0
}, function() {
    $(this).css("border", “none");
});

事件冒泡

1、冒泡
因为DOM具有层次结构,事件按照DOM的层次结构,像水泡一样不断向上直到顶端,所以称之为事件冒泡。

<body><div><span>AAAAAAA</span></div></body>

$("span").click(function(){ alert(‘span’); });
$("div").click(function(){ alert(‘div’); });
$("body").click(function(){ alert(‘body’); });

//点击“AAAAAAA”的时候会弹出:span、div、body

2、停止冒泡 event.stopPropagation()

$("span").click(function(event){
    alert(‘span click’);
    event.stopPropagation(); //停止冒泡
});

3、阻止默认行为 event.preventDefault()

$("#btnSubmit").click(function(event){
    event.preventDefault(); //相当于return false;
});

事件对象的属性

$("#myDiv").bind("click", function(event){ });
  • event.type() //返回:click
  • event.target() //获取当前元素
  • event.pageX()/event.pageY() //获取鼠标的X和Y坐标
  • event.which() //获取操作时按下的按键
  • event.metaKey() //获取操作时按下的功能键(ctrl/alt/shift)

移除事件

//移除元素的所有事件
$("#myDiv").unbind(); 
//移除制定类型的事件
$("#myDiv").unbind("click"); 
//移除制定名称的事件
$("#myDiv").unbind("click",fn1); 

一次性事件 one

事件执行一次后自动移除

$("#myDiv").one("click", [data], function(){
    alert("function1″);
});

模拟操作 trigger

比如刚进入页面就自动触发click事件,就是一个模拟用户操作。

$("#btn").trigger("click", [data]); //代码方式触发click事件
$("#btn").click(); //另一种简写方式

事件命名空间

一个元素可以同时绑定多个同样的事件,然后用命名空间加以区分。

$("#myDiv").bind("click.hello", function(){
    alert("function1″);
});
$("#myDiv").bind("click", function(){
    alert("function1″);
})
$("div").unbind("click"); //两个事件都被移除
$("div").unbind(".hello"); //只移除第一个
$("div").unbind("click!"); //只移除第二个(没命名空间的)

推荐阅读更多精彩内容

  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 15,765评论 18 501
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,020评论 0 2
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,010评论 0 8
  • 在早些时候我们曾经报导过 Music Room 将于下个月登陆 HTC Vive ,这款游戏可以让用户在虚拟世界内...
    sofa阅读 371评论 0 1
  • 宝儿,今天我们差一点要了对方,宝儿,谢谢你的忍耐,谢谢你心里对我的责任,说明你真的对我上心,你说怕毁了我们对方,谢...
    佳颖永远在一起阅读 132评论 0 0
  • 从上图的高飞龙式,慢慢地将身体前屈,进入低飞龙式。 2、如果后腿膝盖不适, 下方放上毯子, 小腿下垫上抱枕, 或脚...
    大海轻吻大鲨鱼_696c阅读 548评论 0 0