标签： 我的笔记

认识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选择器

选择器

基本选择器

层次选择器

过滤选择器（index从0开始）

基本过滤选择器

子元素过滤选择器（index从1开始）

内容过滤选择器

可见性选择器

属性过滤选择器

表单对象属性选择器

表单选择器

选择器的一些注意事项

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

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!"); //只移除第二个（没命名空间的）