细说JQuery入门学习

JQuery 笔记

1.JQuery基础

(1) jQuery是什么?

​ jQuery是 JavaScript 的类库

(2)Jquery特点

​ 写得少 干得多

(3)jQuery优势

• 开源
• 便捷的的选择器
• 方便的dom操作
• 丰富的动画操作
• 简单的ajax操作
• 兼容性
• 方便的插件机制

(4)jQuery缺点

​ 额外的 添加 jQuery文件，增加网络传输量

(5)jQuery版本

​ jQuery 1.X 支持IE
​ jQuery 2.X IE9+ 其他…
​ jQuery 3.X IE9+ 支持最新的浏览器

2.jQuery的基本语法

https://www.jquery.com/ [官网.手册]
http://www.jq22.com/chm/jquery/index.html

(1)jquery标准的使用方法

• 原生事件

  • window.onload = function() {
        $('h1').css('color', '#f00');
    }
    

• JQ 标准入口

  • $(document).ready(function(){
        $('h1').css('color', '#f90');
        demo();
    });
    

• JQ 简写入口

  • $(function(){
        $('h1').css('font-size', '100px');
    });
    

(2)ready和onload的区别

• 触发点:
  • ready 文档中的dom加载完就触发
  • onload 文档中一切都加载完 才触发
• 绑定逻辑:
  • ready 可以绑定多次或多个事件 (事件监听)
  • onload 后面的绑定会覆盖前面的代码

(3)链式操作风格

JQuery 的对象默认都返回 this

//例
$('h1').css('color', '#f00').css('font-size', '100px');

(4)jQueryDOM 与 JSDOM 的区别 以及相互转化

• 区别
  • JQDOM 通过 $( )获取到一个 数组对象
  • JSDOM 通过 getElementByID( ) 获取到一个 元素对象
• 转化
  • JSDOM 转为 JQDOM 通过 $( JSDOM )
  • JQDOM 转为 JSDOM 通过 JQDOM[index] 或 JQDOM.get(index)

(5) jquery 命名冲突

$ 是jQuery的别名

var $ = '静静';
console.log($);
// $('h1').css('color','#f00'); // NO
jQuery('h1').css('color','#f00');

3.jQuery的选择器

(1) 基本选择器

基本选择器
*	通配符选择器
#id	ID选择器
.class	CLASS选择器
TagName	标签选择器
s1,s2,s3	组合选择器/分组选择器

(2) 层级选择器

层级选择器
selector selector	后代选择器
selector > selector	所有的字元素
selector + selector	紧邻着的下一个同辈元素
selector ~ selector	紧邻着的所有同辈元素

(3) 过滤选择器

过滤选择器
:first	首个
:last	最后一个
:eq(index)	指定第几个
:lt(index)	索引小于—index以上的要 , 以下的不要
:lt(index)	索引大于—index以下的要, 以上的不要
:odd	索引为单数
:even	索引为偶数
:header	所有的h标签
:not(selector)	排除指定选择器所选的元素
:root	根元素 html

(4) 内容选择器

内容选择器
:contains( text )	匹配包含有指定文本的元素
:has(selector)	匹配含有 选择器所匹配的元素的 元素, ( 匹配包含该元素的父级 )
:parent	匹配含有子元素或子节点的元素
:empty	匹配不含有子节点的元素(空元素)

(5) 可见性选择器

可见性选择器
:hidden	匹配所有不可见元素
:visible	匹配所有课件元素

(6) 属性选择器

属性选择器
selector [attrname]	选择有指定属性的元素
selector [attrname = 'value']	指定值等于value的元素
selector [attrname != 'value']	指定值不等于value的元素
selector [attrname ^= 'value']	指定值以value开头的元素
selector [attrname $= 'value']	指定值以value结尾的元素
selector [attrname *= 'value']	指定值包含value的元素
[ ][ ][ ]....	多个属性选择器,做进一步筛选

(7) 子元素选择器

子元素选择器
:first-child	匹配首个子元素
:last-child	匹配最后一个子元素
:only-child	匹配唯一的子元素
:nth-child( n )	匹配父元素的第N个子元素

(8) 表单选择器

选择所有的表单控件

