jQuery相关知识

jQuery Basic Knowledge

一、认识jQuery

1、什么是jQuery

• jQuery是对原生JavaScript二次封装的工具函数集合

• jQuery是一个简洁高效的且功能丰富的JavaScript工具库

2、jQuery的优势

• 完全开源的源代码

• 强大简洁的选择器

• 事件、样式、动画的良好支持

• 链式表达式

• 简化的Ajax操作

• 跨浏览器兼容

• 丰富的插件及对外的扩展接口

3、JavaScript和jquery的区别

• Javascript是一门编程语言，我们用它来编写客户端浏览器脚本

• jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化

• javascript开发jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到

 

注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法

二、jQuery的安装

1、版本

• 开发(development)版本：jQuery-x.x.x.js （程序员用 可以直接看见源码）

• 生产(production)版本：jQuery-x.x.x.min.js （去除了空格换行 压缩版 外界无法直接访问源码）

2、安装jQuery-3.3.1

官网下载

<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // user code
</script>

CDN

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    // user code
</script>

三、jQuery基本使用

1、JQuery对象

• jQuery对象：具有jquery框架设置的所有功能的调用者，就是该框架产生的唯一对象

• $是什么？ 就是jQuery对象，jQuery对象为window的全局属性，所以可以直接使用

• jQuery.noConflict() ：自定义jQuery对象，如用JQ替换jQuery | $

• var JQ = jQuery.noConflict();

• JQ('.box').html("<b>嘿嘿</b>");

2、页面加载

<img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
<script>
    window.onload = function() {
        console.log("window load 1");
    };
    window.onload = function() {
        console.log("window load 2");
    };
    $(document).ready(function() {
        console.log("document load 1");
    });
    $(function() {
        console.log("document load 3");
    });
</script>
// window.onload=fn单事件绑定，页面DOM树与资源完全加载完毕

// jq的延迟加载: 文档树加载完毕, 即回调
// $(document).ready(fn)多数据绑定，页面DOM树加载完毕，简写$(fn)
// 1. 早于window.onload
// 2. 可以多次绑定事件
// 3. 可以简写为$(function() {})

3、jQuery变量命名规范

• 通常以$开头

四、功能概括（jQ选择器 样式操作 事件 动画 DOM）

1.选择器

css3语法选择器
var $ele = $('.ele');
$('css3选择器位')
// eg: $('.box') 得到的是一个存放原生js对象的数组, 就是jq对象, 页面中有多少个.box, 该jq对象就承载者多少个对象,. 可以作为一个整体来使用

索引匹配
$('div:eq(0)')
$('div').eq(0)

内容
$('div:contains(标签文本内容)')
// 注: 采用模糊匹配

2.属性操作

• 文本

$ele.text("添加文本");
// 获取原有文本
$box.text() | $box.html()
// 设置新文本
$box.text('newData') | $box.html('<b>newData</b>')

// 赋值: 有参数
$('.box').html('<i>beat box</i>');
// 取值: 无参数
console.log($('.box').text());
// 表单内容
// $('.inp').val("input 内容 为 value");
console.log($('.inp').val());

• 属性

