文章目录
1.jQuery=>js查询
对数据的CRUD,最为重要的是查询
1.1什么是jQuery?write less do more! 是js的函数库
1.2为什么用它? html元素选取(选择器) html元素操作
css操作 html事件处理 js动画效果 链式调用 读写合一 浏览器兼容 易扩展插件 ajax封装
1.3怎么用?
引入
1.3.1 使用jQuery核心函数($/jQuery)
$("#btn") $(()=>{})
1.3.2 jQuery核心对象:执行$()返回的对象
var $btns = $("#btn2")
$btns.click()…
2.伪数组
object类型
length属性
数值下标属性
没有数组特别得方法:forEach(),push(),pop(),splice()
3.$工具方法
$.each() //遍历对象或者数组
$.trim() //去除两边的空格
$.type(obj) //得到数据的类型
$.isArry(arr) //判断是否为数组
$.isFunction(function) //判断是否为函数
$.parseJSON(json) 解析json字符串转换为js对象/数组
4.属性
1.读取第一个div的title属性值
$("div:first").attr("title")
2.给所有的div添加name属性为zqk
$("div").attr("name","zqk")
3.移除所有div的title属性
$("div").removeAttr("title")
4.给div设置class="zqk"
$("div").attr("class","zqk")
5.给div添加属性为"zqk"
$("div").addClass("zqk")
6.移除所有div的zqk的class
$("div").removeClass("zqk")
7.得到最后一个li标签的文本
$("li:last").html()
8.设置第一个li的标签体文本为"<h>HHHHH</h>"
$("li:first").html("<h1>HHHHH</h1>")
9.得到输入框中的value值
$(":text").val()
10.将输入框的值设置为zqk
$(":text").val("zqk")
//attr() :专门操作属性值为非布尔值的属性
//prop(): 专门操作属性值为布尔值的属性
11.点击全选按钮实现复选框全选
$("btn:first").click(()=>{
$(":checkbox").attr("checked",true)
})
12.11.点击全不选按钮实现复选框全不选
$("btn:last").click(()=>{
$(":checkbox").attr("checked",false)
})
5.第一天总结
1.了解jQuery
1.1是什么:
一个JS函数库,写得少,做的多
封装简化DOM操作(CRUD)/Ajax
1.2为什么用它:why?
强大的选择器:方便快速的查找DOM元素
隐式遍历(迭代):依次操作多个元素
读写合一:读数据/写数据用的是同一个函数
事件处理(click....)
链式调用$().xxx().xx()
DOM操作(CUD)
样式操作
1.3如何使用:how?
引入jQuery库
本地引入与CDN远程引入
测试版与生产版(压缩版)
使用jQuery
使用jQuery函数:$/jQuery
使用jQuery对象:$xxx(指向$()得到的)
2.jQuery的2把利器
jQuery函数:$/jQuery
jQuery向外暴露的就是jQuery函数,可以直接使用
当成一般函数使用:$(param)
param是function:相当于window.onload = function(文档记载完成的监听)
param是选择器字符串:查找所有匹配的DOM元素,返回包含所有的DOM元素的jQuery对象
param是DOM元素,将DOM元素对象包装为jQuery对象返回 $(this)
param是标签字符串:创建标签DOM元素对象并包装为jQuery对象返回
当成对象使用:$.xxx
each(obj/arr,function(key,value){})
trim()
jQuery对象
包含所有匹配的n个DOM元素的伪数组对象
执行$()返回的就是jQuery对象
基本行为:
length:得到dom元素的个数
[index]:得到指定下标对应的dom元素
each(function(index,domEle){}):遍历所有的dom元素
index():得到当前dom元素在所有兄弟中的下标
3.选择器
是什么?
有特定语法规则(css选择器)的字符串
用来查找某个/些DOM元素:$(selector)
分类
基本
#id
tagName或者*
.class
sele,sele2,sele3:并集
selesele2sele3:交集选择器
层次
找子孙后代,兄弟元素
sele>sele2:找子元素
sele sele2:找后代元素
过滤
在原有匹配元素中筛选出其中一些
:first
:last
:eq(index) 找某一个
:not(selelctor)
:lt(index)匹配所有小于索引值的元素
:gt(index)匹配所有大于索引值的元素
:odd 奇数位
:even 偶数位
:hidden隐藏
:visible 显示
[attrName]
[attrName=value]
表单
:input
:text
:checkbox
:radio
:checked
4.属性
操作标签的属性,标签体文本
attr(name) 读 attr(name,value):读写非布尔值的标签属性
prop(name) 读/ prop(name,value) :读写布尔值的标签属性
removeAttr(name)/removeProp(name):删除属性
addClass(classValue) 添加class
removeClass(classValue) 移除某个class属性名
val() / val(value) 读写标签的value
html() / html(string) 读写标签体的文本
5.伪(类)数组
6.CSS
1.offset 相对于页面左上角的位置
1.1 let offset = $(".div1").offset() 得到的是一个包含left和top的对象
offset.left offset.top
1.2 可以在offset中传值,进行设置
$(".div").offset({top:50,left:30})
2.position 相对于父元素左上角的位置
2.1 let offset = $(".div1").position() 得到的是一个包含left和top的对象
position.left position.top
2.2 position不能传值
3.scrollTop
得到某个div或页面的滚动条的指定位置
$(".div").scrollTop()
$("html").scrollTop()+$("body").scrollTop() //为了兼容ie
7.尺寸
width()和height() 内容区的宽高
innerWidth()和innerHeight()加上padding的宽高
outerWidth()与outerHeight()加上border的宽高,可以传参为false或者true,
false为不加margin,true为加上margin
筛选:1.过滤 2.查找
8.对象的过滤=>在自身伪数组中进行过滤操作
eq(index)
first()
last()
filter(xxx)
not()
has()
//所有li的第一个li指定为红色
$lis.first().css("background",'red')
//所有li的最后一个li指定为红色
$lis.last().css("background",'red')
//所有li的第二个li指定为红色
$lis.eq(1).css("background",'red')
//所有li中的title属性为hello的(并且得有title属性)
$lis.filter("[title][title=hello]").css("background",'red')
//所有li中title属性不为hello的(并且得有title属性)
$lis.filter("[title][title!=hello]").css("background",'red')
或:
$lis.filter("[title]").filter[title!=hello].css("background",'red')
或:
$lis.not("[!title],[title=hello]").css("background",'red')
//所有li中有span子标签的
$lis.has("span").css("background",'red')
9.对象的查找=>在后代元素中进行查找
children() //所有的子元素
find() //所有的后代元素
parent() //父标签
prevAll() //前面的所有兄弟元素
siblings() //所有的兄弟元素
//ul标签中的第二个span子标签
$ul.children("span:eq(1)").css....
//ul标签中的第二个span后代标签
$ul.find("span:eq(1)").css....
//ul标签父标签
$ul.parent().css....
//id为cc的li标签的前面的所有li标签
$cc.prevAll("li").css....
//id为cc的li标签的所有兄弟li标签
$cc.siblings("li").css....
10.爱好选择器练习总结
1.利用prop来设置checkbox的选中与否
2.全选或全不选(allSeleListen)监听爱好的状态时,在每个按钮都给allSeleListen设置其checked的值
2.2在反选给allSeleListen设置值为爱好input框的未选中的length是否为0,为0则表示全选中,所以allSeleListen的值就为true.例: $("#allSele").prop("checked",$("input:gt(0)").not(":checked").length===0)
3.在手动点击爱好时,设置其allSeleListen的checked的值也为$("input:gt(0)").not(":checked").length===0,length等于0时,证明全部选中,所以allSeleListen就为true,
4.点击全部全不选框时,使其爱好的checked值为框的checked值,例:
$("input:gt(0)").prop("checked",this.checked)
11.文档处理-增删改
1.内部插入
append() 后
appendTo() 后
prepend() 前
prependTo() 前
//1.向ul下添加一个span(最后)
$("ul").append("<span>xxxxx</span>")
或:
$("<span>xxx<span>").appendTo("#ul")
//1.向ul下添加一个span(最前面)
$("ul").prepend("<span>xxxxx</span>")
或:
$("<span>xxx<span>").prependTo("#ul")
2.外部插入
before() 前
after() //之后
3.替换:
replaceAll:用匹配的元素替换掉所有 selector匹配到的元素
$("<p>pppppp替换的元素</p>").replaceAll("#ul2>li[title=hello]")
replaceWith:将所有匹配的元素替换成指定的HTML或DOM元素。
$("#ul2>li[title=hello]").replaceWith("<p>pppppp替换的元素</p>")
4.删除
empty()把一个元素内部掏空
remove() 删除一个指定的标签
12.添加员工练习总结
1.封装删除的方法,将方法封装在函数中,在函数中得到this的父节点的父节点:
var parent = $(this).parent().parent() ,然后将其父节点删除: remove()
在删除前,弹出是否要删除的提示框,confirm(`真的要删除${parent.children(":first").html()}`){remove()}
2.设置提交按钮,将收集到的值,设置为一个tr,并且加入tbody中,
$("<tr></tr>")
.append("<td>xxx</td>")
.append("<td>xxx</td>")
.append("<td>xxx</td>")
.append(" <td><a href='deleteEmp?id='"+Date.now()+">Delete</a></td>")
.appendTo("#employeeTable tbody")
//给tr绑定点击监听,使其也将deleTd函数传入
.find("a").click(deleTd)
13.事件处理模块
绑定点击监听
$(".out").click(function(){...})
或:
$(".out").on('click',function(){....})
//绑定鼠标移入和移出的事件监听(三种方法)
$(".inner").mouseenter(function(){...}) //进入
$(".inner").mouseleave(function(){...}) //离开
或:
$(".inner").on('mouseenter',function(){....}) //进入
$(".inner").on('mouseleave',function(){....}) //离开
或用hover函数
$(".inner").hover(function(){.移入..},function(){..离开..})
//点击button1,解除inner上的所有事件监听
$("btn1").click(function(){$(".inner").off()})
//点击button1,解除inner上的移入监听
$("btn1").click(function(){$(".inner").off("mouseenter")})
//点击button3,得到事件(点击处的)坐标
$("#btn3").click(function(event){})
事件的坐标:
event.clientX,Y 相当于视口的左上角为原点
event.pageX,Y 相当于页面的左上角(发生滚动后页面就往里了)为原点
event.offsetX,Y 相当于事件元素的左上角为原点
阻止事件的冒泡:
event.stopPropagation() //内向外传递
$(".div").click(function(event){event.stopPropagation()})
阻止默认行为: event.preventDefault()
$("btn").click(function(event){event.preventDefault()})
14.面试题
1.mouseover与mouseenter的区别?
mouseover:在移入子元素时也会触发,对应mouseout
mouseenter:只有移入当前元素时,在会触发,对应的是mouseleave
hover()使用的的就是mouseenter()和mouseleave()
2.on("eventName",fun)与eventName(fun)的区别
2.1.on方法适用于当前元素和未来动态生成的元素(更加的监听数据的变化)
2.2.普通的eventName事件比如: click事件,只能在静态控件的绑定,不能绑定在未来添加的控件上.
15.事件委托(委派/代理)
将多个子元素(li)的事件监听委托给父辈元素(ul)处理
监听回调是加在了父元素上
当操作任何一个子元素时(li)时,事件会自动冒泡到父辈元素上(ul)
但父辈元素不会直接处理事件,而是根据event.taget得到发生事件的子元素(li),通过这个子元素调用事件回调函数.
通过on方法实现事件的委派:
$("div").on("click",'li',function({$(this).css(....)})) //此时this就是你点击的那个子元素.
移除元素身上的事件时,用off(events,[selector],[fn])就可以
$("div").off() 不传参数,则移除身上的所有事件程序
16.CSS 筛选模块 文档处理模块 事件模块
1.CSS模块:
1.1 style样式
css(styleName)读
css(styleName,value)设置
css({多个样式对}) 设置多个样式
1.2 位置坐标
offset() 读或者写当前元素坐标(原点是页面左上角)
position():读当前元素坐标(原点是父元素左上角)
scrollTop()/scrollLeft() :读或者写元素/页面的滚动条坐标
1.3 尺寸
width()/height() :width/heigth
innerWidth()/innerHeight :width+padding
outerWidth()/outerHeight(): width+padding+border||+margin(true)
2.筛选模块
2.1 过滤
在jQuery内部元素中找出部分匹配的元素,并再次封装为新的jQuery对象返回
first()
last()
eq(index)
filter(selector) //对当前元素提要求
not(selector)
has(selector) //保留包含特定后代的元素
2.2查找
查找jQuery对象内部元素的子孙/兄弟/父母元素,并封装为新的jQuery对象返回
children(selector)=> 子元素
find(selector)=> 后代元素
preAll(selector)=> 符合条件的所有兄弟
siblings(selector)=>所有兄弟
parent()=> 父元素
3.文档处理模块(CUD)
增加
内部插入:
append() / appendTo() =>插入后部
preppend() // preppendTo() =>插入前部
外部插入:
before() =>插到前面
after() =>插到后面
删除
remove() //移除某一元素
empty() //掏空自己还在
更新
repalceWidth() // 替换操作
4.事件模块
绑定事件
eventName(function(){})
on("eventName",function(){})
常用: click,mouseenter/mouseleave mouseover/mouseout focus/blus
hover(function,function)
解绑事件
off('eventName')
事件委托
将子元素的事件委托给父元素
事件监听绑定在父元素身上,事件发生在子元素上
事件会冒泡在父元素
但最终调用事件回调函数的是子元素
好处:
新增的元素会绑定监听
减少监听的数量
编码:
on('eventName','selector',function(){}) //回调函数中的this是子元素
解除事件委托也是off
事件坐标
event.offsetX:原点是当前元素的左上角
event.clientX:原点是窗口左上角
event.pageX:原点是页面左上角
事件对象:function(event)....
$("xx").click(function(event){
log(event.offsetX,offsetY)
})
事件相关
停止事件冒泡: event.stopPropagation()
阻止事件的默认行为: event.preventDefault()
17.内置动画：显示与隐藏
淡入淡出:不断改变元素的透明度(opacity)来实现的
1.fadeIn():带动画的显示
2.fadeOut():带动画的隐藏
3.fadeToggle():带动画的切换显示/隐藏
滑动动画: 不断改变元素的高度实现
1.slideDown() //慢慢展开
2.slideUp() //慢慢的收起
3.slideToggle() //慢慢展示与收起切换
显示与隐藏:默认没有动画,动画部分(opacity,width,height)
1.show():(不)带动画的显示
2.hide():(不)带动画的隐藏
3.toggle():(不)带动画的切换显示/隐藏
18.自定义动画
animate(p,[speed],[easing],[fn])
p:对象形式=>可以指定动画的width,height,top.opacity...
例$(".div").annimate({width:200,height:200},2000)
2.stop() //停止动画
3.鼠标移入移出导航栏展示二级菜单的例子
$div1.hover(function(){ //第一个function,移入时的效果
$div1.stop()
},function(){
$div1
.animate({top:"500"},3000,function(){//第二个function,移出时的效果
$div1.animate({left:"600"},3000)
})
})
19.实放$的使用权
//释放$的使用权
jQuery.noConflict()//在此之后,使用jQuery就只能使用jQuery了
20.onload和ready
在文档加载完成之后再执行的函数有:
window.onload = function(){...}
和$(function(){...}
1.window.onload是在全部文档加载完成,包括图片(网址)请求完成之后再执行,
而$(func)是在文档加载完成后,则立即执行,
2.window.onload只执行一次,如果写了两个window.onload,则后面的会覆盖掉前面的,
而$(func)则可以设置多个,都可以执行
3.可以给img添加一个加载完成的监听
$("#img").on('load',function(){...})
21.自定义插件
1.单独成立一个js文件，然后在其中写入
2.若写$.xxx的形式的方法的话,使用:
$.extend({max:function(){...},min:function(){...}})
3.若给$().xxx的形式添加方法,则可以使用:
$.fn.extend({
checkAll:functin(){...}
})
22.jQuery-Validation(表单验证)
一个进行表单验证的插件
1.引入jQuery和validate.js
2.在form表单中的input中使用required来表明这个input是要验证的,然后使用minlength和maxlength来规定长度
3.在确认密码使用equalTo="#pwd1"来规定与密码必须相同
4.$("form").validate() //使用验证
5.$("form").validate({
messages:{
username:{ //这里写的都是input的name属性值
required:"用户名不能为空",
minlength:"最少为六位"
},
pwd1:{...},
pwd2:{....},
}
})
23.日期插件 layui
1.将其laydate.js引入,并且使其与原先放在位置不变
2.在input输入框中,写上点击onclick="laydate()"
3.也可以在script标签中写上:
(()=>{
laydate.skin('molv'); //设置颜色,molv为墨绿色,大红(dahong)
laydate({
elem: '#demo' //指定那个dom元素
})
})()
24.京东商城首页部分功能的实现总结
1.在编写静态页面时,如果功能相似的地方,尽可能的将其页面结构设置一样.
2.字符串可以使用替换操作,使其得到想要的字符串,例：
Msrc＝$(this).children().attr("src").replace(".jpg", "-m.jpg")
3.放大镜效果：
3.1．定义好当前鼠标位置的坐标(X,Y)
3.2.设置小方块需要移动的距离，(x-smallWidth/2,Y-smallHeight/2)
3.3.将其设置为小方块的left，top值
3.4.在小方块移动时，放大镜的移动方向正好跟小方块相反，并且距离为小方块的宽度和大图的宽度的比例
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
