jQuery入门

一、入门

1、jquery 就是一个js的框架；

2、好处就是能让我们的js代码写的更少；

3、基本使用：引入script，后面使用即可；

4、关于版本选择：1.* 版本的兼容性比较好，大公司用的多；

5、关于压缩版和为压缩版：开发用未压缩的便于看源码学习，生产环境用压缩版可以提高速度；

二、jQuery函数

1、入口函数

（1）入口函数：开发中一般用第三种

//1
$(document).ready(function () {
    alert("hello3")
});

//2
jQuery(document).ready(function () {
    alert("hello4")
})

//3
$(
    function () {
        alert("hello1");
    }
);

//4
jQuery(
    function () {
        alert("hello2");
    }
);

（2）加载模式

• jquery 的 ready 只会等待 dom 元素加载完毕，不等图片加载完；
• ready事件可以加载任意的元素上，无论加在什么元素上本质都是等待 dom 加载完毕触发；
• 几个元素同时加了 ready事件，按顺序执行；
• jquery 的 load 会等 dom 、样式和图片等一起都加载完，load 事件只有 window 对象才能加；
• 存在多个入口函数的话，jQuery 的不会覆盖，而原生的会发生覆盖；

------ tips--------

• jquery 链式操作的实现：set 属性的时候，最后都会 return this，返回相应的对象，所以才能实现链式操作；

（3）冲突解决：第一种使用jQuery 代替 $；第二种使用自定义的符号进行替代；

var $ = 123;
var jq = jQuery.noConflict();
jq(function (ev) {
    alert("haha");
})

2、核心函数

（1）核心函数

• $（）就代表调用jQuery 的核心函数；
• 核心函数的参数可以是：
• 1、函数：就是入口函数；
• 2、字符串选择器：包选择器选择到的元素包装为一个 jQuery 对象；
• 3、字符串代码块：将代码块代表的元素包装为一个 jQuery 对象；
• 4、dom元素：将原生的 dom 元素包装为一个 jQuery 对象；

（2）jQuery对象

• jQuery 对象的本质是一个伪数组；
• 伪数组就是有 index 和 length 的类似于数组的对象

var arr = {0:'2',1:'haha',2:'kk',length:3}

3、工具方法

（1）js 的静态方法和实例方法

• 静态方法：
• 直接加给类的就是静态方法，可以通过了类名调用；
• 实例方法：
• 添加给 prototype 的方法就是实例方法，通过实例调用；

function MyClass() {}
MyClass.staticTest = function () {
    alert("static method");
};
MyClass.prototype.insTest = function () {
    alert("instance method");
};
MyClass.staticTest();
var mycalss = new MyClass();
mycalss.insTest();

（2）遍历相关的方法

• each方法：
• 原生的 forEach 方法只能遍历数组，不能遍历伪数组；而 jquery 的 each 方法都可以；
• map方法：
• 原生的 map 方法只能遍历数组，不能遍历伪数组；而 jquery 的 map 方法都可以；

var arrlike = {0:'2',1:'haha',2:'kk',length:3};
var arr = [9,8,3,2,1];

arr.forEach(function (value,index) {
    console.log(index,value);
});
$.each(arr,function (index, value) {
    console.log(index,value)
});
$.each(arrlike,function (index, value) {
    console.log(index,value)
});

arr.map(function (value,index,array) {
    console.log(index,value,array);
});
$.map(arr,function (value, index) {
    console.log(index,value);
});
$.map(arrlike,function (value, index) {
    console.log(index,value);
});


//each返回遍历的数组，map返回空的数组
var arr = [9,8,3,2,1];
var each1 = $.each(arr,function (index, value) {});
var map1 = $.map(arr,function (value, index) {});
console.log(each1);
console.log(map1);

（3）其他常用的工具方法

• trim方法：去掉字符串的空格，返回没有空格的结果；
• isWindow方法：判断是否为 window 对象；
• isArray方法：判断是不是真数组的方法，伪数组是返回 false；
• isFunction方法：判断是不是函数；jQuery框架的本质就是一个匿名函数；
• holdReady方法：暂时阻止 document 的 ready 方法的执行；

