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.了解jQuery1.1是什么:一个JS函数库,写得少,做的多封装简化DOM操作(CRUD)/Ajax1.2为什么用它:why?强大的选择器:方便快速的查找DOM元素隐式遍历(迭代):依次操作多个元素读写合一:读数据/写数据用的是同一个函数事件处理(click....)链式调用$().xxx().xx()DOM操作(CUD)样式操作1.3如何使用:how?引入jQuery库本地引入与CDN远程引入测试版与生产版(压缩版)使用jQuery使用jQuery函数:$/jQuery使用jQuery对象:$xxx(指向$()得到的)
2.jQuery的2把利器jQuery函数:$/jQueryjQuery向外暴露的就是jQuery函数,可以直接使用当成一般函数使用:$(param)param是function:相当于window.onload = function(文档记载完成的监听)param是选择器字符串:查找所有匹配的DOM元素,返回包含所有的DOM元素的jQuery对象param是DOM元素,将DOM元素对象包装为jQuery对象返回 $(this)param是标签字符串:创建标签DOM元素对象并包装为jQuery对象返回当成对象使用:$.xxxeach(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)分类基本#idtagName或者*.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) 添加classremoveClass(classValue) 移除某个class属性名val() / val(value) 读写标签的valuehtml() / html(string) 读写标签体的文本
5.伪(类)数组

6.CSS

1.offset 相对于页面左上角的位置1.1 let offset = $(".div1").offset() 得到的是一个包含left和top的对象offset.left offset.top1.2 可以在offset中传值,进行设置$(".div").offset({top:50,left:30})
2.position 相对于父元素左上角的位置2.1 let offset = $(".div1").position() 得到的是一个包含left和top的对象position.left position.top2.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:在移入子元素时也会触发,对应mouseoutmouseenter:只有移入当前元素时,在会触发,对应的是mouseleavehover()使用的的就是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/heigthinnerWidth()/innerHeight :width+paddingouterWidth()/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/blushover(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.在小方块移动时，放大镜的移动方向正好跟小方块相反，并且距离为小方块的宽度和大图的宽度的比例

jquery学习总结相关推荐

1. jQuery学习入门总结之css（）和addClass（）的不同

   jQuery学习入门之css()和addClass()的不同   这两天研究jQuery的,刚刚开始入门,从昨天开始呢,就发现一个方法addClass的,教程里有一个方法是这样写的   $(docum ...

2. 如何使用jquery_好程序员web前端学习路线分享jQuery学习技巧

   好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! ...

3. jQuery 学习笔记之二 (jQuery代码风格)

   jquery 学习之代码风格 对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo(" ...

4. jQuery学习笔记--目录

   jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...

5. jQuery学习笔记之DOM操作、事件绑定（2）

   jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

6. 【JQuery】JQuery学习笔记

   (function(){}) 与 $(function(){})的区别 1.(function(){})函数 (function(){})表示一个匿名函数.function(arg){...}定义了一 ...

7. 【转载】jQuery学习笔记

   jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...

8. jQuery学习笔记：Ajax(二)

   接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...

9. jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例

   day03 - jQuery 学习目标: 能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件 能够说出 jQuery ...

10. jQuery学习笔记系列（二）

    day02 - jQuery 学习目标: 能够操作 jQuery 属性 能够操作 jQuery 元素 能够操作 jQuery 元素尺寸.位置 1.1. jQuery 属性操作 ​ jQuery 常用属 ...

最新文章

1. 蓝桥杯国赛-数正方形-java
2. Delphi StringGrid控件的属性及使用说明
3. MySql8.0.19最新版本创建用户分配权限演示，You have an error in your SQL syntax权限分配问题解决方法
4. 讲解泊松融合文章推荐
5. 石大在线c语言在线考试填空题答案,奥鹏石大远程在线考试《钻井工程》-参考答案...
6. 正态分布概率表_三、统计概率思维
7. qml入门学习(八)：通过loader对象动态加载和移除组件
8. atlas 力矩计算_Atlas Copco基本拧紧技术
9. 【图像处理】图像去雾的前世今生
10. PSP？？？ 生产者与消费者框架，还是线程模型？
11. VSTOhowtoreferene.Net3.5（VSTO如何引用.NET3.5的外接程序）
12. 简单谈谈编程语言（二）
13. Android Studio打开之后class显示灰色 代码没有颜色区分 输入没了提示的解决方法
14. 怎么把图片转换成ico格式
15. 揭秘：嫦娥四号为何有月昼工作和月夜休眠两种模式？
16. Altium Designer PCB与SCH参照布局
17. 从python入门到放弃_Python从入门到放弃？方法不对一切白费
18. 服装企业ERP软件哪个公司好？施行服装ERP体系的要点是什么
19. R及Rstudio下载安装教程
20. 精尽Spring Boot源码分析 - 内嵌Tomcat容器的实现

热门文章

1. Kubernetes监控：Dashbaord 2.0.0部署之证书创建和设定
2. Unity中控制物体运动
3. flink流处理示例开发
4. 帝国cms生成静态php,帝国cms自动生成手机版静态插件
5. 某辆汽车有一个里程表，该里程表可以显示一个整数，为该车走过的公里数。然而这个里程表有个毛病：它总是从3变到5，而跳过数字4，里程表所有位（个位、 十位、百位等）上的数字都是如此
6. 合肥工业大学计算机网络题库,合肥工业大学试卷计算机系统结构（A、B卷）
7. 用户、角色、权限数据库设计
8. NEFU OJ 574 丑数
9. HTML入门学习线路图
10. 服务器怎么组装,如何组装一台服务器?(最好标明下什么类型的)