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">
window.onload=function(){
.....code.....
}
$(document).ready(function(){
....code....
});
$(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()
.addClass() - .removeClass() - .toggleClass();
.attr() - .removeAttr() ;
.val() - .html() - text() ;
7.JQuery对象和DOM对象之间的相互转换
jq转dom
var dom = $jqobj[0];
var dom = $jqobj.get(0);
dom转jq
var dom = document.getElementById("id123");
var $jqobj = $(dom);
8.添加节点
var $li_1 = $("<li>苹果</li>");
$("ul").append($li_1);
$("ul").prepend($li_1);
$("p").before("<b>你好</b>");
$("p").after("<b>你好</b>");
9.删除节点
var $li = $("ul li:eq(1)").remove();
$("ul").append($li);
var $li = $("ul li:eq(1)").detach();
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('不要走'));
$('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 ) {});