$.holdReady(true);
$(
    function (ev) {
        console.log('ready');
    }
);
var but = document.getElementsByTagName('button')[0];
but.onclick = function (ev) {
    console.log('click');
    $.holdReady(false);
}

（4）WS的简化操作：添加常用的快捷键（settings-livetemplate-html/xml）记得最后要应用

三、jQuery的属性操作

1、内容选择器

（1）其他的选择器基本和 css 的选择器是一致的

（2）内容选择器

• div：empty：找到没有文本和子元素的div
• div：parent：找到有文本或者子元素的div
• div：contains（text）：找到包含指定文本的div
• div：has（selector）：找到包含指定子元素的div

2、属性和属性节点

（1）属性和属性节点

• 属性：对象身上保存的变量
• 属性节点：html标签中添加的属性就是属性节点
• 二者区别：
• 1、任何对象都有属性，dom对象才有属性节点；
• 2、浏览器开发工具的source的watch中选择得到的dom元素展开都是属性，其中 attributes 属性中保存的才是属性节点；
• 属性的操作：
• 1、设置：obj.attr = value      obj["attr"] = value
• 2、获取：obj.attr    obj["attr"]
• 属性节点的操作：
• 1、设置：span.setAttribute('name','haha')
• 2、获取：span.getAttribute('name')

（2）attr 和 removeAttr 方法

• attr：设置或者获取属性节点的值，传参一个就是获取，传参二个就是设置；获取只能获取到第一个匹配元素的属性，设置的话可以设置全部匹配的，没有的话就新增；
• removeAttr ：移除属性节点的值；删除所有

（3）prop 和 removeProp 方法

• prop ：特点和 attr 基本一致；
• removeProp ：也是一样的；
• 注意：
• 1、prop 既能操作属性节点，也能操作属性；
• 2、官方推荐操作属性节点的时候：像 checked、selected 和 disabled 这样属性值为 true 或者 false 的就用prop；其他的都用attr；

3、类操作和文本值操作

（1）类操作

• addClass：添加多个，多个之间用空格隔开；
• removeClass：删除多个也是这样的；
• toggleClass：切换的概念就是有就删除，没有就加上；

（2）文本值操作

• html（）：等同于原生的 innerHTML；
• text（）：等同于原生的 innerText；
• val（）：等同于原生的 value；这三个都是既可以设置也可以获取；

4、样式和尺寸位置的操作

（1）样式

• 可以逐个设置，也可以链式设置，还可以批量设置；
• 开发中一般批量设置用的多：

$('span').css({
    display:'inline-block',
    '100px',
    height:'100px',
    background:'red'
})

$('span').css('height','200px');
console.log($('span').css('height'))；

（2）尺寸

$('span').width("500px");
console.log($('span').width());

（3）位置

• offset（）：获取元素相对文档的偏移；有 left 和 top；能获取也可以设置；

var offset = $('.zi').offset();
var left = offset.left;
var top = offset.top;
console.log(left,top);
$('.zi').offset({
    top:300,
    left:400
});

• position（）：获取元素相对定位元素的偏移；有 left 和 top；只能获取；

var top = $('.zi').position().top;
var left = $('.zi').position().left;
console.log(top,left);

• scrollTop（）：获取网页滚动的偏移位；能设能取；取和设都要考虑兼容性；
• 1、局部滚动的写法

$('.content').scrollTop(100);
console.log($('.content').scrollTop());

• 2、网页滚动的兼容写法

$('body,html').scrollTop(300);
console.log($('body,html').scrollTop());

四、jQuery事件相关

1、事件的绑定和解绑

（1）绑定

$('button').click(function () {
    console.log('haha1')
});
$('button').on('click',function () {
    console.log('haha2')
})

• 第一种方法的效率高，但是有的事件 jQuery 没有实现；第二种方法效率低，但是所有的事件都可以用；
• 同一个对象绑定多个事件不会被覆盖 ；

（2）解绑

