weixin_48340600的博客

原创 css选择器

一、相邻选择器1、div+p 和div同级的p（他俩有相同的父级）2、div > p div后面的最近一级元素

原创 Jquery 事件（注意点）

1、mouseenter事件和mouseover的区别 （都是鼠标移入）冒泡的方式处理问题如果父级有mouseover事件，那么mouseover触发冒泡事件但是mouseenter不会触发冒泡事件不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave（无冒泡问题）2、hover事件（移进移出切换）$(selector).hover(hand...

原创 Jquery中DOM节点的操作

1、删除节点empty和remove的区别empty() 严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点empty不能删除自己本身这个节点remove()该节点与该节点所包含的所有后代节点将同时被删除;包括绑定的事件及与该元素相关的jQuery数据。可有参数：提供传递一个筛选的表达式，删除指定的元素及事件 $("p").remove(":contains('3')")detach()临时删除页面上的节点，但是又不希望节点上的数据...

原创 Jquery 选择器

1、层级选择器1、相邻兄弟选择器选取prev后面的第一个的div兄弟节点$(".prev + div").css("border", "3px groove blue");2、一般相邻选择器选取prev后面的所有的div兄弟节点$(".prev ~ div").css("border", "3px groove blue");...

原创 HTTP的三次握手以及四次挥手

一、三次握手本质是客户端与浏览器总共发送了3个包，目的就是为了确认双方的接受和发送能力是否正常，为之后建立TCP链接做准备(1)客户端向服务端发送一个SYN报文（一个数据包），来请求链接(2)服务端接受到SYN报文，并发送自己的ACK报文，表示自己接受到了客户端的SYN，然后把自己的SYN报文发出作为应答发送给客户端(3) 客户端接受到了SYN报文，再发送ACK报文，给予确认，双方已经建立起链接扩展问题：1、为什么是3次握手，而不是2次？因为三次握手的目的是为了确认双方.

原创 把URL参数转换为一个json对象

var json = {} var arr = 'https://developer.mozilla.org/zh-CN/?name=zs&password=123&sex=男' var arr1 = arr.split('?')[1].split('&') // for (var i = 0; i < arr1.length; i++) { // json[arr1[i].split("=")[0]] .

原创 严格模式

一、开启严格模式 1、为整个脚本(script标签)开启严格模式<script> 'use strict'; // 下面的js 代码就会按照严格模式执行代码</script>//在立即执行函数中<script> (function() { 'use strict'; })();</script> 2、为某个函数开启严格模式...

原创 ES5对象方法

1、获取对象的属性（返回一个数组）var obj = { id: 1, pname: '小米', price: 1999, num: 2000 }; var arr = Object.keys(obj); console.log(arr);2、定义对象中新属性或修改原有属性var obj = { id: 1,

原创 ES6新增数组方法

1、遍历数组 forEacharr.forEach(function（value，index，arr）{})2、筛选数组 filter 返回一个新数组varnewArr=arr.filter(function(value,index){ returnvalue>=20;});3、some检测数组中是否有满足条件的元素var arr = [10, 30, 4]; var flag = arr.some(fu...

原创 改变this指向---call（），apply（）

1、调用函数fn.call();2、改变this指向 call（thisArg，x1，x2）thisArg this要指向谁x1，x2传递的参数（可选，没有就不写）调用fn函数，并且把this指向o function fn(x, y) { console.log('我想喝手磨咖啡'); console.log(this); console.log(x + y); } ...

原创 原型对象，对象原型，原型链

1、原型（原型对象）创建函数的方式有一种为构造函数进行创建//利用构造函数创建对象 function Star(uname, age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我会唱歌'); } } var l

原创 Jquery位置（offset，position，scrollTop/scrollLeft）

1、offset() 获取或设置元素偏移 （1）方法返回被选元素相对于文档的偏移坐标，跟父级没有关系，无论是否定位 （2）方法是一个对象，有2个属性：left、top；offset().top用于获取距离文档顶部的距离 （3）如果括号内加参数，则可以设置偏移offset({top：10，left：30})2、positio() 获取元素偏移 方法用于返回元素相对于带有定位的父级元素偏移坐标，如果父级没有定位，则以文档为准...

原创 Jquery事件

一、事件注册1、事件注册：可以绑定多个事件（利用对象的方式） $("div").on({ mouseenter: function() { $(this).css("background", "skyblue"); }, click: function() { $(this).css("background", "purpl

原创 Jquery中的对象拷贝

$.extend([deep]，target,obj) 把obj拷贝给targetdeep true深拷贝 false 浅拷贝target 要拷贝的对象obj 把内容拷贝给target的对象用法：$.extend(true,targetObj,obj);浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象深拷贝把里面的数据完全复制一份给目标对象如果里面有不冲突的属性,会合并到一起...

原创 Jquery操作元素（增，删）

1.创建元素varli=$("<li>我是后来创建的li</li>");2、内部添加$("ul").append(li);内部添加并且放到内容的最后面$("ul").prepend(li);内部添加并且放到内容的最前面3、外部添加$(".test").after(div); 添加到后面$(".test").before(div); 添加到前面4、删除元素$("ul").remove();可以删除匹配的元素自杀$("u...

原创 Jquery遍历方法

1、遍历DOM元素 $("div").each(function(index，domEle){})index 索引号domEle 每个DOM元素对象，不是Jquery对象2、遍历任何对象，主要用于数据处理，比如数组、对象 $.each(obj,function(index，element){})index 索引号element 遍历内容（每一项）...

原创 Jquery实现全选反选

1、根据全选按钮状态决定复选框状态$(".checkall").change(function () { $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked")) })2、当复选框状态发生变化时，判断被选中复选框的数量是否等于复选框的数量；等于则把全选框的状态改为true；反之为false完整代码：$(function () { // 1. 全选 全不选功能模块 // 就

原创 Jquery获取设置元素属性

一、元素固有属性1、获取元素属性 prop("属性")$(this).prop("checked")2、设置元素属性 prop("属性"，属性值)$("a").prop("title","我们都挺好");二、元素自定义属性1、获取$("div").attr("index")2、设置$("div").attr("index",4);...

原创 Jquery------手风琴案例

1、布局<div class="king"> <ul> <li class="current"> <a href="#"> <img src="images/m1.jpg" alt="" class="small"> <img src="images/m.png" alt="" cla.

原创 Jquery----下拉菜单（利用滑动效果）

1、普通方法 //鼠标经过 $(".nav>li").mouseover(function() { // $(this) jQuery 当前元素 this不要加引号 // show() 显示元素 hide() 隐藏元素 $(this).children("ul").slideDown(200); });

原创 Jquery效果（使用Jquery时，先在外围$(function () {}）

1、显示、隐藏、切换（语法相同）show（speed，easing，fn）speed 速度，可以用已定义的（"slow"，"normal"，"fast"），也可以用毫秒数1000easing 制定切换效果，默认swing，可以linear匀速fn 回调函数...

原创 Jquery样式操作（css与类的操作）

添加类时，原生js会覆盖原先类名；但Jquery的会追加，不会影响以前的类名

原创 jQuery----Tab栏切换

使用$("#left li")相当于把所有的li选出来，并且做了隐式迭代，成为了一个数组，原生通过querySelector选择出来的是个伪数组，只有length的属性，并没有数组的方法另外我们可以通过$(this).index()方法获取到当前小li的索引号$("#left li").mouseover(function() { // 2. 得到当前小li 的索引号 var index = $(this).index();

原创 jQuery选择器

1、parent（） 查找父级$（"li"）.parent（）2、children（selector）相当于$("ul>li")，最近一级的所有元素（亲儿子）$("ul").children("li")3、find(selector) 后代选择器（多个）$("ul").find("li")4、siblings(selector) 查找兄弟节点，不包含自己$(".first").siblings("li")...

原创 本地存储（window.sessionStorage与window.localStroage）

一、window.sessionStorage1、介绍1、周期：关闭浏览器窗口2、在同一页面下，数据共享3、以键值对形式存储（Application->Storage->Session Storage）2、方法1、存储localStorage.setItem('username',val);2、获取localStorage.getItem('username')3、删除localStorage.removeItem('username');4、删.

原创 classList的使用

1、返回元素的类名（是一个数组）console.log(div.classList[1]);2、添加元素类名，是在后面追加类名不会覆盖以前的类名 ，注意前面不需要加.div.classList.add('three');3、删除类名div.classList.remove('one');4、切换类（有就去掉，没有就添加）document.body.classList.toggle('bg');...

原创 触摸事件和触摸事件对象

触摸事件1、手指触摸DOM元素事件==touchstart2、手指在DOM元素身上移动事件==touchmove3、手指离开DOM元素事件==touchend触摸事件对象touches正在触摸屏幕的所有手指的列表targetTouches正在触摸当前DOM元素的手指列表如果侦听的是一个DOM元素，他们两个是一样的changedTouches手指状态发生了改变的列表从无到有或者从有到无因为我们一般都是触摸元素所以最经常使用的是targetTouche...

原创 原生js实现轮播图

1、获取元素2、鼠标经过图片时，左右箭头显示// 2. 鼠标经过focus 就显示隐藏左右按钮 focus.addEventListener('mouseenter', function () { arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; }); focus.addEventListener('mouseleave', function () {

原创 数组去重

1、利用includes去重var arr = [1,23,41,123,1,3,4,3,3,21,23]var n = []for(var i=0;i<arr.length;i++){ // 如果n中不包含这个数，则添加到新数组中 if(!n.includes(arr[i])) { n.push(arr[i]) } } console.log(

原创 封装一个简单的动画函数

描述：使传进来的元素缓慢移动到指定位置（前提此对象必须有定位）// 简单动画函数封装obj目标对象 target 目标位置 function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft >= target) { // 停止动画 本质是停止定时器

原创 鼠标事件（mouseover和mouseenter的区别）

mouseover和mouseenter都是鼠标移到元素身上就触发，区别是1、mouseover经过自身盒子触发，经过子盒子也触发，拥有冒泡特性2、mouseenter只经过自身盒子触发，没有冒泡特性mouseenter不会冒泡，搭配鼠标离开事件mouseleave同样不会冒泡...

原创 this指向

this指向问题一般情况下this的最终指向的是那个调用它的对象1、全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）（1）console.log(this);（2）functionfn(){console.log(this);}window.fn();（3）window.setTimeout(function(){console.log(this);...

原创 offsetWeight、clientWidth、scrollWidth区别

offsetWeight 返回自身宽度，padding+边框+内容区域clientWidth padding+内容区域，不包含边框scrollWidth padding+内容区域，不包含边框，而且包括文字超出的部分常用情景

原创 吸顶效果（window.pageXOffset与offsetTop配合）

1、先根据条件确定侧边栏盒子的定位效果先为文档添加的滚动事件，并判断页面被卷去的头部是否>=banner距离顶部的距离，如果大于了，则说明header区域被卷上去了，就把侧标栏改为固定定位，top值改为相对banner位置的值2、再根据是否超过main位置，来控制返回顶部模块的显示与隐藏 // banner距离顶部的距离 var bannerTop = banner.offsetTop // 侧边栏绝对定位之后的位置 v.

原创 scroll属性（与client相似，但是它返回的是自身实际的宽高）pageYOffset表示页面被卷去的头部

1、 scroll属性2、与client的区别3、页面被卷去的头部window.pageYOffset表示页面被卷去的头部window.pageXOffset表示页面被卷去的左部

原创 client属性（返回元素大小，与offset相比不包含边框，也没单位）

原创 放大镜效果（offset）

放大镜效果（offset）注：preview_img 初始图片（需要放大的图片）mask遮挡层big大盒子1、当我们鼠标经过preview_img就显示和隐藏mask遮挡层和big大盒子2、设置黄色遮罩层鼠标移动的时候，让黄色的盒子跟着鼠标来走preview_img.addEventListener('mousemove', function(e) {// (1). 先计算出鼠标在盒子内的坐标 var x = e.pageX - this...

原创 元素偏移量offset系列（获取该元素的偏移或大小）（包含拖拽模态框的案例）

元素偏移量offset系列（获取该元素的偏移或大小）（都没有单位）一、常用属性1、offsetTop、offsetLeft获取该元素的偏移可以得到元素的偏移位置，它以带有定位的父亲为准如果没有父亲或者父亲没有定位，则以body为准，返回不带单位的数值2、offsetWidth、offsetHeight获取该元素的大小可以得到元素的大小宽度和高度是包含padding+border+width3、offsetParent 返回带有定位的父亲否则返回的...

原创 Location、history对象方法

Location（window）对象1、href属性获取整个URL地址2、search属性获取地址栏中的参数（？之后以及包括？）例：我们在一个页面上利用表单的get方式发送数据到另一个页面上<body> <form action="index.html"> 用户名： <input type="text" name="uname"> <input type="submit" value="登录"&.

原创 window常见事件（包含定时器及案例）

window常见事件1、window.onload() 窗口加载事件有了它，我们就可以在页面的任何位置的script标签写js代码因为onload是等页面全部内容加载完毕之后，再去执行函数内的代码，使用时我们用事件包含起来就行了window.addEventListener('load', function() { var btn = document.querySelector('button'); btn.addEventListener