​ :input
​ :text
​ :password
​ :radio
​ :checkbox
​ :submit
​ :image
​ :reset
​ :button
​ :file

(9) 表单对象选择

表单对象选择器
:enabled	匹配所有的可用的表单元素
:disabled	匹配所有被禁用的表单元素
:checked	匹配所有被选中的表单元素
:selected	匹配所有被选中的option表单元素

4.jQuery的筛选

(1)过滤

过滤
eq(index)	过滤出指定的某个
first( )	过滤出
last( )	过滤出最后一个
filter( selector )	从前面的集合中过滤出满足后面条件的那个
not(selector)	过滤排除,从匹配的元素合集中移除指定的元素
slice( start, end )	截取出指定的一段
has(selector)	过滤出含有指定选择器所选择的元素的元素 (指定选择的元素的父级)
hasClass( )	判断前面的集合中是否含有包含指定的某个类
is( selector )	判断前面的集合中是否有元素指定的 表达式(选择器)
map()	类似于对JQ进行遍历操作,并取出一部分值

(2)查找

具有破坏性,得到对象 可能不是前面集合的子集

往里找
children( )	找子元素
find( )	找后代元素
往外找
parent( )	找父级
parents( )	找父级们 找先辈
parentsUntil( )	找父级们 , 到指定的位置为止
offsetParent( )	找父级们 一直匹配到已定位的父级为止
closest( )	逐级向上查找,返回找到的父级 ( 有 返回值 )
往后找
next( )	紧邻着的后面的一个同辈元素
nextAll( )	紧邻着的后面的所有的同辈元素
nextUntil( )	紧邻着的后面的同辈元素,直到某个指定位置为止
往前找
prev( )	紧邻着的前面的一个同辈元素
prevAll( )	紧邻着的前面的所有的同辈元素
prevUntil( )	紧邻着的前面的同辈元素, 直到某个指定位置为止
找其他
siblings( )	除了元素自己以外的其他同辈元素

(3) 串联

串联
add( )	向集合内追加新元素
andSelf( ) / addBack( )	把之前选中的集合加入到当前集合内
end( )	返回最后一次破坏性操作之前的状态
contents()	获取所有的子节点(包括文本)

5.文档处理

内部插入
append()	内部最后
appendTo()	–
要插入的父级.prepend( 要插入的内容)	内部最前
要插入的内容.prependTo(‘要插入的父级’)	–

外部插入
after()	外部最后
insertAfter()	–
before()	外部最前
insertBefore()	–

包裹
wrap()	将集合内的每个元素都包裹在指定元素内
wrapAll()	将整个集合的元素都包裹在指定元素内
unwrap	去掉包裹
wraplnner()	将选中的元素里面的内容包裹在一个标签内

替换
replaceWith()	替换 谁
replaceAll()	谁 被替换

删除
remove()	删除元素
empty()	清空子节点

复制
clone()	复制

6.属性

(1)属性操作

属性操作
attr()	读 / 写 属性
removerAttr()	移除属性
prop()	读 / 写 属性
removeProp()	移除属性

(2)CSS类

CSS类
addClass()	添加一个属性
removeClass()	移除一个类属性
toggleClass()	添加移除,来回切换

(3)HTML 代码 / 文本 / 值

HTML 代码 / 文本 / 值
html()	等同于 innerHTML
text()	等同于innerText
val()	.value(表单控件)

7.CSS操作

(1) css

$('div').css('color', '#f00').css(.....);
多个样式,可用JSON作为参数传递多个样式
    $('div').css({
        "color":"#f00",
        "font-size":"100px",
    });

(2) 位置

位置
offset()	获取/设置 元素相对于整个文档的位置,left/top属性
position()	获取 已定位的父元素的位置
scrollTop()	获取 / 设置 滚动条距离上边的位置
scrollLeft()	获取 / 设置 滚动条距离上边的位置

( 3 ) 尺寸

