jQuery的基础·知识

1、认识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({
     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);