jquery学习笔记

1.jq中html(),text(),val()的区别

html()方法获取或设置当前jq对象的html内容
text()方法和.html()方法类似，不过只会获取文本信息，会过滤html代码
val()方法则是获取表单标签的value值，仅对表单有效

2.关于版本的那些坑

1. 对于iE6,7,8的支持，只在jq2.x以下才支持，这也许是2和1的最大区别了
2. 用于事件绑定的on方法只有在jq1.7以上才能使用

3.关于jquery的入口函数

//入口函数是为了防止在页面未加载完的情况下执行js，入口函数有两种写法，推荐简写

<script language="javascript">

//js原生的代码
window.onload=function(){
.....code.....
}

//jq未简写
$(document).ready(function(){
....code....
});

//jq简写
$(function(){
.....code...
});

</script>

4.jquery的选择器

$(".dvi1"),$("#div1"),$("div"),$("*")   //基本选择器，直接选标签
空格，>，+,~ //成绩选择器，子代，直接子代和朋友
:first、:last、:eq(index)、:lt(index)、:gt(index)、:odd、:even    //过滤选择器，指定索引查找
.eq(index)、.children()、.parent()、.siblings()、.find()     //筛选选择器，放在外边的方法，可以不加索引

5.jquery中的动画

.show() - .hide();  //显示和隐藏
.fadeIn() - .fadeOut() - .fadeTo();     //淡入，淡出，设置不透明度
.slideDown() - .slideUp() - .slideToggle() - .animate() ;   //拉出，拉入，切换，自定义

6.jquery对dom的操作

.css()  //设置css样式，多个时传json，可以传函数
.addClass() - .removeClass() - .toggleClass();  //修改元素的类
.attr() - .removeAttr() ;   //获取和设置元素的属性，单个为获取，多个为设置
.val() - .html() - text() ;     //获取或设置元素的内容

7.JQuery对象和DOM对象之间的相互转换

jq转dom

var dom = $jqobj[0];   //通过数组转,jq对象本身就说一个数组
var dom = $jqobj.get(0);   //通过get()方法转

dom转jq

var dom = document.getElementById("id123");     //获取到dom对象
var $jqobj = $(dom);     //dom转jquery，也可以通过选择器转

8.添加节点

var $li_1 = $("<li>苹果</li>");   //直接通过标签生成一个jq对象，方便节点操作
$("ul").append($li_1);     //在ul下追加一个节点到末尾，下级
$("ul").prepend($li_1); //在ul下追加一个节点到首部，下级
$("p").before("<b>你好</b>");    //在p标签前面加b标签，同级
$("p").after("<b>你好</b>"); //在p标签后面加a标签，同级

9.删除节点

var $li = $("ul li:eq(1)").remove();  //删除ul下第二个li，并获取删除的内容
$("ul").append($li);   //将删除的内容添加到ul中(最后);
var $li = $("ul li:eq(1)").detach();  //删除节点，但是不删除绑定的事件，这点是和remove本质区别，还原节点可用
var $li = $("ul").empty();    //清空子代节点

10.事件绑定

bind(); //所有版本可用，1.7之后推荐用on代替

$(selector).bind("click",data,function);  //单个事件处理
$(selector).bind("click dbclick mouseout",data,function);  //多个事件绑定一个函数
$(selector).bind({event1:function, event2:function, ...}); //多个事件绑定多个函数

delegate(); //父类委托，1.4.2及以上才能用

$(selector).delegate(childselector,"click",data,function); //单个事件绑定
$(selector).delegate(childselector,"click dbclick mouseout",data,function);    //事件绑定单个函数
$(selector).delegate(childselector,{event1:function, event2:function, ...}); //多事件多函数绑定

on();  //官方强力推荐，1.7级以后的版本可以使用,可以替代前面两种

$(selector).on(event,childselector,data,function); //单事件处理
$(selector).on("click dbclick mouseout",childseletor,data,function); //多事件，单个函数
$(selector).on({event1:function, event2:function, ...},childselector);　//多时间多函数

11.合成事件

$("button").hover(alert('别碰我'),alert('不要走')); //设置元素的hover事件，其它标签也可以像a标签一样了

$('button').click(function ()  //单击button，h1隐藏显示切换
{
$("h1")toggle();
});

12.隐私迭代

$(".comment li").text("迭代");   //没有表明内部的循环逻辑

13. map函数(需要返回值的遍历)

* $.map(arry,function(object,index){})  *返回一个新的数组*
* var arry = $("li").map(function(index, element){}) *注意参数的顺序是反的*

var newArr = $.map($("li"), function(i, e) {
return $(e).text() + i;//每一项返回的结果组成新数组
});

var newArr = $("li").map(function(elem, index){
console.log("elem:" + elem);
console.log("index:" + index);
retrun index;
});

14.each函数 (不需要返回值的遍历)

* 全局的
* $.each(array, function(index, object){})
*
* $("li").each(function(index, element){} )
* 参数的顺序是一致的。

例如：
$( "li" ).each(function() {
$( this ).addClass( "foo" );
});

$( "li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});

$( "div" ).each(function( index, element ) {});