![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JS&jQuery
文章平均质量分 94
学习JS过程中遇到的问题以及学习笔记的记录。
似水流年ysl
逆风的方向更适合飞翔,不怕千万人阻挡,只怕自己投降!
展开
-
jQuery属性和css操作API学习笔记
属性1、属性操作attr(name|pro|key,val|fn) ,获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。removeAttr(name),从每一个匹配的元素中删除一个属性prop(n|p|k,v|f),获取匹配的元素集中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性。removeProp(name)用来删除由.prop()方法设置的属性集2、css类addClass(class|fn),为每个匹配的元素添加指定原创 2020-08-03 20:00:38 · 106 阅读 · 0 评论 -
jQuery文档处理:内部插入、外部插入、包裹、替换、删除、复制学习笔记
1、内部插入append(content|fn),向每个匹配的元素内部追加内容。appendTo(content),把所有匹配的元素追加到另一个指定的元素元素集合中。prepend(content|fn),向每个匹配的元素内部前置内容。prependTo(content),把所有匹配的元素前置到另一个、指定的元素元素集合中。2、外部插入after(content|fn),在每个匹配的元素之后插入内容。before(content|fn),在每个匹配的元素之前插入内容。insertAft原创 2020-08-03 19:58:13 · 405 阅读 · 0 评论 -
jQuery事件函数:事件处理、事件委派、事件切换、事件学习笔记
1、事件处理on(eve,[sel],[data],fn), 在选择元素上绑定一个或多个事件的事件处理函数。同一元素可以绑定多个相同的事件。// 点击p弹出警告框显示p内容$("p").on("click", function(){ alert( $(this).text() );});// 传递参数,点击显示文本$("p").on("click", { foo: "bar"}, function (event) { alert(event.data.foo);})原创 2020-08-03 19:51:26 · 285 阅读 · 0 评论 -
jQuery筛选函数:过滤、查找、串联学习笔记
1、过滤eq(index|-index),获取第N个元素index:一个整数,指示元素基于0的位置,这个元素的位置是从0算起。- index:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。(1算起)$("p").eq(1) // 匹配结果集里面的第二个元素,传递从0开始的下标$("p").eq(-2) // 匹配倒数第二个,下标是-2first(),获取第一个元素$('li').first() // 获取匹配的第一个li元素last(),获取最后个元素$('l原创 2020-08-03 19:49:45 · 179 阅读 · 0 评论 -
jQuery九种选择器学习笔记
1.基本选择器id选择器、标签选择器、类选择器、通用选择器、并集选择器1、#id , 根据给定的ID匹配一个元素。id选择器如果选择器中包含特殊字符,可以用两个斜杠转义。//HTML 代码:<div id="notMe"><p>id="notMe"</p></div><div id="myDiv">id="myDiv"</div>//jQuery 代码:$("#myDiv");//HTML 代码:<span原创 2020-07-30 21:10:46 · 225 阅读 · 0 评论 -
jQuery核心函数学习笔记
一、jQuery入门1.jQuery隐式迭代和链式编程在js中当给多个相同元素添加点击事件时需要进行遍历,而jQuery在方法的内部会为匹配到的所有元素进行循环遍历,简化我们的操作,方标调用,这就是隐式迭代。链式编程是将多个操作通过“.”连接在一起成为一句代码。 //隐式迭代 // jQuery给获取到的所有a标签添加鼠标单击事件 $("a").click(function () { console.log("click me!"原创 2020-07-29 20:15:26 · 111 阅读 · 0 评论 -
js onclick事件一闪而过解决
js onclick事件一闪而过原因是页面中onclick点击事件在a标签,a标签会刷新页面两种解决办法:1.在a标签href中加入 javascript:; 或者javascript:void(0);2.在点击函数最后加 return false;原创 2020-07-23 17:04:48 · 2278 阅读 · 5 评论 -
JS点击按钮实现图片的无缝滚动-纯JS实现
js的无缝滚动有很多种,可以自动滚动,也可以手动点击滚动,这里介绍手动点击滚动。为了方便演示这里代码中并没有用到图片。实现思路:首先要实现左右滚动,前提是一定空间下,元素显示不完需要滚动显示。本例子首先外面的div设置为4个li的宽度,并将其设置为overflow: hidden;,防止子元素溢出。总共5,1,2,3,4,5.总共6个div,默认显示1,2,3,4,将div中的ul设置为绝对定位,left为一个负li的宽度,这样,无论向左滚动还是向右滚动都有元素备用。如果向左滚动,先用定时器设置原创 2020-07-30 22:00:23 · 1632 阅读 · 0 评论 -
JS高级篇 浏览器深入解析、正则表达式、JS面向对象编程、JS函数进阶
一、浏览器深入解析1.浏览器组成浏览器从原理上分为七个模块,分别是User Interface(用户界面)、Browser engine(浏览器引擎)、Rendering engine(渲染引擎)、Networking(网络)、JavaScript Interpreter(js解释器)、UI Backend(UI后端)、Date Persistence(数据持久化存储)。2.浏览器内核内核分为渲染引擎和js引擎。渲染引擎主要负责 HTML、CSS 的解析,页面布局、渲染与复合层合成。JavaScr原创 2020-07-27 20:27:21 · 203 阅读 · 0 评论 -
JS基础 DOM编程学习总结
1.JavaScript DOM 概述每个在浏览器打开的HTML文档都会成为doucment对象。doucment对象可以对页面中所有的元素进行访问,doucment对象是window对象的一部分。2.JavaScript节点与节点树在加载html页面时,浏览器会生成一个与之对应的树形结构用来表示页面内部结构。html标签为根标签,head为html的子标签,meta和title是兄弟关系。3.JavaScript获取HTML标签元素getElementById() 根据id获取元素,id原创 2020-07-16 20:48:07 · 401 阅读 · 0 评论 -
跨域问题 Uncaught DOMException: Blocked a frame with origin “null“ from accessing a cross-origin frame.
JS窗口移动遇到的错误,先上图在使用Vscode写js时,当使用window.moveBy()方法移动创建的新窗口时报错,这是因为跨域问题,一个窗口想操作另一个窗口需要两个窗口同源。同源策略也就是协议、ip地址、端口号完全一样才可以,而默认资源路径为在本机地址,并没有所谓的协议,ip地址和端口号。解决办法:vscode安装Live Server插件,启动时用Open with live server...原创 2020-07-15 20:47:29 · 3301 阅读 · 0 评论 -
JS基础 BOM编程学习总结
1.BOM概述BOM提供了独立于内容而与浏览器窗口进行交互的对象。BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象。2.window对象window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。2.1 三种弹出框1.alert():显示带有一段消息和一个确认按钮的警告框。2.confirm():显示带有一段消息以及确认按钮和取消按钮的对话框.返回值原创 2020-07-15 20:17:55 · 209 阅读 · 0 评论 -
JS基础 Array.concat()方法底层业务逻辑分析
方法的作用:方法concat()将创建并返回一个新数组,这个数组是将所有参数都添加到array中生成的。它并不修改array。如果要进行concat()操作的参数是一个数组,那么添加的是数组中的元素,而不是数组。方法的参数: 要增加到array中的值,可以是任意多个。 方法的返回值: 一个新数组。底层实现业务逻辑:1、先创建一个新的数组,然后把当前数组的值放到新数组里面 2、判断arguments长度是否为0,如果...原创 2020-07-14 20:46:17 · 842 阅读 · 0 评论 -
JS基础篇 String对象方法
1、String。String的构造函数,new出来的都为object。1.1 chatAt() 返回字符串中第n个字符。字符串中第一个字符的下标值是0。如果参数n不在0和string.length-1之间,该方法将返回一个空字符串。1.2 chatCodeAt() 返回字符串中第n个字符unicode码,如果n是负数,或者大于等于字符串的长度,则charCodeAt()返回NaN。1.3 concat() 连接字符串,concat()将把它的所有参数都转换成字符串,然后按顺序连接到字符串str原创 2020-07-14 19:01:09 · 128 阅读 · 0 评论 -
JS基础篇 内置对象Array, Date学习笔记
1、值类型和引用类型的区别。值类型在声明时值在内存中存储,值类型赋值时会在内存中开辟新的空间。引用类型在内存中存储的是变量的在堆中的地址,该地址指向堆,数据在堆中存,Object和Array都为引用类型。2、内置对象Array的构造函数和方法。2.1Array.isArray() 判断一个一个对象是不是数组,2.2 concat() 连接数组。concat()将创建并返回一个新数组,这个数组是将所有参数都添加到array中生成的。它并不修改array。如果要进行concat()操作的参数是一个数原创 2020-07-13 21:23:41 · 141 阅读 · 0 评论 -
JS基础 用JS实现翻转数组
第一天学习JS,记录一下 console.log("翻转数组"); var arr = [9, 2, 3, 15, 5]; function change() { var temp; console.log("反转前" + arr); for (var i = 0; i < arr.length / 2; i++) { temp = arr[i];原创 2020-07-09 20:29:29 · 1455 阅读 · 0 评论 -
JS基础 将字符串数组用|或其他符号分割
var arr = ["111", "222", "333", "444", "555", "666"]; var separate = "|"; var link = arr[0]; //为了去掉第一个元素前面线,先将其拿出来 for (var i = 1; i < arr.length; i++) { link += separate + arr[i]; } consol...原创 2020-07-09 20:26:21 · 2286 阅读 · 0 评论 -
JS基础语法 求一组数中的最大值和最小值,以及所在位置
var arr = [9, 2, 3, 15, 5]; function find() { var max = arr[0], min = arr[0]; var maxindex = 0; var minindex = 0; for (var i = 0; i < arr.length; i++) { if (arr[i] > max...原创 2020-07-09 20:24:47 · 2349 阅读 · 0 评论