// 取
console.log($('img').attr('alt'));
// 设
$('img').attr('src', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg')
// 增
$('img').attr('abc', function () {
    return "ABC";
})

• 类名

$(this).addClass('active'); // 添加
$(this).removeClass('box');  // 删除
// 如果有active 删除, 反之添加
$(this).toggleClass('active');  // 切换

// 多类名时,jq操作类名将每个类名最为单一考虑对象,不会影响其他类名

3.css操作样式

$ele.css({width: '200px', heigth: '200px'});
$ele.css('background-color', 'red').css('border-radius', '50%');

$box.css('background-color')  // 获取背景颜色
$box.css('background-color', 'red')  // 设置背景颜色
$box.css('background-color', function() {return 'yellow'})  // 通过函数返回值设置背景颜色

// 取值
console.log($('.box').css('font-size'));
​
// 设值
$('.box').css('color', 'deeppink')  // 单一属性设值
    .css({  // 设置多个属性值
        // 1.就是给css()函数赋值一个js对象
        // 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法
        // 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值
        width: '300px',
        'height': 300,
        'background-color': 'cyan',
        borderRadius: '30px'
    })
    .css('width', function(index, oldWidth) {  // 逻辑单一属性设值
        if (index == 0) {
            // 延迟1s
            // var b_time = new Date().getTime();
            // while (new Date().getTime() - b_time < 1000){}
            return 1.5 * parseInt(oldWidth);
        }
        return oldWidth;
    })

4.事件

• 绑定方式

// 第一种 on
// 四个参数: 事件名, 委派的子级, {key-value传入的数据}, 事件回调函数
$('.box').on('click', 'span', {name: 'hehe'}, function(ev){})
二三参数可以省略：
$ele.on('click', function() {});
// $box为jq对象
$box.click(function(ev) {
​})

// 第二种
// 两个参数: {key-value传入的数据}, 事件回调函数
$('.box').click({name: 'hehe'}, function(ev){})

• 事件对象

// ev为jq事件对象, 兼容js事件对象
// 坐标: ev.clientX | ev.clientY
// 按键: ev.keyCode
// 数据: ev.data.key名  =>  eg:ev.data.name

// 注: jq对象如果包含多个页面元素对象, 可以一次性对所有对象绑定该事件
// this为js对象, $(this)就转换为jq对象
// 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始)

• 冒泡与默认动作

// 取消冒泡: ev.stopPropagation();
// 取消默认动作: ev.preventDefault();

• 委派

$('.box').on('click', 'span', {name: 'hehe'}, function(ev){})
// 注: 通过父级box来绑定点击事件,其实将事件委派给其子级span标签

5.动画

• 系统预定义

// time_num: 动画持续的时间
// finish_fn: 动画结束后的回调函数
​
// 1. hide(time_num, finish_fn) | show(time_num, finish_fn) | toggle(time_num, finish_fn)
// 2. slideUp() | slideDown() | slideToggle()   滑动 参数同上 
// 3.fadeOut() | fadeIn() | fadeTo() | fadeToggle() 淡入淡出  参数同上

• 自定义动画

// 参数: 做动画的样式们 {}, 动画持续时间, 运动曲线, 动画结束后的回调函数
animate({
    width: 300,
    height: 500
}, 300, 'linear', function() {
    // 动画结束后回调
})
// 动画本体采用的是css动画

6.jQ文档结构

var $sup = $('.sup');
console.log($sup.children());  // 子们
console.log($sup.parent());  // 父
console.log($sup.prev());  // 上兄弟
console.log($sup.next());  // 下兄弟
console.log($sup.siblings());  // 兄弟们

7.文档操作

• 操作步骤

// 1.创建页面元素
var $box = $('<div class="box"></div>')
// 2.设置页面元素
$box.text('文本');
$box.click(fn);
// 3.添加到指定位置
$box.appendTo($('body'));

• 内部操作

// append(): 父 加 子 到最后
// prepend():  父 加 子 到最前
// appendTo(): 子 加到 父 到最后
// prependTo():  子 加到 父 到最前

• 兄弟

$('.box').after('<b></b>');  // 在box后添加一个b标签
$('.box').before('<b></b>');  // 在box前添加一个b标签

• 包裹(添加父级)

$('.box').wrap('<div></div>');  // 为box添加一个div父级

• 替换

$('.box').repleaceWith($('.ele')); // 把box替换为ele
$('p').repleaceAll($('b')); // 用p替换所有的b

• 删除

// 1.清空所有子级
$('.box').empty(); // 将box的子级全部删除, 操作的返回值为 自身
    
// 2.不保留事件的删除
// remove()操作的返回值为 自身
$('.box').remove().appendTo($('body'));  // 删除自身再添加到body,原来box已有的事件不再拥有
​
// 3.保留事件的删除
// detach()操作的返回值为 自身
$('.box').detach().appendTo($('body'));  // 删除自身再添加到body,原来box已有的事件依然拥有

五、表单

// form
// 属性
// action: 请求的后台接口
// method: get|post请求方式, get拼接接口方式传输数据(不安全), post携带数据包传输数据(安全)

<div class="row">
    <!--普通输入框-->
    <label>用户名: </label>
    <input type="text" id="usr" name="usr">
</div>
<div class="row">
    <!--密文输入框-->
    <label>密码: </label>
    <input type="password" id="pwd" name="pwd">
</div>
<div class="row">
    <!--按钮-->
    <input type="button" value="普通按钮">
    <button class="btn1">btn按钮</button>
</div>
<div class="row">
    <!--提交按钮, 完成的是表单数据的提交动作, 就是为后台提交数据的 动作-->
    <input type="submit" value="提交">
    <button type="submit">btn提交</button>
</div>
<div class="row">
    <!--单选框-->
    <!--注; 通过唯一标识name进行关联, checked布尔类型属性来默认选中-->
    男<input type="radio" name="sex" value="male">
    女<input type="radio" name="sex" value="female">
    哇塞<input type="radio" name="sex" value="wasai" checked>
</div>
<div class="row">
    <!--复选框-->
    <!--注: 用户不能输入内容,但是能标识选择的表单元素需要明确value值-->
    篮球<input type="checkbox" name="hobby" value="lq">
    足球<input type="checkbox" name="hobby" value="zq">
    乒乓球<input type="checkbox" name="hobby" value="ppq">
    其他<input type="checkbox" name="hobby" value="other">
</div>
<div class="row">
    <!--文本域-->
    <textarea></textarea>
</div>
<div class="row">
    <!--下拉框-->
    <select name="place">
        <option value="sh">上海</option>
        <option value="bj">北京</option>
        <option value="sz">深圳</option>
    </select>
</div>
<div class="row">
    <!--布尔类型属性-->
    <!--autofocus: 自动获取焦点-->
    <!--required: 必填项-->
    <!--multiple: 允许多项-->
    <input type="text" autofocus required>
    <input type="file" multiple>
    <input type="range">
    <input type="color">
</div>
<div class="row">
    <!--重置-->
    <input type="reset" value="重置">
</div>

六、正则

// 定义
var re = /\d{11}/ig
// 1.正则的语法书写在//之间
// 2.i代表不区分大小写
// 3.g代表全文匹配

"abcABCabc".search(/[abc]/); // 在字符串abcABCabc匹配单个字符a或b或c,返回匹配到的第一次结果的索引, 没有匹配到返回-1
"abcABCabc".match(/\w/); // 进行无分组一次性匹配, 得到得到结果构建的数组类型[a, index:0, input:"abcABCabc"], 没有匹配到返回null
"abcABC".match(/\w/g); // 进行全文分组匹配, 得到结果为结果组成的数组[a, b, c, A, B, C]
"abcABC".match(/(abc)(ABC)/);
// RegExp.$1取第一个分组
// RegExp.$2取第二个分组

七、JQ对象与JS对象

// js对象: box  jq对象: $box
// 将js对象转换为jq对象: $(box)
// 将jq对象转换为js对象: $box[index]
//第一种方式：
$('box')[0]

//第二种方式：
$('box').get(0)