jQuery的基础·知识
1、什么是jQuery
jQuery是一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。
2、下载
1、去官方网站下载：http://jquery.com/
2、去CDN下载：https://www.bootcdn.cn/jquery/
3、语法手册：https://jquery.cuishifeng.cn/
3、版本介绍
jQuery库分为1.x的版本和2.x、3.x的版本，1.x的版本兼容IE678，而2.x、3.x的版本不兼容IE678。
4、jQuery库类型说明
开发版：完整无压缩版本，主要用于测试、学习和开发
生产版：经过工具压缩或经过服务器开启Gzip压缩，主要应用于产品和项目
5、引入
<!-- 引入本地文件 -->
<script src="js/jquery.js"></script>
<!-- 引入线上cdn文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
6、jQuery与$的关系
它们是同一个东西，是等价的
console.log($); console.log(jQuery); console.log($ === jQuery); // true
7、页面加载
// 页面加载完成 window.onload = function () { alert('加载完成了'); } // jq // $(document).ready(function () { // alert('jq加载完成了'); // }); // 简写 $(function () { });
1、执行时机不同，window.onload必须等待网页中所有的内容加载完毕后（包括图片）才能执行，而$(document).ready()是网页中所有DOM结构绘制完毕就执行，可能DOM元素关联的东西并没有加载完。
2、window.onload只能写一个,多个时后面的会覆盖掉前面的，而$(document).ready()可以写多个，不会覆盖。
3、window.onload没有简写形式，而$(document).ready()可以简写成$(function (){})。
8、相互转换
<ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ul>
// jq 转 原生 var $li = $('li'); // 通过jq获取了li元素 （如果你想使用原生的方法，就要转成原生的元素） // 1、jq对象[下标] 这个方法，不是jq给我们提供的，而是我们观察jq对象发现的 console.log($li[0]); // 2、jq对象.get(下标); // 如果没有参数，返回的是一个数组。如果有参数，返回这个参数对应的元素 console.log($li.get()); console.log($li.get(0)); // ----------------------------- // 原生 转 jQuery: $(原生) var li = document.getElementsByTagName('li'); console.log($(li));
9、与别的库冲突
var $ = 5; jQuery.noConflict(); // 将$的控制权让渡出来 (function ($) { // 在这个里面，可以继续使用$ console.log($); // 函数 })(jQuery); console.log($); // 5
2、jQuery选择器
1、基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。可以使用这些选择器来完成绝大多数的工作。
$('#box').css('background', 'red');
$('.abc').css('background', 'green');
$('ul').css('background', 'blue'); // 这里没有循环，但是jq原码帮我们循环
$('#box, .abc, ul').css('font-size', '50px');
2、层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。
$('ul li').css('border-bottom', '2px solid #ccc'); // 子孙
$('ul').find('li').css('border-bottom', '2px solid #ccc');
$('ul>li').css('border-bottom', '2px solid #ccc'); // 孩子
$('ul').children().css('border-bottom', '2px solid #ccc');
$('#ab+li').css('background', 'red'); // 下一个兄弟元素
$('#ab').next().css('background', 'red');
$('#ab~li').css('background', 'red'); // 下面所有的兄弟元素
$('#ab').nextAll().css('background', 'red');
3、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号开头。
1、基本过滤选择器
$('li:first').css('background', 'red'); // 第一个
$('li').first().css('background', 'red');
$('li:last').css('background', 'red'); // 最后一个
$('li').last().css('background', 'red');
$('li:even').css('background', 'red'); // 下标为偶数的
$('li:odd').css('background', 'yellow'); // 下标为奇数的
$('li:not(.box)').css('background', 'yellow'); // 排除
$('li').not('.box').css('background', 'yellow');
$('li:eq(1)').css('background', 'yellow'); // 下标为1的元素
$('li').eq(1).css('background', 'yellow');
$('li:gt(2)').css('background', 'yellow'); // 下标比2大的元素
$('li:lt(2)').css('background', 'red'); // 下标比2小的元素
$('li:lt(5):gt(2)').css('background', 'red'); // 比5小，比2大的区间
2、属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
$('li[title]').css('background', 'red'); // 有title属性
$('li[title=abc]').css('background', 'red'); // title是abc
$('li[title!=abc]').css('background', 'red'); // title不是abc的
$('li[title^=a]').css('background', 'red'); // title以a开头
$('li[title$=业]').css('background', 'red'); // title以业结束
$('li[title*=业]').css('background', 'red'); // title包含业
4、表单选择器
<form action=""> <input type="text"> <input type="password" name=""> <input type="radio" name="" checked> <input type="checkbox" name="" checked> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="普通按钮"> <input type="file" name=""> <button>按钮</button> <textarea name="" id="" cols="30" rows="10"></textarea> <select name="" id=""> <option value="">男</option> <option value="" selected>女</option> </select> </form>
console.log($(':input')); // 选取所有input textarea select button元素
console.log($(':checked')); // 所有被选中的radio checkbox select
console.log($(':text')); // 单行文本框
console.log($(':password')); // 密码框
$(':radio'); // 单选框
$(':checkbox'); // 多选框
$(':submit'); // 提交按钮
$(':reset'); // 重置按钮
$(':button'); // 普通按钮
$(':file'); // 上传域
3、节点遍历
1、位置遍历
我们根据元素的位置，查找元素的子节点以及元素的兄弟节点，这些方法都可以接收一个筛选条件。
<div id="box"> <h3>h3</h3> <h3>h3</h3> <h2 class="title">h2</h2> <h2>h2</h2> <h3>h3</h3> <h3>h3</h3> <h2>h2</h2> <h3>h3</h3> </div>
$('#box').children().css('background', 'red'); // 子节点
$('#box').children('h2').css('background', 'red');
$('.title').next().css('background', 'red'); // 下一个兄弟
$('.title').nextAll('h3').css('background', 'red'); // 下面所有的兄弟
$('.title').prev().css('background', 'red'); // 上一个兄弟
$('.title').prevAll().css('background', 'red'); // 上面所有的兄弟
$('.title').siblings().css('background', 'red'); // 当前元素的所有的兄弟
2、遍历父节点
根据子元素，查找元素的父节点以及所有的父级节点，parents()可以接收一个筛选条件，返回符合条件的父级节点
<div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div>
console.log($('.box3').parent()); // 当前元素的父级
console.log($('.box3').parents()); // 当前元素所有的祖先级，一直找到html，它可以接收一个筛选条件
console.log($('.box3').parents('.box1')); // 接收筛选条件
3、遍历节点-过滤
find是查找元素的所有子孙节点，而filter是过滤，not则是排除。
$('ul').find('li').css('background', 'red'); // 子孙节点
$('li').filter('.box').css('background', 'green'); // 过滤，找到所有的li，再过滤出box
$('li').not('.box').css('background', 'green'); // 排除box
4、属性操作
// 利用原生的attribute实现 // jQuery对象.attr(属性名) 获取 // jQuery对象.attr(属性名, 值) 设置 // jQuery对象.attr({属性名: 值, 属性名: 值}) 设置多个 // jQuery对象.removeAttr(属性名) 删除属性 console.log($('#p1').attr('title')); // 获取 $('#p1').attr('title', '我是平头哥'); // 设置 $('#p1').attr({ // 设置多个 title: '123', abc: '456' }); $('#p1').removeAttr('abc'); // 删除属性 // 原码利用点或中括号的形式实现 // 我们还有一个prop()方法同attr()方法很像，也是操作属性，但是它同attr有区别： // 1、只添加属性名称该属性就会生效，应该使用prop // 2、只存在true/false属性，应该使用prop // jQuery对象.prop('属性名'); // 获取 // jQuery对象.prop('属性名', '值'); // 设置 // jQuery对象.removeProp('属性名'); // 删除 console.log($('input').prop('checked')); // 获取 $('input').prop('checked', false); // 设置 // 点击按钮，如果checkbox没有选中，则让它选中，如果选中了，则不让它选中 $('button').click(function () { if ($('input').prop('checked')) { $('input').prop('checked', false); } else { $('input').prop('checked', true); } })
5、class相关操作
jQuery提供了四个操作样式的方法，分别是addClass()追加、removeClass()删除、hasClass()查找、toggleClass()切换。
一般情况下，我们用class来代替css操作元素的样式。这样更规范。
// jQuery对象.addClass('class名1 class名2'); // 添加 // jQuery对象.removeClass('class名'); // 删除 // jQuery对象.hasClass('class名'); // 是否有 // jQuery对象.toggleClass('class名'); // 如果没有这个class，则添加，否则删除 $('#box').addClass('p1 p2'); $('#box').removeClass('abc'); console.log($('#box').hasClass('abc')); $('#box').toggleClass('abc');
6、css样式操作
// jQuery对象.css('样式名', '值'); 设置 // jQuery对象.css('样式名'); 获取 // jQuery对象.css({'样式名1':'值1', '样式名2':'值2'}); // 1、如果是数字，将会自动转化为像素值。 // 2、在css方法中，如果属性中带有‘-’符号，例如font-size和background-color属性，如果在设置这些值时，不带引号，那么就要用驼峰式写法。如果带上引号，可以写成font-size也可以写成fontSize。加上引号是个良好的习惯。 $('#box').css('background', 'red'); $('#box').css({ width: 200, height: 300, "font-size": '50px', color: 'white' }) console.log($('#box').css('backgroundColor')); console.log($('#box').css('width'));
7、html文本及值的操作
<div id="box1">我就是我</div> <div id="box2">我还是我</div> <input type="text">
// innerHTML // jQuery对象.html(); 获取 // jQuery对象.html(值); 设置 console.log($('#box1').html()); $('#box1').html('我<b>就是</b>我'); // ---------------------- // innerText // jQuery对象.text(); 获取 // jQuery对象.text(值); 设置 console.log($('#box2').text()); $('#box2').text('我<b>就是</b>我'); // ------------------ // value // jQuery对象.val(); 获取 // jQuery对象.val(值); 设置 $('input').val('平头哥'); console.log($('input').val());
8、$下常用的方法
1、循环
-
jQuery对象.each(function (下标, 元素) { });
注意：访方法只能针对jquery元素，函数中的this指向元素
$('li').each(function (index, item) {
// console.log(index, item);
// console.log(this === item);
$(item).html(index + 1);
});
-
$.each(对象, function (下标, 元素) { })
注意：可以针对jquery对象、数组、和普通对象
针对jq对象
$.each($('li'), function (index, item) {
// console.log(index, item);
$(item).text(index + 1);
})
针对数组
var arr = ['刘备', '关羽', '张飞']; $.each(arr, function(index, item){ console.log(index, item); });
针对普通对象
var obj = { name: 'zs', age: 3, fn: function () { console.log('前端开发'); } }; $.each(obj, function (key, value) { console.log(key, value); })
2、$.map()
$.map()函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。
map()还会为函数传入两个参数：其一是当前迭代的元素或属性值，其二是当前迭代项的数组索引或对象属性名。
该函数返回值将作为结果数组中的一个元素，如果返回值为null或undefined，则不会被添加到结果数组中。
$.map(对象, function (元素, 下标) { }) 返回一个数组
// var arr = ['刘备', '关羽', '张飞']; var a = $.map(arr, function (item, index) { console.log(item, index); return item + '---' + index; }); console.log(a); // ----------------------- var obj = { name: 'zs', age: 3, fn: function () { console.log('前端开发'); } }; var a = $.map(obj, function (value, key) { // console.log(value, key); // return value; return key; }); console.log(a);
3、$.extend()
作用1：对象合并
$.extend(dest, src1, src2, src3...); // src1 src2 src3都合并到dest上面，返回合并以后的对象
// 需求：将三个对象的属性，合并到一个对象中 var o1 = { name: 'zs' } var o2 = { age: 3 } var o3 = { fn: '前端开发', name: '小邓' } // $.extend(o1, o2, o3); // o2,o3都合并到o1上 // console.log(o1); // 推荐 var o = $.extend({}, o1, o2, o3); console.log(o);
作用2：对象的深度克隆
$.extend(true, dest, src1); // src1克隆到dest上面，第一个参数为true，则为深度克隆
// 作用二：对象克隆 var o1 = { name: 'zs' } // // 需求：跟o1一模一样，来一个对象 // var o = o1; // 不行 var o = $.extend({}, o1); // 浅克隆 o.name = '张三'; console.log(o); console.log(o1); // --------------------------------- var o1 = { name: { a: 'zs' } } // var o = $.extend({}, o1); // 浅克隆（原生ES6有实现） var o = $.extend(true, {}, o1); // 深度克隆（原生还没有实现，可以利用JSON.stringfiy()和JSON.parse()） o.name.a = '张三'; console.log(o1);
