jq 笔记

http://bbs.miaov.com/forum.php?mod=forumdisplay&fid=40

2014.10.10
jquery 2.0 不兼容ie 6 7 8,以上更适合做移动端开发,代码更少

1.js对于集合 document.getElementByTagName(‘div‘)[0] 只有一个div的情况

2.$==jQuery 用jQuery是为了防止冲突 起了两个这样的名字

3.jq () 中参数问题 html() css()等
()没有参数就是获取,有参数就是赋值,设置,参数的个数决定
常用的设置获取赋值方法有attr() val()

4.多元素进行取值只能取到第一个元素的值

5.***** 属性选择:
$(‘input[value=123]‘) 也可以写成$(‘input[class="123 456"]‘)两个的时候用""
$(‘input[value^=123]‘)起始位
$(‘input[value$=123]‘)末位
$(‘input[value*=123]‘)通配

6.链式操作基本都是设置

7.命名规范,如果是jq对象就用$开头 例如 var $oDiv=$("#div1") 原生的就直接不用$ 例如 oDiv=document.getElementById("#div1")

8.jq的容错性比较好,当元素不存在的时候 进行设置也不会报错,同时对于我们开发找出问题也很麻烦
$(‘#span‘).html() $("#span")不存在也不会报错

9.集合的长度 .size() * 相当于原生的 length *****
$("div").size() 等于$("div").length
jq的集合 即使只有一个的时候 也有length, 原生的只有一个元素的情况没有length
$("#div1").length

10.***class操作
addClass(‘box2 box3‘)
removeClass(‘box2 box3‘)
toggleClass(‘box2‘) 智能判断添加删除class

*****智能设置显示隐藏 show() hide()

var oBtn=true
$(‘input‘).click(function(){
if(oBtn){
$("div").hide()
}else{
$("div").show()
}
oBtn=!oBtn //条件走完了改变条件 实现点击显示隐藏

})

20.兄弟节点 prev() next() prevAll("筛选元素")上边所有的 nextAll("筛选元素") siblings("h2")所有的兄弟节点

------------------------------------------------------------------------------------------------
10.12

1.slice(起始位置,结束为止) 截取集合
如果只有一个 参数就是截取起始位置到最后

2.children() 子元素 ,不能获取孙子及以后的节点 | 可接受过滤筛选的参数

3.find()查找的范围更加广泛,使用更加频繁| 如果不用find() 可以直接用 $("ul p")这种方法来找子节点 | 但是推荐用find(),因为性能更高,因为css选择器的方法是从右 到左来找的

4.parent() 父节点 | parents()所有祖先节点,父节点以及以上的

5.*****closest() 找指定的最近的一个祖先元素(包括自身),必须要接收一个参数(只能选到唯一的元素),离他最近的元素的条件

6.创建元素 | js document.createElement("div") | jq $("<div>") $(‘<div id="div1"></div>‘)

7.append() 把元素添加到指定的节点里面的最后 在里边 n. A.append(B) A里面的最后是B

8.prepend() 把元素添加到指定的节点里面的最前面 在里边

9.before() 把元素添加到指定的节点的前面 在外边

10.after() 把元素添加到指定的节点的后面 在外边

11.appendTo() v. A.appendTo(B) 把A添加到B的最后
n. 和 v.的区别是对后续操作的影响不一样

12.remove() 原生js是removeChild(oDiv)

13.clone()节点的复制操作 A.clone() | 参数true 会克隆操作事件

14.index()
第一种 方法:兄弟中的排行 ,索引值
第二种方法:筛选后的排行,针对非兄弟关系的节点 $("#span1").index("span") 首先找到#span1 ,然后在所有的span中排序,也可以倒过来写 $(‘span‘).index($(‘#span1‘))

15.each(function(i,elem){ $(elem).html(i) ; return false}) i索引值 elem 操作的元素,就是this,原生的元素|return false 跳出 相当于js的break

16.wrap()

-----------------------------------------------------------------------------------------------------------------------
10.16

1.jq获取元素的尺寸 width() height()
获取:
width() --->width
innerWidth() --->width+padding innerHeight()同理
outerWidth() --->width+padding+border outerHeight()同理
outerWidth(true) --->width+padding+border+margin

**获取和设置都是组合

设置:
width(200)
outerWidth(200,true)--->width:200-padding-border-margin

js获取尺寸 获取不到隐藏元素的尺寸,jq可以获取隐藏元素的尺寸
obj.offsetWidth --->如果obj是display="none"的话 是获取不到它的尺寸的

jq获取可视区的尺寸
$(window).height() ----->jq可视区的尺寸
$(document).height()----->页面的高

2.滚动距离:
获取:
scrollTop()
$(document).scrollTop()---->整个页面的滚动距离
$(document).scrollTop()=$(document).height()-$(window).height()

$(‘#div1‘).scrollTop() --->获取元素的滚动距离

设置:
$(document).scrollTop(300) //设置页面的滚动距离300
scrollLeft()

3.元素距离
offset().left --->元素距离屏幕左边的距离,相对于整个页面的,不是可视区的,不管有没有定位
offset().top --->元素距离屏幕上边的距离,相对于整个页面的,不是可视区的,不管有没有定位

position().left--->距离到有定位的祖先节点,不认margin值

js 的 offsetLeft 定位到祖先节点

offsetParent()--> 获取有定位的祖先节点,相对定位的父级
通常想获取 内部元素距离 父亲节点的距离 可通过 obj.offsetParent().offset().left-obj.offset() 来获取

$(window).scroll()

4.jq事件
on(‘click mouseover‘,function(){})-->可以同时绑定多个事件

off()取消元素上的所有事件,off(‘mouseover‘)可设置过滤条件

5.ev事件
ev.pageX 鼠标的横坐标,相对于整个页面
ev.pageY

ev.clientX 鼠标相对于可视区的坐标
ev.clientX

which 键盘的键值
obj.keydown.function(ev){
ev.which
}

ev.target 目标元素,事件源,鼠标点在哪里就弹出什么
$(document).click(function(ev){
alert( ev.target );弹出的是当前元素,不是window
})

ev.stopPropagation()--->阻止事件冒泡

$(document).contextmenu(function(ev){
ev.preventDefault()-->阻止鼠标右键阻止默认事件
})

return false 阻止冒泡和默认事件

6.$(‘ul‘).delegate(‘li‘,‘click‘,function(ev){
$(this)--->li
$(ev.delegateTarget) 指的是委托人 $(‘ul‘)

})
delegate()对于动态添加的元素同样适用

取消委托绑定 undelegate() 取消的是委托人身上的事件
$(ev.delegateTarget).undelegate()

7.$.isFunction()判断是否是函数
$.isNumeric()判断是否是数字
$.isArray()判断是否是数组
$.isWindow() var a=window; alert( $.isWindow(a) ) -->true
$.isEmptyObject() var a={}; alert( $.isEmptyObject(a) ) -->true
$.isPlainObject() 对象自变量 http://www.cnblogs.com/snandy/archive/2011/03/14/1982016.html
---------------------------------------------------------------------------------------------------
10.19

1.运动 normal 400毫秒
fast 200毫秒
slow 600毫秒

show(‘normal‘) = show(400)

2.toggle()
fadeToggle()
slideToggle()
fadeIn() 淡入
fadeOut() 淡出
slideDown()
slideUp()

3.animate(
{width:300,height:400}, // 第一个参数{} 去设置样式属性和值
2000, // 第二个参数 时间,默认400
‘linear‘, //第三个参数运动形式 swing(默认缓冲,慢快慢),linear(匀速)
function(){} //第四个参数 函数function() 运动结束的回调
)

width:‘+=300‘ 第一个参数可以数值运算,每次点击都加300px

第二种写法:配置参数step animate({参数一},{参数2,参数3,参数4})

animate({width:300},{
duration:1000,
easing:‘linear‘,
complete:function(){
},
step:function(a,b){//检测定时器的每次变化
console.log(b.pos) //运动过程中的比例值 0-1
}
})

4.delay() 延迟
animate({width:300},1000).delay(1000).animate({height:300},1000)

5.stop()默认停止当前运动,清空前面的队列
stop(true) 停止所有的
stop(true,true) 停止到指定目标点(当前的)
finish() 所有运动停止到指定目标点

6.工具方法
$.parseJSON() 把json类型的字符串转为真正的json安全性好,只能解析json类型的字符串,要严格的json key值和value值要加"" var aaa= ‘{"a":"111","b":"222"}‘; $.parseJSON(aaa)
$.parseHTML() 转化html形式的字符串为Dom节点,然后把dom节点放到数组中 var aaa="<div>div</div><span>span</span>" var bbb=$.parseHTML(aaa) bbb是个数组[div,span]
$.parseXML()

$.ajax() //提交数据,查询数据
url
success
type
data:{"username":obj.val()}
error
dataType:‘json‘, //程序会自动将后端返回内容转化为json类型,如果不规定,则在success函数中通过 $.parseJason()方法来转
async:false //同步,先走完一个再走后面的,默认是异步的

10.26 第六课
1.清空内容
obj.html(‘‘)
obj.empty()

2.删除节点
obj.remove()
obj.detach()

时间: 2024-10-07 01:39:33

jq 笔记的相关文章

js jq 笔记小结

Js第一课   1.vs新建步骤 文件——新建项目——web——空白web应用程序——取名.位置.确定——此时软件会自动生成一个sln文件(解决方案),一解决方案下面可以有多个项目. 点击项目——新建文件夹css和js和image——新建html页面取名demo1 (推荐设置:工具——选项——可以设置下字体和颜色:文本编辑器——把常用的几种语言设上行号颜色提示) 2.什么是js JavaScript是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScr

JQ笔记-加强版

Query初级 一.介绍.基本写法 什么是JQ: 一个优秀的JS库,大型开发必备 JQ的好处: 简化JS的复杂操作 不再需要关心兼容性 提供大量实用方法 如何学习JQ: www.jquery.com JQ只是辅助工具,要正确面对 需要分阶段学习 JQ设计思想: 选择网页元素 模拟CSS选择元素 独有表达式选择 多种筛选方法 JQ写法 : 方法函数化 $(function(){ //var oDiv = $('#div1'); $('#div1').click(function(){ alert(

JQ笔记之选择器

用JQ有一段时间了,今天对JQ的一些知识进行一些总结. 首先在JQ中分为几大模块:选择器,属性/CSS,操作,遍历,事件,效果,Ajax,还有核心. 一.选择器 1.基本选择器 .class  用法$(".class") element 用法 $("element") #id    用法  $("#id") Selector1,selectorN  用法 $("Selector1,selectorN") 2.层级选择器 par

jq 笔记大全一

1.页面重新加载 window.location.reload() 2.创建一个div标签, $("<div>") 3. DOM对像直接转为jq 方法用: 比如value 是一个dom 对像, 转为jq方法是 $(value) 4. 如果判断一个dom 对像?? 例:如果一个div 页面提示:htmldivElement 5.一个元素的偏移的方法: offset() 里面有两个方法 left() 和top() 6.height() .widht() 等一些方法:  后面小括

JQ笔记

参数形式$("input:text",document.forms[0])选择form[0]所有input=text$("<p>123</p>")直接对字符串标签操作$(document.body)直接对标签操作$(function(){})直接操作函数 each(callback)$("ul").each({function(index){ this.li.html("xxx")}}) get(i)$

整理版jq 复习贴子

1绝对定位(abs)与相对定位(relative) 区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把 其它的层遮罩住 绝对定位就是的参照位置就不像相对那样是自己了 至于是哪个 就看它的上级或上上级有没有定位了 也就是有没有position:relative 或position:fixed 等吧 当要绝对定位的层设好要参照位置的层后 就可以用top left这些来定位置了 如果它的上级或上上级都没定位的话就 会根据body的位置来定位了

【笔记】.Net~逆天自学笔记-HTML+CSS+JS + JQ +Dom

HTML+CSS+JS+JQ+Dom参考集合:Library 真正的HTML(图片 | 笔记) HTML不是为了页面而存在,以后会更多的用在页面语意上,所有为了控制外观的都让css来操作,html5也是这样的 我眼中的CSS(图片|笔记|文档)JavaScriptBase(图片|笔记|源码)JavaScript Dom等

【JQ成长笔记】jQuery Validate验证插件

validate是一款很好的jq插件,提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 需要引入的js 1 <script type="text/javascript" src="../../scripts/jquery-1.3.1.js&qu

【JQ成长笔记】jQuery cookie的使用

jquery cookie挺好用的.简单实在.菜鸟都能用得上..额.文笔不好不好..咳咳.. 先来看看jq.cookie的aip 写入cookie $.cookie("this-cookie","this-value",{ expires:10,//有效日期 path:"/",//cookie的路 径 domanin: //cookie的域名 secure:true //true,cookie的传输会要求一个安全协议,否则反之 }); 读取coo