$('button').off();          
$('button').off('click');            
$('button').off('click',test2);

• 不传任何参数就是移除所有的事件；
• 传一个参数就是移除指定类型的事件；
• 传两个参数就是移除指定类型指定回调函数的事件； 

2、事件冒泡和默认行为

（1）冒泡

• 冒泡就是子父元素拥有相同的事件，子元素的事件触发会自动触发父元素的相同类型的事件；
• 通常需要阻止事件的冒泡：return false；event.stopPropagation（）；

（2）默认行为

• 默认行为就是比如 a 标签点击之后会跳转，但是我们人为并没有给它添加点击的事件；
• 有时候需要阻止事件的默认行为：return false；preventDefault（）；

3、事件自动触发和自定义事件

（1）自动触发

• trigger：会触发冒泡和默认行为；
• triggerHandler：不会触发冒泡和默认行为；
• a 标签的特殊情况：a 标签用这个两个都不会触发默认行为；想要触发默认行为的话可以把其中的文字用 span 包裹，再对 span 元素进行操作；

（2）自定义事件

• 必须用 on 绑定；
• 必须用 trigger 触发；

4、事件命名空间和事件委托

（1）命名空间

• 命名空间的作用就是用来区别相同类型的事件的（如 click.zs）；
• 命名空间有效的两个条件：
• 1、必须用 on 绑定；
• 2、必须用 trigger 触发；
• 说明：
• 1、用 trigger 触发子元素带命名空间的事件，父元素带相同命名空间的同类事件会被触发，没有命名空间的同类事件不会被触发；
• 2、用 trigger 触发子元素不带命名空间的事件，父元素同类事件都会被触发；

（2）事件委托（delegate）

• 含义：就是把事情给别人做，然后将结果反馈回来；
• 必备知识：通过核心函数获取到的元素不止一个的时候绑定事件的话会给每个元素都绑定；
• 应用场景：入口函数加载的时候不存在的元素，我们用核心函数获取到的相同的元素数组中是不含这个一开始不存在的元素的，所以添加事件的时候自然也就添加不上，这时候就要用到事件委托；
• 示例如下：

$('ul').delegate('li','click',function () {
    var index = $(this).index();
    alert("hello="+index);
});
$('button').click(function () {
    var $li = $('<li>i am insert li</li>');
    $('ul').append($li);
});

• 说明：
• 1、这里就是让 ul 帮 li 监听 click 事件；
• 2、能监听是因为 ul 早就存在不是后来添加的；
• 3、其中的 this 是来自事件的始发者，就是 li；

5、移入移出事件和练习

（1）移入移出

• mouseover、mouseout：会有冒泡；
• mouseenter、mouseleave：不会有冒泡，用的多；
• hover：出入都是他，可以里面指定两个回调函数，一个代表移入，一个代表移出；也可以只有一个回调，出入都是这个函数；

（2）练习

• 电影排行榜：
• tab 选项卡：jQuery 对象的 index（）方法；jQuery 对象的 eq（）方法返回 jq 对象；jQuery 对象的 get（）方法；

五、jQuery动画效果

1、显示隐藏

（1）show（time，fn）、hide、toggle

（2）参数：time 是设置动画的时间；fn是回调函数，会在动画完成后执行；

（3）练习：对联广告

• 获取网页滚动的偏移位：

  $('body,html').scrollTop();

  
• 设置网页滚动的偏移位：

  $('body,html').scrollTop(300);

  

2、展开收起

（1）slideDown、slideUp、slideToggle

（2）说明：

• 方法的参数和显示隐藏的一致；
• jQuery使用动画前建议先调用 stop 方法；
• children(selector)：返回直接子元素，不会返回文本节点，可以在里面加选择器对子元素进行过滤；

3、淡入淡出

（1）fadeIn、fadeOut、fadeToggle、fadeTo（time，tar，fn）

（2）说明：

• 本质就是调 opacity；
• 参数前三个和其他都是一样的，fadeTo多了一个 tar，就是要调到的目标透明度；

4、自定义动画

