笔记
关注
分享
扫一扫
柒边形选手
这个作者很懒，什么都没留下…
展开
-
jQuery 多库共存
问题概述:jQuery使用$作为标示符,随着jQuery的流行，其他js库也会用这$作为标识符,这样一起使用会引起冲突。客观需求:需要一个解决方案,让jQuery和其他的js库不存在冲突,可以同时存在,这就叫做多库共存。jQuery解决方案:1.把里面的$符号统一改为jQuery。比如jQuery("'div")2. jQuery变量规定新的名称: $.noConflict()var xx = $.noConflict(); <script> .原创 2022-02-14 22:54:24 · 411 阅读 · 0 评论 -
jQuery 对象拷贝
如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend ()语法︰$.extend ( [deep], target,object1,[objectN])1.deep:如果设为true为深拷贝，默认为false为浅拷贝2.target:要拷贝的目标对象3.object1:待拷贝到第一个对象的对象。4.objectN:待拷贝到第N个对象的对象。5.浅拷贝（覆盖之前的数据）是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象（指向被拷贝对象的地.原创 2022-02-14 22:49:19 · 1591 阅读 · 0 评论 -
jQuery 事件对象
事件被触发，就会有事件对象的产生。element.on (events, [selector] ,function (event) { })阻止默认行为:event.preventDefault()或者return false阻止冒泡:event.stopPropagation() <script> $(function() { $(document).on("click", function() {原创 2022-02-14 22:22:23 · 286 阅读 · 0 评论 -
jQuery 事件注册、事件解绑、事件自动触发
1.单个事件注册语法:element .事件(function() {})$("div").click(function() {事件处理程序 })其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、 change、keydown、keyup、resize、scroll等//1. 单个事件注册$("div").click(function() { $(this).css("background", "purple");});$("div"原创 2022-02-13 20:43:07 · 895 阅读 · 0 评论 -
jQuery尺寸位置操作
1.尺寸语法 用法 width() / height() 取得匹配元素宽度和高度值只算width / height innerWidth() / innerHieght() 取得匹配元素宽度和高度值包含 padding outerWidth() / outerHeight() 取得匹配元素宽度和高度值包含 padding、border outerWidth(true)/outerHeight(true) 取得匹配元素宽度和高度值包含padding、borde原创 2022-02-13 16:06:01 · 208 阅读 · 0 评论 -
JavaScript jQuery创建、添加、删除元素
1.创建元素语法:$("'<li></li>");动态的创建了一一个<li>2.添加元素①内部添加元素,生成之后,它们是父好关系。②外部添加元素,生成之后,他们是兄弟关系。(1)内部添加把内容放入匹配元素内部最后面,类似原生appendChild.element.append("内容)把内容放入匹配元素内部最前面。element.prepend("内容")(2)外部添加把内容放入目标元素后面element.after("原创 2022-02-12 22:26:23 · 254 阅读 · 0 评论 -
JavaScript jQuery遍历对象each()方法
1遍历元素jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。语法1 :$ ("div") . each (function (index, domEle) { XXX; } )1. each()方法遍历匹配的每一个元素。主要用DOM处理。each 每一个2.里面的回调函数有2个参数: index 是每个元素的索引号; demEle是每个DOM元素对象,不是jquery对象语法2 :$.each (object , function (index,原创 2022-02-12 22:01:22 · 6214 阅读 · 0 评论 -
JavaScript jQuery内容文本值
主要针对元素的内容还有表单的值操作。1.普通元素内容html() (相当于原生innerHTML)html()//获取元素的内容html("内容") //设置元素的内容2.普通元素文本内容text() (相当与原生innerText)text()//获取元素的文本内容text("文本内容") // 设置元素的文本内容3.表单的值val() (相当于原生的value)val()//获取表单的值val("内容") //设置表单的值<body> &.原创 2022-02-12 21:26:17 · 213 阅读 · 0 评论 -
JavaScript jQuery属性操作
1.设置或获取元素固有属性值prop()所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。(1)获取属性语法prop("属性")(2)设置属性语法prop("属性";"属性值")2.设置或获取元素自定义属性值attr()用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index = “1”。(1)获取属性语法attr("属性")//类似原生getAttribute原创 2022-02-12 16:00:19 · 250 阅读 · 0 评论 -
JavaScript 自定义jQuery动画效果
1.语法animate (params, [speed], [easing], [fn] )2.参数(1) params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。期参数都可以省略。(2) speed :三种预定速度之一 的字符串( "slow" ，"normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000)。(3) easing : (Optional)用来指定切换效果,默认是"swing”原创 2022-02-11 22:43:59 · 332 阅读 · 0 评论 -
JavaScript jQuery效果
1.显示语法规范show ( [ speed, [easing], [fn]])hide ( [ speed, [easing], [fn]])toggle ( [ speed, [easing], [fn]])2.下滑效果语法规范slideDown( [speed, [easing], [fn] ])slideUp( [speed, [easing], [fn] ])slideToggle( [speed, [easing], [fn] ])hover([over,]out)( 1原创 2022-02-11 20:21:36 · 348 阅读 · 0 评论 -
JavaScript jQuery修改样式
jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式。修改元素样式1.参数只写属性名，则是返回属性值$(this).css("color");2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号$(this).css("color" , "red");3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，$(this).css({ "color":"white" ,"f原创 2022-02-09 20:03:05 · 7675 阅读 · 0 评论 -
JavaScript jQuery筛选方法
语法 用法 说明 parent() $("li").parent(); 查找父级 children(selector) $("ul").children("li") 相当于$("ul>li")，最近一级（亲儿子) find(selector) $("ul").find(""li"); 相当于$("ul li"),后代选择器 siblings(selector) $(".first"").siblings("li"); 查找兄弟原创 2022-02-08 21:41:56 · 150 阅读 · 0 评论 -
JavaScript jQuery选择器
原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准。$( "选择器”) 里面选择器直接写CSS选择器即可,但是要加引号名称 用法 描述 ID选择器 $("#id") 获取指定ID的元素 全选选择器 $('*') 匹配所有元素 类选择器 $(".class") 获取同一类class的元素 标签选择器 $("div") 获取同一类标签的所有元素 并集选择...原创 2022-02-08 20:54:48 · 649 阅读 · 0 评论 -
JavaScript jQuery对象和DOM对象的区别和转换
1.用原生JS获取来的对象就是DOM对象2. jQuery方法获取的元素就是jQuery对象。3. jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。1. DOM 对象： 用原生js获取过来的对象就是DOM对象2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法<body>.原创 2022-02-05 12:18:36 · 549 阅读 · 0 评论 -
JavaScript jQuery概括
jQuery是对原生JavaScript的封装，内部都是用JavaScript实现的jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。j就是JavaScript ;Query查询;意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。学习jQuery本质∶就是学习调用.原创 2022-02-05 12:08:18 · 681 阅读 · 0 评论 -
JavaScript 本地存储
sessionStorage localStorage 生命周期 关闭浏览器窗口 永久生效，除非手动删除否则关闭页面也会存在 数据共享 在同一个窗口(页面)下数据可以共享 可以多窗口(页面)共享(同一浏览器可以共享) 存储形式 以键值对的形式存储使用 以键值对的形式存储使用 存储数据 sessionStorage.setltem(key, value) localStorage.setltem(key, value) 获取数据...原创 2022-02-02 17:43:34 · 106 阅读 · 0 评论 -
JavaScript 移动端点击事件延迟问题
移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放(double tap to zoom)页面。解决方案:1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。<meta name="viewport" content="user-scalable=no">2.利用touch事件自己封装这个事件解决300ms延迟。原理就是︰1.当我们手指触摸屏幕，记录当前触摸时间2.当我们手指离开屏幕，用离开的时间减去触摸的时间3.如果时间小于150ms原创 2022-01-29 20:44:03 · 1163 阅读 · 0 评论 -
JavaScript 移动端touch触摸事件
touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件如下∶触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触发 <body> <div></div> <script>原创 2022-01-28 19:52:59 · 1194 阅读 · 0 评论 -
JavaScript 动画
动画原理 1. 获得盒子当前位置 2. 让盒子在当前位置加上移动距离 3. 利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位， 才能使用element.style.left动画分匀速动画和变速动画 匀速动画 就是 盒子是当前的位置 + 固定的值 10 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 1...原创 2022-01-23 22:44:52 · 409 阅读 · 0 评论 -
JavaScript 元素滚动scroll
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小滚动距离等。scroll系列属性作用element.scrollTop返回被卷去的上侧距离，返回数值不带单位element.scrollLeft返回被卷去的左侧距离，返回数值不带单位element.scrollWidth返回自身实际的宽度，不含边框，返回数值不带单位element.scrollHeight返回自身实际的高度，不含边框，返回数值不带单位如果浏览器的高(或宽)度不足以显示整个原创 2022-01-22 11:12:52 · 2723 阅读 · 0 评论 -
JavaScript 立即执行函数
1.立即执行函数: 不需要调用，立马能够自己执行的函数2. 写法 (function() {})() 或者 (function(){}());第一个小括号可以传递参数进来第二个小括号可以看做是调用函数立即执行函数最大的作用就是独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况<body> <script> function fn() { ...原创 2022-01-21 23:46:16 · 729 阅读 · 1 评论 -
JavaScript 元素可视区client
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。client系列属性 作用 element.clientTop 返回元素上边框的大小 element.clientLeft 返回元素左边框的大小 element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 element.clientHeight原创 2022-01-21 16:24:12 · 445 阅读 · 0 评论 -
JavaScript 元素偏移量offset
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置和获得元素自身的大小(宽度高度)注意:返回的数值都不带单位offset系列常用属性︰offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body element.offsetTop 返回元素相对带有定位父元素上方的偏移 element.offsetLe原创 2022-01-19 22:20:26 · 914 阅读 · 1 评论 -
JavaScript history对象方法
history对象方法 作用 back() 可以后退功能 forward() 前进功能 go(参数) 前进后退功能参数如果是1前进1个页面如果是-1后退1个页面 <body> <a href="list.html">点击我去往列表页</a> <button>前进</button> <script> var btn = document.querySelec原创 2022-01-19 22:15:02 · 648 阅读 · 0 评论 -
JavaScript navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。案例：可以判断使用的哪种终端打开的页面if( (navigator.userAgent.match( /(phone|pad| pod| iPhone |iPod| ios|iPad|AndroidlMobile|BlackBerry|IEMobile |MQQBrowser|JUC| Fennec |wOSBrowser| BrowserN原创 2022-01-19 22:05:28 · 1973 阅读 · 0 评论 -
JavaScript location对象
location对象属性 返回值 location.href 获取或者设置整个URL location.host 返回主机(域名)www.itheima.com location.port 返回端口号如果未写返回空字符串 location.pathname 返回路径 location.search 返回参数 location.hash 返回片段#后面内容常见于链接锚点 统一资源定位符(Uniform Resource Locator, U原创 2022-01-19 21:55:42 · 374 阅读 · 0 评论 -
JavaScript 同步任务和异步任务
同步：前一个任务结束后再执行后一个任务 ,程序的执行顺序与任务的排列顺序是一致的、 同步的。异步：你在做一件事情时，因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。执行顺序：1.先执行执行栈中的同步任务。2.异步任务（回调函数)放入任务队列中。3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(原创 2022-01-18 22:44:50 · 149 阅读 · 0 评论 -
JavaScript 定时器
setTimeout 语法规范： window.setTimeout(调用函数, 延时时间); 1. 这个window在调用的时候可以省略 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()' 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)<body> <script>...原创 2022-01-18 22:37:42 · 115 阅读 · 0 评论 -
JavaScript 窗口事件
window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。1.有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数。2. window.onload传统注册事件方式只能写一次,如果有多个,会以最后-个window.onload为准。3.如果使用addEventListener则没有限制DOMContentLoaded事件触发时,仅当DO.原创 2022-01-17 21:58:58 · 1070 阅读 · 0 评论 -
JavaScript BOM
BOM ( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。BOM ( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。原创 2022-01-17 21:37:36 · 77 阅读 · 0 评论 -
JavaScript 鼠标事件和键盘事件
鼠标事件 触发条件 onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发 onmousedown 鼠标按下触发 ...原创 2022-01-17 21:15:19 · 550 阅读 · 0 评论 -
JavaScript 事件委托
事件委托也称为事件代理,在jQuery里面称为事件委派。事件委托的原理：不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。给父节点添加侦听器， 利用事件冒泡影响每一个子节点当点击当前节点，会实现逐渐向上一个节点探查，当探查到存在监听器时，执行监听器<body> <ul> <li>弹框</li> <li>弹框</li>原创 2022-01-17 19:27:32 · 204 阅读 · 0 评论 -
JavaScript 阻止事件对象默认行为和阻止事件冒泡
阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交<body> <div>123</div> <a href="http://www.baidu.com">百度</a> <form action="http://www.baidu.com"> <input type="submit" value="提交" name="sub"> </form> .原创 2022-01-16 20:33:03 · 86 阅读 · 0 评论 -
JavaScript target和this的区别
1. e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁2. 了解 跟 this 有个非常相似的属性 currentTarget ie678不认识<body> <div>123</div> <ul> <li>abc</li> ...原创 2022-01-16 20:20:08 · 177 阅读 · 0 评论 -
JavaScript DOM事件流和事件对象
事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。DOM事件流分为3个阶段:1.捕获阶段2.当前目标阶段3.冒泡阶段事件冒泡∶IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。事件捕获∶网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。1. Js 代码中只能执行捕获或者冒泡其中的一个阶段。2. onclick 和attachEvent只能得到冒泡阶段。3.原创 2022-01-16 20:13:50 · 180 阅读 · 0 评论 -
JavaScript 事件的注册与删除
1.注册事件给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式传统注册方式利用on开头的事件onclick<button onclick=“ alert('hi~)" > </button>btn.onclick = function() {}特点:注册事件的唯- -性同一个元素同一个事件只能设置一个处理函数 ,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c标准推荐方式addEven原创 2022-01-15 21:09:31 · 404 阅读 · 0 评论 -
JavaScript DOM核心内容
文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。1.对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。2.对于HTML , dom使得html形成一棵dom树.包含文档、元素、节点我们获取过来的DOM元素是一一个对象( object) , 所以原创 2022-01-15 20:30:19 · 69 阅读 · 0 评论 -
JavaScript 创建元素
三种创建元素方式document.write ()element .innerHTMLdocument.createElement ()1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘（重新加载一个新的只包含该内容的页面）2. innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘3. innerHTMr创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂4. createElement ()创..原创 2022-01-15 11:54:50 · 2135 阅读 · 0 评论 -
JavaScript 节点
元素节点nodeType 为1属性节点nodeType 为2文本节点nodeType为3(文本节点包含文字、空格、换行等)1. 父节点parentNode得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null<body> <!-- 节点的优点 --> <div>我是div</div> <span>我是span</span> <ul> .原创 2022-01-13 22:17:31 · 193 阅读 · 0 评论