JQuery笔记
获取文本 text()
获取输入框中的值
.val()
获取样式 css('键' ,'值')
类的操作
(addclass,removeclass,hasclass,toggleclass)
单个类就写一个,多个用空格隔开,对所有类操作不写
show(ms,function),hide(ms,function),toggle(ms,function)//toggle是转换为另一种
选择器(>)只选择子代,(' ')选择所有后代,.equ()相等
滑入滑出Slidedown(ms,function),slideup(ms,function)
淡入淡出
fadein(ms,function)fadeout(ms,function)fadeToggle(ms,function)
fadeTo(ms,opacity)
动画
animate(prop,ms,easing,function)
参数1:对象,需要改变的属性
参数2:时间
easing:linear(迅速)swing(缓动)默认swing
function:回调函数可以写任何东西,比如再写个动画
停止动画:stop(是否清除队列,是否达到最终结果)默认(false,false)
动画中无法改变背景颜色需要对应插件来实现
插件:用来扩展功能的
网站:jq22.com用来下载插件
也可以给源码的网址
<案例:省市联动>插件使用流程:引入jq文件,引入插件流程,使用插件方法
ui:user interface用户界面 jQueryui是jQuery团队协作开发的ui插件,使用时注意引入css样式
插件开发:自己写的jQuery插件添加方法的两种途径:①静态方法:通过$.方法调用②通过对象的实例调用:通过jQuery.方法调用,如果需要链式编程记得返回jQuery对象
建立节点
原生js1.document.write 2.innerHtml 3.document.createElement
jQuery 1.html()无参时,获得内容;有参数时,把原来内容覆盖,标签会解析出来 2.$()写元素写在内存中需要追加(appand)
获得子节点
children(selector)
添加节点方式
appand:父元素.append(子元素)1.新建的在最后追加2.已经有的为剪切后在最后追加
pretend:同append只不过再最后追加
before:父元素.before(子元素)添加在父元素之前(剪切)
after:父元素.after(子元素)添加在父元素之后(剪切)
Appendto:子元素.appendTo()加在后面元素的最后
清空节点
Empty()
移除节点
需要被移除的节点.remove()
克隆
clone()
存在于内存中需要追加
True时,连事件一起克隆
False,不克隆事件
val()不给参数,获取表单的值,给参数就是设置
属性
获取attr(属性名称)如果没设置这个属性为undifined
设置attr(属性名称,属性值)有就是更改没有就是添加
移除remove(属性名称)
对于boolean型的属性,用prop()获取
阻止a标签跳转即为把click()返回false
宽高
Width(),height()没有padding
Innerwidth()innerheight()有padding
Outheight()outwidth()有margin,当设置为true时包含边框
Window.width() window.height()页面的宽高
offset和position
offset返回一个对象包含高和左,相对于ducoment的位置
position返回一个对象,相对于父元素
scroll滚动条
ScrollLeft ScrollTop设置元素内容被卷出去的高度或者宽度
Window.scrollLeft()等是指页面被卷曲出去的高度宽度
jQuery事件发展历程
1.简单绑定 不支持同时注册,不支持动态注册
2.bing注册,支持同时注册,不支持动态
3.delegate注册委托事件 支持同时注册,也支持动态注册(原理事件冒泡)
事件对象
包含此时按的键,事件发生的位置等信息
链式编程
jQuey方法返回的jQuery对象可以一直调用jQuery方法
其中jQuery方法中有一个end()方法,可以回到上一个状态
显式迭代
jQuery没有特殊说明,会进行隐式迭代,采用.each(index,element)对元素进行显式迭代
index表示元素集合的下标,element表示其中的元素
整个函数表示遍历集合中元素,对匹配元素进行某一操作
查看jQuery版本
jQuery.fn.jquery
jQuery.proptype.jQuery
$.fn.jquery
$.proptype.jquery
如果引入多个jquery版本,后面的$会把前面的$覆盖
多库共存
$.noConflict()把当前版本的$的控制权释放,返回值为现在的$,这一版本释放后,为它之前引入的jQuery库的$
如果已经由此版本的$写了许多代码可以这么改
(function($){代码}(_$))//自执行函数其中_$=$.noConflict即释放之前的$