（1）语法：animate（json，time，speed，fn）

$span.animate({top:-50},function () {
    $span.css('top','50px');
}).animate({top:0});

（2）说明：

• 参数第一个是要添加动画的属性，后面的依次是动画时长、速度和回调； 
• 叠加动画：json里类似这样写{'+=10'}；
• 切换动画：json里类似这样写{'toggle'}；
• json 里支持多属性的同时修改；

5、stop 和 delay

（1）delay：就是延迟动画的执行，里面传一个时间参数；

（2）stop：停止动画，有四种情况

• 停止当前执行后续：不传参或者传入的参数都是 false；
• 停止所有动画：stop（true）、stop（true，false）；
• 完成当前执行后续：stop（false，true）；
• 完成当前停止后续：stop（true，true）；

六、jQuery节点操作

1、节点操作

（1）添加：

• 内部插入：append：指定元素内部最后插入；prepend：指定元素内部最前面插入；
• 外部插入：before：指定元素外部前面；after：指定元素外部后面；

var div = $('<div/>').text("Sup, y'all?").appendTo(document.body);
$('<span/>').text('Hello!').appendTo(div);

（2）删除：remove（detach）：删除指定元素；empty：删除指定元素的内容和子元素；

（3）替换：replaceWith

（4）复制：浅复制：clone（false）；只复制元素；深复制：clone（true）；既复制元素又复制元素的事件；

（5）微博案例（练习）

七、jQuery实现AJAX

1、php基本语法

（0）php文件：<?php   code   ?>

（1）两种注释：和 js 一样；

（2）变量定义：$count = 10；

（3）打印内容：echo count；

（4）集合定义和使用

• 数组：$arr = array(1,3,5)        print_r($arr)         $arr[1]
• 字典（对象）：$dict = array("name"=>"stan","age"=>"35")

（6）控制语句：

• if、switch、for、while 基本都是和 js 一样的；
• 循环中数组长度的获取：count（$arr）；

（*）wampserver安装

2、get 和 post 请求（略）

3、Ajax基本封装

• 在 js 部分的封装前提下，还需注意以下几点：
• ie 缓存问题；
• 参数的传递问题；
• 成功的代码不只 200；
• 添加超时的参数，利用定时器实现；
• 中文参数的处理：用encodeURIComponent（）方法编码；
• 参数全部转化为对象的属性；

4、jQuery 的 Ajax 封装

$.ajax({
    url: '/data.json',
    method: 'GET',
    success: function (data) {
        console.log(data);
    }
});

$.ajax({
    url: '/save',
    method: 'POST',
    data: { username: 'tom' },
    success: function (data) {
        console.log(data);
    }),
    error: function () {
        // Uh oh, something went wrong
    }
});

$.get('/data.json', function (data) {
    console.log(data);
}).fail(function () {
    // Uh oh, something went wrong
});

$.post('/save', { username: 'tom' }, function (data) {
    console.log(data);
}).fail(function () {
    // Uh oh, something went wrong
});

5、前后端数据的交互

（1）xml：操作 xml 和 操作 html 差不多；

（2）json：标准和非标准 json 串：var obj= eval("("+jsonstr+")")  都可以用这个方法转换为对象；

（3）cookie：一个cookie 保存一条数据；cookie 有大小和数量的限制；

1、三个重要的参数：

（1）expires：设置过期时间，默认的生命周期是一次会话；设置的时间为过去的时间的话 cookie 会立即删除；

（2）path：设置作用范围的，默认是同浏览器同路径，下级目录可以访问，上级不能；

（3）domain：设置 cookie 的有效域名的，浏览器在访问设置的域名的时候会携带 cookie；

2、cookie 的封装（新增获取删除和 jQuery 插件封装）

document.cookie = 'name=stan;expires=;path=/;domain=127.0.0.1';
console.log(document.cookie);

（4）hash：和 cookie 一样可以保存一些数据，cookie 不能跨浏览器，而 hash 可以

location.hash = 3;
console.log(location.hash);
console.log(location.hash.substring(1));