JQ初级

一、认识jQuery

1.什么是jQuery

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

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

2.jQuery的优势

完全开源的源代码

强大简洁的选择器

事件、样式、动画的良好支撑

链式表达式

简化的Ajax操作

跨浏览器兼容

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

二、jQuery的安装

1、版本

• 开发(development)版本：jQuery-x.x.x.js

• 生产(production)版本：jQuery-x.x.x.min.js

2、安装jQuery-3.3.1

官网下载

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

CDN

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

三、jQuery基本使用

1.引入jq

本地

<!-- 下载jq到本地 -->
<script src="js/jquery-3.3.1.js"></script>

CDN

<!-- jq CDN 地址 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

2.JQ对象

// jQuery:具有jq框架规定的所有功能的调用者，也就是框架产生的唯一对象
// $本质上就是jQuery对象，开源通过 var JQ = jQuery.noConflict();来自定义jQuery对象

3.延迟加载

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

4.jq操作

选择器

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

对象间转换

// js对象：box     jq对象：$box
// 将js对象转换为jq对象： $(box)
// 将js对象转换为Jq对象： $(box[index]

文本操作

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

事件绑定

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

类名操作

$box.addClass("newClass") // 添加一个新类名
$box.removeClass("oldClass")// 删除一个已有的类名
// 多类名时，jq操作类名将每个类名最为单一考虑对象，不会影响其他类名

样式操作

$box.css('background-color') // 获取背景颜色
$box.css('background-color','red') // 删除一个已有的类名
/$box.css('background-color', function() {return 'yellow'}) // 通过函数返回值设置背景颜色

文档结构关系

// 父
$sup.parents()
// 父.父的父
$ sup.parents()
// 子们
$ sup.children()
// 上兄弟
$sup.prev()
// 上兄弟们
$sup.prevAll()
// 下兄弟
$sup.next()
// 同级的兄弟们
$sup.siblings()
 
// 获得的结果的事对象，还可以接着使用jq方法

二.高级

一、选择器

css语法选择器

$('css3 选择器位‘）

索引匹配

$('div:eq(0)')
$('div').eq(0)

内容

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

2.属性操作

文本

// 赋值：有参数
$('.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'); //切换

3.css样式设置

// 取值
console.log($('.box').css('font-size'));
 
// 设值
$('.box').css('color','deeppink') //单一属性设值
    .css{    //设置多个属性值
        // 1.及时给css()函数赋值一个js对象
        // 2.key为字符串类型，可以省略“”，前提要使用js语法，小驼峰命名
        // 3.属性值为数值+单位方式，可以省略单位，尽量全部用字符串数据赋值
        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){})
 
// 第二种
// 两个参数:{key-value传入的数据}, 事件回调函数
$('.box').click({name:'hehe'},function(ev){})

事件对象

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

冒泡与默认动作

// 冒泡：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动画