jQuery记录之jquery入门学习笔记

发布时间:2020-07-02编辑:脚本学堂
本文介绍了jquery学习的一些入门知识,jquery对象与常用方法,需要的朋友参考下。

第一部分,jquery入门知识。

1,隐式迭代(一般不需要for循环遍历dom对象) 
2,jQuery1.x支持低版本和非标准浏览器 
a) 谷歌CDN: http://www.google-jquery-cdn.com/ 
b) 百度CDN:http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs 
c) 微软CDN:http://msdn.microsoft.com/zh-cn/library/ee517318.aspx 
d) 新浪CDN:http://sae.sina.com.cn/?m=devcenter&catId=147 
注意:优先引入CDN上的jquery,如果失效再引入本地的jquery,引入必须在head标签里。 

3,jQuery对象转换为Dom对象的两种方法[index]或get(index) 
Dom对象转换为jQuery对象只需要用$()把Dom对象包装起来 
length、toString等等是公用的 

4,val()、html()、click() 

5,jQuery库和其他库共存的两种办法(即释放$权限) 
jQuery.noConflict(); 
alert("这是prototype弹出的:"+$F('a')); 
alert("这是jQuery弹出的:"+jQuery('#a').val()); 
率先引入jQuery库,还有后面的$换为jQuery 
<script src="jquery.js"></script> 
<script src="prototype.js"></script> 
选择器 
css中div>a选择div下的一级子元素,低版本浏览器不兼容,但jQuery(‘div>a’)却不会存在兼容性的问题! 
$(“body *”) 
div+p选择div的下一个兄弟相当于next()方法 
div~p选择div的后面的所有兄弟节点   相当于nextAll()方法 
基本过滤选择器 
p:first  第一个p 
p  :first     p元素的所有子孙元素的第一个 
:not()、:even、:odd、:eq()、:gt(2)大于2的下标、:lt(2)小于2的下标、:animated 
内容过滤选择器 
:contains()选取含有指定文本内容的元素 
:has()选择含有指定标签(元素)的元素 
:empty选择不包含子元素或文本的空元素 
:parent选择含有子元素或文本的元素 
可见性选择器 
:hidden选取所有不可见元素 
:visible选取所有可见元素    例如:$(‘div:hidden’)选取不可见的div 
注意:opacity:0或visibility:hidden虽然不可见但都占据空间用所以:hidden是选择不到的 
属性选择器 
$(“div[title=js]”)选取有属性title且属性名为js的div元素(属性不一定是title,可以自定义的) 
$(“div[title]”)选取有属性为title的元素,而不论属性名如何 
子元素过滤选择器 
:first-child选择父元素第一个子元素 
:last-child选择父元素最后一个子元素 
:only-child选择父元素只包含一个子元素的子元素  例如$(“div p:only-child”) 
$(“div p:nth-child(2n)”)注意:索引从1开始 
表单元素选择器 
:input选择所有表单元素包括textarea、select等 
:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden等 
$(“input:disabled”)或$(“input[disableddisabled=disabled]”)选择不能修改的表单元素 
$(“select option[selectedselected=selected]”)或$(“select option:selected”) 
 
$('p').eq(0).css('background','red'); 
$('p:eq(0)').css('background','green'); 
$('p').filter(":odd").css('background','red');//参数也可为类名 
$('p').first().css('background','red'); 
 
$('p').click(function(){ 
if($(this).is('.box'))//如果类型为box则...... 

   $(this).css('background','red'); 

}); 
 
