积极向上的橙子-CSDN博客

原创 call、apply、bind方法及其应用

call方法1、call()方法可以调用一个函数 function fn() { console.log(this); } fn.call() //window2、call()方法可以改变函数的this指向var o = { name: 'Tom' } function fn(x, y) { console.log(x + y);//3 console.log(this); // {name:

2021-01-19 15:14:24 175

原创数组高级用法 foreach()、fliter()、some()区别与总结

1、数组方法forEach遍历数组数组方法forEach一般是用来遍历数组的，例如： var arr = [1, 4, 3]; arr.forEach(function (value, index, array) { //参数一是:数组元素 //参数二是:数组元素的索引 //参数三是:当前的数组 console.log('数组值:' + value); console.log('索引:' + index);

2021-01-19 13:08:14 431

原创 js基础之事件委托

事件委托，也称事件委派，事件代理。1、原理：不给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。如果按照普通方法给每个子元素添加事件，将会频繁的访问dom元素操作，这只会延长整个页面的交互就绪时间，而如果利用事件委托则会大大改善访问dom元素的次数，每次事件只会访问一次它的父节点即可，提高了效率。2、Dom事件流共有三个阶段，分别是捕获阶段、目标阶段、冒泡阶段。2.1捕获阶段从大到小，从上到下。document–>html–>body–&

2021-01-05 10:33:45 139

原创 jQ与JS实现tab栏切换案例

1、需求：点击哪个导航，那么导航对应的模块就显示出来。如图所示：2、jquery做法 // 1、jQuery的方法 $(function () { $('.tab_list li').click(function () { //1、当前小li添加currt类其他兄弟去除currt类 $(this).addClass('currt').siblings().removeClass('currt'); // 2

2020-12-26 18:46:41 306 1

原创 JQ与JS实现全选按钮案例

1、需求最近写了一个jquery和Js案例，需求是这样的：当我勾上全选按钮的时候下面的复选框也会全部被选中，反之只有有一个复选框没被选中则全选按钮不会被选中。如图：因为最近再学jquery，顺便巩固一下js基础，所以先是用jquery实现了一遍，然后又用原生js实现了一遍。话不多说，直接上代码。2、jQuery代码// 1、jQuery做法： $(function () { //1、当全选框选中的时候里面的复选框也要全部选中也就是修改小选框的属性值 prop()

2020-12-26 17:35:58 258

原创 JQ基础之排他思想

1、需求：现有五个按钮，点击到哪个按钮哪个按钮就把背景色变为粉色，其余不变色。如图：2、这里使用排他思想的做法，jq代码如下：<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button&g

2020-12-24 00:36:03 344

原创 JQ操作类与JS操作类的区别

1、原生js操作类：会覆盖元素原先的类名2、JQ操作类：jq里面的类只是对指定类进行操作（追加、移除）等操作，不影响原来的类名2.1JQ追加类：element.addClass(‘类名’)2.2JQ移除类;element.removeClass(‘类名’)<body> <div class="one"></div></body><script> //1、原生js操作类名:会覆盖原来的类名 // var one=d

2020-12-24 00:29:02 316

原创 jquery基础入门之jq选择器

JQ选择器1、id选择器$('#box').css('backgroundColor','pink');2、类名选择器 $('.box').css('backgroundColor','pink')3、通用选择器选取所有元素 $('*').css('color','red')4、标签选择器选取页面中所有div标签 $('div').css('color','blue')5、多标签选择器选取页面中的div和p标签$('div,p').css('color','red')

2020-12-20 22:19:36 319

原创 Jquery基础入门之顶级对象

JQ的顶级对象$是jquery的别称$同时也是JQuery的顶级对象相当于js里的windows如下列代码，这两个的效果是一样的，也就是说,可以用jquery代替，而反过来jquery也可以用可以用jquery代替，而反过来jquery也可以用可以用jquery代替，而反过来jquery也可以用。 jquery(document).ready(function(){ alert('1111') }); $(document).ready(function()

2020-12-20 21:40:01 194 1