width()  获取/设置  CSS设置的元素宽
height() 获取/设置  CSS设置的元素高
(不加边框)
innerWidth()  获取/设置  内容+内边距的宽
innerHeight() 获取/设置  内容+内边距的高
(标准元素大小: 内容+内边距+边框)
outerWidth()  获取/设置  实际的宽
outerHeight() 获取/设置  实际的高
$(window).height() //浏览器时下窗口可视区域高度
$(document).height() //浏览器时下窗口文档的高度
$(document.body).height()//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true)//浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width() //浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()//浏览器时下窗口文档body的高度
$(document.body).outerWidth(true)//浏览器时下窗口文档body的总宽度 包括border padding margin
$(document).scrollTop() //获取滚动条到顶部的垂直高度
$(document).scrollLeft() //获取滚动条到左边的垂直宽度

8.事件

1.绑定事件 / 事件委派

• 简写方式 JQDOM.event(function(){.......});

$('#list li').click(function(){
    //JQ代码   $('')....;
});

• JQ 标准事件方式 bind() / on() [支持 事件委派]
  • bind( ) 可多个事件绑定, 不支持事件委派
    • 传入两个参数方式: JQDOM.bind('event',function(){.......});
    • 采用json字符串方式:JQDOM.bind({'event':function(){事件1},'event':function(){事件2},'event':function(){事件3},});
  • on( ) 可多个事件绑定, 支持事件委派
    • 传入两个参数方式: JQDOM.on('event',function(){.......});
    • 采用json字符串方式:JQDOM.on({'event':function(){事件1},'event':function(){事件2},'event':function(){事件3},});

// bind() 绑定事件 (可多个, 可不支持委派)
$('#list li').bind('click',function(){
    //....单个事件
});
$('#;list li').bind({
    'mouseover':function(){
        //...鼠标事件1
    },
    'mouseout':function(){
        //...鼠标事件2
    },
});

// on() 绑定事件 (可多个, 支持事件委派)
$('#list li').on('click',function(){
    //....单个事件
});
$('#;list li').on({
    'mouseover':function(){
        //...鼠标事件1
    },
    'mouseout':function(){
        //...鼠标事件2
    },
});

• one( ) 一次性事件
  • JQDOM.one('event',function(){ ... });

// one() 一次性 事件
$('h1').one('click',function(){
    alert('你是个好人,再见!');
});

2.解绑事件

• unbind( ) 解绑bind()事件

  • JQDOM.unbind(); 解绑该元素的所有bind()事件
  • JQDOM.unbind('event'); 解绑该元素 指定的bind(‘event’)事件

• off( ) 解绑on() 事件(支持事件委派)

  • JQDOM.off(); 解绑该元素的所有 非委派事件
  • JQDOM.off('event'); 解绑该元素的 指定 非委派事件
  • $(document).off('指定的事件event','指定的元素'); 解绑指定元素的 指定的 委派事件

3.自动触发事件

• trigger( ) 事件自动触发
  • JDDOM.trigger('event');

4.阻止默认事件 / 事件冒泡

• 阻止默认事件
  • 在事件方法体内使用 return false
  • 使事件不冒泡 return false

9.动画效果

JDMON.动画效果();

基本		参数
show( )	显示
hide( )	隐藏 ( 修改宽高透明度)	slow-normal-fast- 或者直接写多少毫秒 3000=3秒
toggle( )	切换 显示/隐藏
滑动效果	滑动也可以做隐藏
slideDown( )	下滑动
slideUp( )	上滑动
slideToggle( )	切换 上/下 滑动
淡入淡出	淡出也可以做隐藏
fadeIn( )	淡入
fadeOut( )	淡出
fadeToggle( )	切换 淡入/淡出
fadeTo( )	指定透明度0: 透明,1:不透明	参1: 指定时间 参2: 指定透明度
自定义动画
animate( JSON,time )	自定义	参1:json字符串 要改变的属性和值,参数2: 改变的秒数
stop( )	停止
delay( )	延迟

// 自定义动画指定透明度
$('点击哪个按钮').click(function(){
   $('改变哪个图片').animate({
       //'width':'0px',     // 动画变为0宽度
       //'width':'toggle',  // 可以切换
       'width':'1200px',
       'height':'600px'
   },1000);//参1:json字符串 要改变的属性和值,参数2: 改变的秒数
});

新闻轮播效果

setInterval(function(){
    $('.media-list li') //要追加的内容
    .last().fadeTo(0,0).hide()//最后一个先改变透明度0,0秒,隐藏
    .prependTo('.media-list').slideDown(1000).fadeTo(1000,1);//追加到父级的内部的最前面,在下拉,淡入出来 花1秒
},3000);// 定时器 每3秒执行一次

