这是根据老师的视频做的Jquery笔记,有哪些不足之处后续会不断修改完善的。
需要Jquery学习视频的话可以留言。(#^.^#)
上面是原有版本,下面是带有min的是压缩版本
注意:一般使用attr,因为各种情况都适用
移除属性:$(‘#btnShow’).removeAttr(‘value’);
val里什么也不写的话就是获取value属性的值,写东西的话,就是设置value属性的值
这需要注意的是:点击事件需要去掉原来的“on”,绑定是直接在括号中,直接一个function 就可以了。不需要写等号。
bind表示绑定,unbind就是解除绑定
这个显示出来的是2。这说明一个事件只支持注册一个处理程序,后者覆盖前者
这个先弹出的是1,然后弹出2。
因为dom的事件注册,一个事件只能注册一个处理函数,后者覆盖前者。而jquery的事件注册,支持多播,一个事件可以指定多个处理函数
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
下面的效率高,上面的是页面加载完成(如果有一张图片,那么图片也要加载完成)才能触发执行;下面的是所有的标签加载完成了就可以触发执行。就像下面的这个:
例如你有一张照片,是src指向的,上面的那个还没有下载好这张图片,就不能执行,而下面的加载好src就可以执行了。
两者区别:
上面的:
下面的:
-----------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
将当前点击的按钮的文本变成呜呜
this表示触发当前事件的dom对象
隐式迭代:自动地将数组中的每个元素都执行一遍操作(不需要我们去写,它内部就实现了)
当前:会将数组中的每个input进行click绑定
hover事件举例:
toggle事件举例:
------------------------------------------------------------------------------------------------------------------------
one事件举例:
----------------------------------------------------------------------------------------------------------------------
调用js成员,直接调就可以
加法计算器:
val是给控件的value属性赋值的
转移内容用text,不写参数表示获取里面的值,写的话就是设置里面的值
-------------------------------------------------------------------------------
隐式迭代:自动地将数组中的每个元素都执行一遍操作(不需要我们去写,它内部就实现了)
将jQuery对象转换为dom对象的方法:通过[下标]的形式返回dom对象
将dom对象转换为jQuery对象的方法:$(dom对象)
表示在前面去加(做父子)
放在div同级之前,之后(做兄弟)
清空所有子元素:empty()
复习一下移除属性怎么表示的:
举例:
移除属性:$(‘#btnShow’).removeAttr(‘value’);
省市联动:
键值对用for in
注意:在单引号里再写就是用双引号
-----------------------------------------------------------------------------------------------------------------------------
然后要想换一个省份,相应的城市,需要绑定数据,之前的城市移除
空格表示找所有的子集
>表示直接子元素,不包括后代子元素
+后面直接紧邻的一个同级元素
~之后的所有同级元素
注意:这里面的空格不是随便写的
筛选的方法:next()表示之后的元素(兄弟的,同级元素)
prev()表示之前的元素(兄弟的,同级元素)
nextAll表示之后的所有。
prevAll表示之前的所有。
siblings()表示构成兄弟,之前之后所有的
parent()表示父级。
call()表示子集。是直接子集。
下面是例子:
------------------------------------------------------------------------------------------------------
如果不传参数,就表示获取的值
设置多个样式: 用键值对集合
------------------------------------------------------------------------------------------------------------
都是P
链式编程:只查找一次,支持逐个使用方法
gt表示大于下标2的输出来,
lt
同理,奇偶也是一样(注意的就是下标是从0开始的)
案例:
.end恢复最近的一次链的破坏,就一次,要想恢复两次的话,需要再.end
重点
基本选择器(#,标签,.(类))
属性(attr,text,html,val)
事件(click,ready)
样式操作:(css)
$.each(数组或者集合,fun(index,item))
如果是数组的话,第一个参数表示索引,第二个参数表示元素
如果是json对象或者是集合的话,前面是键,后面表示是值
了解:
层级选择器(空格(所有子集),>(直接子集),+(后面的紧邻的一个兄弟),~(后边的所有)),next(),prev(),sibling(),parent(),children()
链式方程:调完一个对象之后,不用重新调用,接着打点就可以使用,就是一个点完之后再打点
(需要注意的就是:层级选择器,过滤选择器会对原有的链进行破坏,破坏之后可以用end方法恢复最近的一次破坏。如果破坏了两次,就需要连着调用两次)
隐式迭代就是:所有的方法会在选择到的每个对象上都去执行一遍
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Input[id]就是找有id的
:enabled :disabled表示所有被启用的控件,所有禁用的控件
:系列可以帮助快速选择
例如:我想选按钮 :button
我想选文本框:text
checked 与radio,checkbox配合使用
selected 与select
表示可以做成多选的形式
拿到按钮,注册点击事件
常规下:select 下面就只有 option
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------
弱类型特点 取非(全取全消)
----------------------------------------------------------------------------------
:checked针对于radio checkbox
: selected针对于 select
:enabled表示所有被启用的控件
:disabled表示所有被禁用的控件
------------------------------------------------------------------------
做删除选中项的功能
-------------------------------------------------------------------------------------
上面那个方法也可以直接找祖宗,然后从祖宗里面找tr
parents前面有多少都找
parent是寻找上一级
方法中可以接收参数
清除文本框中的数据
修改:
将Dom对象转为jQuery对象
this---->$(this)
将jQuery对象转为Dom对象(jQuery对象的本质是DOM对象的数组)
$(‘#msgTxt’)------>$(‘#msgTxt’)[0]
setSelectionRange(1, 7);方法进行选择,不包含7
em这个效果是让字体倾斜
点击好友时:只出现一个div列表,点击好友时只@一次
One表示只执行一次事件。在对象上执行一次指定事件
-------------------------------------------------------------------------------------------------------------------------
属性选择器:
表单选择器: :button
方法的调用及this
从当前状态到目标状态所经历的一定时间形成的动画
动画支持链式编程,他会先播放第一个动画,放完后才播放第二个动画
:animated是获取动画,stop是停止当前动画(停止当前动画,但是后面的一个动画不会停下来,会继续播)
--------------------------------------------------------------------------------------------------------------
margin指的是我和你之间的距离
padding是指内部距离
指的就是这个事务组中的索引
根据索引我们就能判断了
或者:
根据id判断也是一样的效果
(动态导航栏)
图片转换:(智能轮播图)
调用定时器setinterval
要想让点击的时候就显示这一张图片,其他的不动,需要清除一下播放器
再移开之后重新播放
自己按的时候发生颜色变化
自己播的时候背景颜色发生变化
可变的:图片内容,个数,位置,显示效果
第三方插件
先引入jQuery插件,再引入第三方插件
-----------------------------------------------------------------------------------------------------------------------
先引样式,再引jQuery,再引插件
调用方法
参照人家的进行修改
注意大小写,
用法:
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
注意键值对,键可以不用引号引住,但是值需要用引号引住,否则没效果
---------------------------------------------------------------------------------------------------
总结:
动画:show()与hide(),slideUp与slideDown,fadeOut与fadeIn()
自定义动画:animate(),第一个参数是自定义动画的样式,第二个参数是自定义动画的时间
第三方插件cookie:$.cookie(键,值)
放大镜: $(‘’).jqzoom();
Ui,easyUI