jQuery0330.docx
- 文档编号:30221187
- 上传时间:2023-08-07
- 格式:DOCX
- 页数:25
- 大小:2.12MB
jQuery0330.docx
《jQuery0330.docx》由会员分享,可在线阅读,更多相关《jQuery0330.docx(25页珍藏版)》请在冰豆网上搜索。
jQuery0330
1.昨天内容回顾
1.各种选择器使用
a)基本选择器
$(“#id”)$(“tag标签”)$(“.class”)$(“*”)$(“s1,s2,s3...”)
b)层次选择器
$(s1s2)
$(s1>s2)
$(s1+s2)
$(s1~s2)
c)并且(过滤)选择器
:
first:
last
:
eq(index):
gt(index):
lt(index)
:
even:
odd
:
not(selector):
header
$(s1s2s3)
并且关系:
普通选择器、并且过滤选择器都可以构成并且关系,注意不要有歧义产生。
$(“li:
first”)
$(“li.apple”)
$(“li:
odd:
gt
(1)”)
d)内容过滤选择器
:
contains(text):
empty:
has(selector):
parent
e)表单域选中选择器
:
checked--------->checkbox/radio
:
selected--------->option
2.属性操作
$().attr(name)
$().attr(name,value);
$().attr(name,function)
$().attr(json对象);
$().removeAttr(name)
3.各种快捷操作(class、包含内容、css、复选框/下拉列表/单选按钮、复选框全选/反选/全不选)
a)class
addClass()removeClass()toggleClass(name)
b)包含内容
html([value])text([value])
c)css()操作样式
d)复选框/下拉列表/单选按钮
$(复选框/下拉列表/单选按钮).val([value值元素,value值元素。
。
])
$(下拉列表).val();
$(选中的单选按钮).val();
e)复选框选中、不选中
$().attr(‘checked’,true/false);
二.作业
作业:
1.利用过滤选择器实现如下效果
2.利用样式操作(height()、width())设置动画效果
3.制作一个“复选框”控制其他复选框的选中、不选中情况
三.$符号的由来
$(‘div’)$(‘.apple’)$(‘*’)等等。
$符号就是一个函数,函数名称为”$”符号而已。
也可以使用jQuery符号。
使用jquery过程中用到的$符号,其在jquer框架内部体现为是函数,其和jQuery关键字互为别名。
四.jquery对象与dom对象关系
jquery对象:
$(‘li’)$(‘.apple’)等选择器使用返回的信息就是jquery对象
dom对象:
document.getElementById()
document.getElementsByTagName();
1.jquery对象和dom对象互相调用对方的成员
jquery对象与dom对象互相调用对方成员失败了
原因:
它们不是平等关系,导致其成员也有层次划分。
jquery对象是包含dom对象的
2.jquery对象如何封装的dom对象
dom对象就是jquery对象的数组组成部分
通过上图,我们看到dom对象和jquery对象做合并,dom对象是jquery对象的数组组成部分。
3.jquery对象和dom对象的转化
3.1jquery对象-----》dom对象:
$()[下标]
3.2dom对象-----》jquery对象:
$(dom对象)
五.jquery框架对象分析
jquery框架对象类型:
jquery对象和$对象
①jquery对象就是各种选择器创建出来的对象
②$对象就是函数对象
1.jquery对象
2.$函数对象
$函数对象可以调用的许多成员也是通过extend复制继承过来的
$.get()$.post()$.ajax()
以上无论是jquery对象还是$对象,他们98%以上的成员都是通过各自的extend复制继承过来的。
六.遍历方法
each()方法:
$.each(数组/对象,function处理);//$对象调用的
$(选择器).each(function处理);//jquery对象调用的
总结:
1.$符号的由来
2.jquery对象和dom对象的关系
dom对象是jquery对象的数组组成部分
jquery对象---》dom对象:
$()[下标]
dom对象----》jquery对象:
$(dom对象)
3.jquery框架对象分析
类型:
jquery对象$(jQuery)对象
jquery对象(newjQuery.fn.init)----原型----->jQuery.fn-----复制继承--->extend(许多对象)
$对象-----复制继承------->extend(许多对象)
jquery框架对象:
jquery对象:
通过各种选择器获得的对象都是jquery对象,例如$(“div”)$(“.apple”)
$对象:
其是函数对象,$.get()$.post()$.ajax()$.each
七.加载事件
javascript的加载事件:
window.onload=function(){}
1.jquery加载事件实现
①$(document).ready(function处理);
②$().ready(function处理);
③$(function处理);对第一种加载的封装而已
2.jquery加载事件与传统加载事件的区别
2.1设置个数
在同一个请求里边,jquery的可以设置多个,而传统方式只能设置一个
传统方式加载事件是给onload事件属性赋值,多次赋值,后者会覆盖前者。
jquery方式加载事件是把每个加载事件都存入一个数组里边,成为数组的元素,执行的时候就遍历该数组执行每个元素即可,因此其可以设置多个加载事件。
2.2执行时机不一样
传统方式加载事件,是全部内容(文字、图片、样式)在浏览器显示完毕再给执行加载事件。
jquery方式加载事件,只要全部内容(文字、图片、样式)在内存里边对应的DOM树结构绘制完毕就给执行,有可能对应的内容在浏览器里边还没有显示。
3.jquery加载事件原理
jquery加载事件是对DOMContentLoaded的封装(而非onload)
八.普通事件操作
①dom1级事件设置
itnode.onclick=function(){}
itnode.onclick=函数;
②dom2级事件设置
itnode.addEventListener(类型,处理,事件流);
itnode.removeEventListener(类型,处理,事件流);
node.attachEvent();
node.detachEvent();
③jquery事件设置
$().事件类型(事件处理函数fn);//设置事件
$().事件类型();//触发事件执行
事件类型:
click、keyup、keydown、mouseover、mouseout、blur、focus等等
例如:
$(‘div’).click(function(){事件触发过程this});
(该方式事件函数内部this都代表jquery对象内部的dom节点对象)。
jquery调用的大部分方法里边的this关键字都代表其对应的dom对象。
九.jquery对文档的操作
通过jquery方式实现页面各种节点的追加、修改、删除、复制等操作
1.节点追加
1.1父子关系追加
1.2兄弟关系追加
2.节点替换
3.节点删除
4.复制节点
10.属性选择器使用
总结:
1.加载事件使用
$(document).ready(funciton)
$().ready(function)
$(function);
与传统加载事件的区别:
①加载事件个数:
jquery可以设置多个、传统的只有一个生效
②执行时机
jquery加载事件是对DOMContentLoaded的封装。
2.简单事件设置
$().事件类型([function])
3.文档DOM的处理
节点追加:
append()prepend()appendTo()prependTo()
after()before()insertAfter()insertBefore()
替换:
replaceWith()replaceAll()
复制:
clone(true/false)
删除:
empty()
remove()
作业:
1.两个下拉列表项目切换(dom节点操作)
2.制作无序列表,利用mouseover和mouseout实现鼠标当前行高亮显示
3.练习,图片4秒后显示,在加载事件里边给图片的属性(宽度、高度、图片)做更改
4.练习
广告图片右上角有×图标,点击广告图片小时,实现效果,看到图片×但是不能关闭图片(display:
none),需要5s后才可以关闭。
【传统加载事件】
×上边有onclick事件。
看到×就要单击关闭【jquery加载事件】
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery0330
![提示](https://static.bdocx.com/images/bang_tan.gif)