$('p').not(':first').css('background','green');//除去第一个不加样式 
$('p').slice(1,5).css('background','red');//第一个开始第五个结束,包一不包五 
遍历查找 
$(“#wrap”).children().not(“div”)选取id为wrap的子元素不包括div 
$(“#wrap”).children(‘p’)选取id为wrap的子元素仅包括p 
parent() 
parents()和parentsUntil()是一样的 
offsetParent()返回父元素中第一个其position设为relative或absolute的元素,仅指可见元素 
next()、nextAll()、prev()、prevAll() 
siblings()除本身之外的所有兄弟元素 
注意:只要是返回一组元素的都可以加参数 
.end()返回上一级匹配的节点 
.addBack()与end一样,只不过位置不同 
分别弹出每个input的值each() 
$(function(){ 
$('input').each(function(){ 
alert($(this).val()); 
});}); 
[]特殊字符 
$("#tab1 tr:even").css("background","red"); 
$("#tab1 tr:odd").css("background","green"); 
合并 
$("#tab1 tr").filter(":even").css("background","red").end(). 
filter(":odd").css("background","green"); 

选择器的优化 
1.优先使用id选择器 
2.在class选择器前添加标签名 
3.采用find(),而不使用上下文查找 
4.强大的链式操作比缓存更快 
5.从左值右的模型 

Dom操作 
创建(两种方式) 
var newElement='<div>我是用字符串创建的div标签</div>'; 
var newElement=$('<div>我是$符创建的div标签</div>'); 
$('body').append(newElement); 
内部插入 
后插入的两种方法append和appendTo 
 

复制代码 代码示例:
var str=$("<strong>大家好,我是后来插入的</strong>"); 
//$("p").append(str); 
str.appendTo($("p")); 

前插入的两种方法prepend和prependTo 
 

复制代码 代码示例:
//$("p").prepend(str); 
str.prependTo($("p")); 

外部插入 
后插入的两种方法after和insertAfter 
 

复制代码 代码示例:
//$("p").after(str); 
str.insertAfter($('p')); 
 

前插入的两种方法before和insertBefore 
包裹节点 
wrap()讲所有匹配元素单独包裹 
wrapAll()将所有匹配元素用一个元素包裹 
WrapInner讲所有匹配的元素的子内容用其他标签包裹 
删除节点 
remove()、empty()清除标签及内容,但仍占用位置 
unwrap()仅删除父元素(不包括子元素本身及父元素的内容即不包括父元素的子元素) 
复制节点 
Clone克隆标签及及标签包含的事件注意:标签包含的事件要写在克隆事件的后面或写成clone(true) 
 

复制代码 代码示例:
$("a").click(function(){ alert("hello boy!"); }); 
var newA=$("a").clone(true); 
$("body").append(newA); 

替换标签 
replaceWith与replaceAll 
 

复制代码 代码示例:
$("a").replaceWith("<p>我是p标签</p>"); 
$("<p>我是p标签</p>").replaceAll($("a")); 

操作dom属性 
attr()获取或添加或修改属性值   prop 
removeAttr()删除属性值   removeProp 
样式操作 
addClass()添加样式(可以连续用两个addClass,也可以用一个,Class间用空格隔开) 
removeClass()移除样式 
toggleClass()切换样式(有和无之间切换,上面两个的交换) 
hasClass()判断是否有样式,返回布尔值 
css()设置匹配元素的css(行内样式) 
height()获取高度 
innerHeight()获取包括padding的高度 
outerHeight(l)获取包括border的高度 
outerHeight(true)获取包括margin的高度 
width() 
innerWidth() 
outerWidth(bool) 
offset()使用方法:先获取offset对象,然后left、top等   相对于文档 与原生js不同 
position()相对于有定位的父级 
设置或获取节点内的元素(html和文本) 
text()获取或设置匹配元素的文本节点(无参为获取,有参则设置) 
html()获取匹配元素的dom节点或文本节点 
查看、修改和删除实例 
children指的是一级子元素 
关于z-index与position的关系 
事件和对象 
$.holdReady(bool)暂停或恢复ready事件       jQuery的工具函数 
事件 
click() 
dblclick()双击鼠标左键 
focusin()获得焦点事件,可作用于父爷级 
focusout()失去焦点事件,可作用于父级 
mouseenter、mouseleave可以阻止冒泡的 
键盘事件:keydown、keyup、keypress 
绑定和移除事件:bind()、unbind、on、off、one执行一次事件,然后销毁该事件、delegate.... 
 

复制代码 代码示例:
$("body").delegate("p","click",function(){ 
$(this).append("<p>我是新增加的p标签</p>");//新增标签也有绑定事件,相当于on 
}); 
$("p").bind("click",function(){ 
$("body").append("<p>我是新增加的p标签</p>");//新增标签没有绑定事件 
}); 
 

事件命名空间 
click点命名空间 
event.preventDefault()阻止浏览器默认的行为 
动画 
基础动画、渐变动画、滑动动画、自定义动画、动画队列 
obj.hide(300)、obj.hide(“fast/slow/normal”) 
模拟toggle 
 

复制代码 代码示例:
$("a").click(function(){ 
if($("p").is(":visible")) 

$("p").hide(300); 

else 

$("p").show(300); 

}); 

div里面的文字自动换行 
white-space:normal; word-break:break-all; overflow:hidden; 
 
fadeIn()自动显示   透明度从0变到100 
fadeOut自动隐藏 
fadeTo(执行到目标所需的时间,0.2,回调函数

slideDown()、slideUp()、slideToggle() 
 
animate({...},所需时间,回调函数) 
 
动画队列 
stop()、dequeue()、finish()、delay() 
hover(函数一,函数二) 
 

复制代码 代码示例:
$("a").hover(function(){ 
$("#div1").stop(false,true).slideDown(); 
},function(){ 
$("#div1").stop(false,true).slideUp(); 
}); 
 

表格搜索实例 
$("#tab1 tr:not('#header')").hide().filter(":contains('"+oT+"')").show(); 
微博发布限制字数 
注意:关于val()和text()的区别? 
jQuery中的Ajax 
 

复制代码 代码示例:
jqueryDom.load(); 
$.get(); 
$.post(); 
$.ajax(); 
$(".load").load("ccc.html");