10.事件状态的轮巡切换

toggle() 在JQ3.0之前的版本

例: 相当于一个点击事件, 点第一下输出1 点第二下输出2

$('#box').toggle(function(){
    console.log(1);
},function(){
    console.log(2);
},function(){
    console.log(3);
},function(){
    console.log(4);
});

11.AJAX

1.ajax请求 加载

• JQDOM.load() 对象是JQDOM

  • $('#box').load('./php/1.php');
    

• get请求方式:$.get( 参1:请求地址,参2{json字符串需要传递的参数}, 参3:接受来的数据做什么fun , 参4:'json' 做json处理 转为对象 );

• $.get('./php/1.php',{a:num1,b:num2,串行化的数据}, function(data){
     $('#box').append(data);
  },'json');//将接受data数据 json处理 转为对象了
  

• post请求方式:$.post( ) 使用方式同上

• 店长推荐: $.ajax( )

  • $.ajsx({
        type:'get',
        url:'./php/1.php',
        data: 串行化的数据,
        dataType:'json';  // 将传递过来的数据做json处理
        async:false; // 同步请求 / 异步请求
        success:function(data){
            $('#box').append(data+'<br>');
        },
        error:function(){
            alert('发送请求失败');
        },
    })
    

2.获取表单中的数据

JQDOM.serialize(); 会将JQDOM中所有的name和值 拼成参数的样子 a=3&b=4…

这样就可以直接填写到

​ $.get() 的参数2中

​ $.ajax({

​ data: 串行化数据; 看上面

​ })

12.JQuery 其他方法

1.JSONP方式加载文件 实现跨域

$.getScript('http://127.0.0.1/..../1.php');

//php文件中内容

require './config.php';
require './DB.class.php';
$db = DB::table('user');
$data = $db->find(10);

echo "makedata(".json_encode($data).")";

// html script中的内容
function makedata(obj){
    $('#box').html('');
    for(var i in obj){
        box.innerHTML += i + ':' + obj[i] + '<br>';
    }
}   // 获取返回的数据 遍历到div中

2.each() 遍历

​ index( )当前元素的 索引值

​ get( ) 获某个索引的 元素

​ size( ) 获取JQDOM的 长度 ( 目前有问题使用**.length **代替)

$('#list li').each(function(i,n){
    console.log(i,n);  // 会遍历出索引号 和 代表的对象每个li
    console.log(this,$(this).index()); //同上 JQ方法
});

13.案例- 四级地址联动

请选择您的地址: 
    <select id="pro"></select>
    <select id="city"></select>
    <select id="area"></select>
    <select id="street"></select>
<script src="./jquery-3.3.1.min.js"></script>
<script>
    // 加载省份数据
    $.ajax({
        type:'get',
        url: './php/address.php',
        dataType: 'json',
        // 同步请求 第一级数据
        async: false, 
        success: function(data){
            // 将省份信息 写入首个select
            // 先清空
            $('#pro').empty();
            // 遍历省份数据
            for (var i = 0; i < data.length; i++) {
                $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo('#pro');
            }
        },
        error: function(){
            alert('AJAX执行失败了!');
        }
    });


    // 绑定 change 事件
    $('#pro,#city,#area').change(function(){
        // 先清空
        $(this).nextAll('select').show().empty();
        // 获取当前的value值
        var upid = $(this).val();
        // 保留触发事件的下拉框对象
        var _this = $(this);

        // 请求下一级数据
        $.ajax({
            type: 'get',
            url: './php/address.php',
            data: 'upid='+upid,
            dataType: 'json',
            success: function (data){
                // 如果下一级数据为false,则隐藏之后的下拉
                if (!data) {
                    _this.nextAll('select').hide();
                    return;
                }

                // 遍历下一级数据
                for (var i = 0; i < data.length; i++) {
                    $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(_this.next('select'));
                }

                // 自动触发 后面的select的请求和填充
                _this.next('select').trigger('change');

            },
            error: function (){
                alert('AJAX执行失败了!');
            }
        });
    });

    // 省份的自动触发加载事件
    $('#pro').trigger('change');