jQuery学习笔记 干货
## jQuery封装对象#### 获取元素的方法
```javascript
$('#test1').css('background','red'); //使用ID获取元素
$('.test2').css('background','red'); //使用CLASS获取元素
$('p').css('background','red'); //使用标签名获取元素
$('div ul').css('background','red'); //获取DIV中所有UL的元素
$('div+ul').css('background','red'); //获取紧挨着DIV的下一个UL元素，如果下个同级的不是UL元素则获取不到
$('div~ul').css('background','red'); //获取DIV之后的所有同级UL
$('input').css('background','red');//获取INPUT元素NAME值为PASSWORD的元素
$('input').css('background','red'); //获取Input元素中name值含有ss的元素
$('input').css('background','red'); //获取input元素中name值以ss开头的元素
$('input:text').css('background','red'); //获取input元素中type值为text的元素
$('li:first').css('background','red'); //获取li标签的第一个元素
$('li:last').css('background','red'); //获取li标签中的最后一个元素
$('li:odd').css('background','red'); //获取偶数的li标签，也就是第2、4、6……
$('li:even').css('background','red'); //获取奇数的li标签，也就是第1、3、5……
$('li:contains(女)'); //获取含有“女”字的li元素
$('li:parent'); //获取有子元素的li标签
$('li:empty'); //获取没有子元素的li元素
$('li:has(span)'); //获取含有span标签的li元素
$('li:hidden'); //获取隐藏的li标签
$('li:last-of-child'); //获取每一级中最后一个li元素
$('li:first-of-child'); //获取每一级中第一个li元素
$('li a:only-child'); //获取只有一个a元素子级的li元素
$('img').attr('src').indexOf('off'); //返回"off"字符在img元素scr属性中第一次出现的位置，-1则没有该字符串
$('img').attr('src','./tu.png'); //设置img的src属性为“./tu.png”
$('img').prop('src','./tu.png'); //设置img的src属性为“./tu.png”
$('ul').remove(); //移除ul元素
$('ul').empty(); //清空ul中的所有子元素
$('input:text').wrop('<p></p>'); //用p标签将input:text元素包住
$('<li>元素</li>').appendTo('ul'); //将“li”元素插入ul标签中，在最后插入
$('ul').append('<li>元素</li>'); //将“li”元素插入ul标签中，在最后插入
$('ul').prepend('<li>元素</li>'); //将“li”元素插入ul标签中，在最前插入
$('div').width(); //获取div的宽度，以此类推
$('div').css('width'); //获取div的宽度，以此类推
```
## jQuery常用函数
##### 使用P标签将span包住
```javascript
$('span').wrap('<p></p>'); //使用P标签将每一个span包住
$('span').wrapAll('<p></p>') //只使用一个P标签将所有span标签包住
$('span').wrapinner('<p></p>');//使用P标签将span里面
```
##### jquery对象与js原生对象的相互转化
```javascript
//原生对象转JQ对象
var a = document.getElementById('biaoqian'); //获取原生对象
$(a); //转成JQ对象
//JQ对象转原生元素===第一种===
$('input').get(0); //获取JQ元素后直接转成元素的元素。
//===第二种===
$('input'); //获取JQ对象后直接转成元素元素
//JQ获取准确的元素，不转成原生
$('input:eq(0)'); //直接获取到准确元素
```
##### jquery绑定事件
首先要知道JQ怎么获取元素值
```javascript
$('input:eq(0)').val();//这样就直接返回input的元素值
```
下面看看JQ对象与原生对象绑定的区别
```javascript
//原生绑定事件
var inp = document.getElementById('bd');
inp.onblur = function () {
alert('我是原生事件');
}
inp.onblur = function () {
alert('我是原生事件2');
}
```
以上代码运行结果，只弹出一个框 “我是原生事件2”这个窗口。由此可见，js原生绑定事件的时候，多次绑定，后面的会覆盖前面的。而JQ有所不同，请看以下代码：
```javascript
//jquery事件绑定
$('input').blur(function(){
alert('我是JQ事件绑定');
});
$('input').blur(function(){
alert('我是JQ事件绑定2');
});
```
JQ在事件绑定上有着不一样的理解，多次绑定则执行多次，以上代码执行结果 第一次弹出“我是JQ事件绑定”第二次弹出“我是JQ事件绑定2”。
###### 总结：JQ在绑定对象的时候多次绑定执行多次，原生在事件绑定上后面覆盖前面只执行最后一次的绑定。在JQ事件绑定时不加ON，比如原生需要元素.onblur而JQ则元素.blur()
### 在页面加载完成之前就执行
默认情况下javascript执行要等到页面全部都加在完成之后才能运行（相当于window.onload = function () {}），而jQuery有一个对象可以在页面加载完成之前就执行(ready)。下面我们就来看看这两者的区别吧！
首先要说的就是HTML加载顺序
1、浏览器向服务器发起HTTP协议请求，解析收到后的HTTP文本，后不断向服务器发起请求，请求资源，但不请求图片资源
2、请求外部脚本
3、解析脚本代码
4、构造HTML DOM模型 //这里是READY事件
5、到这一步了，就可以再向服务器发起请求了，请求图片资源
6、页面加载完成 //这里是LOAD事件
有人问为什么不直接一次性的将所有资源请求下来，而是最后才请求图片呢？
非官方回答，仅凭个人理解：因为图片资源较大，影响页面的加载速度。而将图片放在最后加载可以大大的减少页面的加载时间
下面开始写代码
```javascript
//以下代码在页面加载完成之后才执行
window.onload = function () {
alert('我是在页面加载完成之后才弹出来的哦');
}
//以下代码在浏览器页面加载完成之前就执行
$(document).ready(function(){
alert('页面还没有加载完成，我是偷偷跑出来的，哈哈');
});
```
## jquery的动态事件绑定
正常的情况下我们绑定事件是一直绑定的，而jquery给我们提供了一种可以动态的绑定事件bind，其实使用javascript原生代码也可以写，但是那个代码量。。。
开始写代码...
```javascript
//先看JS原生的事件绑定
var inp = document.getElementById('input');
inp.onclick = function () {
alert('我是JS原生事件哦');
}
```
按着这种代码写，是不可能实现动态的原生绑定事件的
```javascript
//先写个按钮，获取按钮，点击按钮后，把事件绑定到div上
$('input').click(function() { //bind(要绑定的事件，触发事件后要执行的代码)
$('div').bind('click',sj); //这里直接可以写匿名函数，但是考虑到我们要解除绑定就单独写一个有名字的函数吧！注意哦这里的函数名字是不加引号和括号的啊！！！
});
function sj(){
alert('我是动态绑定的弹框哦');
}
```
这样的话事件就绑定成功咯，下面我们看看如何解除绑定
```javascript
//解除绑定用到的是unbind
$('input').unbind('click',sj); //哈哈，一个代码轻轻松松搞定。unbind(要接触什么事件，要接触事件的内容是啥);
```
###### 总结：对于动态绑定好需要取消的事件，最好在外面单独写一个函数，这样好取消。注意哦，函数名不加引号和括号！！！
## jquery一次性绑定事件
这个事件呢，恩，大家能经常上网的看到，比如要下在哪个电影，第一次点击没用，直接给我个弹框广告，第二次点击才有用。只能执行一次。如果广告被关了还想看看广告。那么请你F5。哈哈不聊了，说正事
```javascript
//将全网页设置个点击弹框的事件，并且只执行一次
$(document).one('click',function(){
alert('哈哈，你点了我，只能看到我一次。');//这个弹框只执行一次
});
```
###### 说实话这个功能确确实实没有什么作用，大家也不要拿来做什么坏事。做了也别说是我教的啊===好了。看一下格式 元素.one(触发什么事件，触发了事件干啥);
## 事件委托
当你点击一个表格的时候，就弹出一个框，框里是这个表格的内容，这样的话我们看看有多少个表格就写到少个onclick事件。完美~，你先试试看看好不好使，肯定好使，但就是累死你
事件委托就是绑定一个事件然后动态的取你要的内容！JS原生有时间委托我们都很熟悉，现在来看看JQ的事件委托
```javascript
$('table').on('click','td',function(){
alert($(this).html());
})
//当然你也可以给个参数，同原生原理
```
###### 总结：我们先来看看On对象的具体参数on(触发啥事件，在哪个标签触发，触发号干啥)
## JQ的动画效果
一些网站上的广告啊、购物网站啊都是用的此效果哟
```javascript
//将DIV动态的隐藏
$('div').hide(1000,function(){
alert('我走了，别想我，像我给我打电话');
});
```
###### 对象分析：元素.hide(消失过程的事件，消失完之后要执行啥？还是啥都不执行);
还有几个效果
```javascript
$('img').delay(1000);//延迟1秒后执行
$('img').slideUp(1000); //收起效果，过程1秒
$('img').slideDwon(1000);//放下效果，过程1秒
$('img').fadeIn(1000);//淡入效果，过程1秒
$('img').fadeOut(1000);//淡出效果，过程1秒
```
###### 总结：同样以上动画效果均可以加入第二个参数执行动画完后执行的代码
## jQuery使用GET发送数据
之前我们使用JavaScript发送什么post数据啊什么get数据啊。麻烦的不行，现在jQuery来搞定你的烦劳，不要999行，不要888行，只要三四行搞定你所有的需求
```javascript
//get方式发送请求
$('input').click(function(){
var url = './cl.asp';
$.get(url,function(ev){
ev?alert('用户名已存在'):alert('用户名可用');
});
});
```
###### 对象分析：$.get(请求什么地址，请求后干啥 匿名函数可以加参数取返回值)
```javascript
//post方式发送请求
$('button').click(function(){
var db = {
'name':$('input:text').html()
}
var url = './cl.asp';
$.post(url,db,function(e){
e?console.log('用户名可用'):console.log('用户名被占用');
});
return false;
});
```
###### 对象分析：$.post(请求的地址，数据对象，请求好干啥啊)
###### 总结：使用post发送数据前先要将数据整理成对象。如果你牛逼可以在参数上填写对象
## 使用ajax发送请求
```javascript
$('button').click(function(){
var a = {
'type':'post',
'data':'name=小明',
'success':function(e) {
e?confirm('用户名可注册'):confirm('用户名被占用');
}
}
$.ajax('./cl.asp',a);
});
``` 笔记记得较机械，jQ的魅力还有很多呢，多分析一下源码，还有要安装一个好一点的编辑器，跟踪一下源码，es6用起来甩掉一堆冗余的代码 感谢楼主分享，mak 学习了,收藏备用! 学习了，收藏 常用的学习一下，感谢分享。{:301_997:} 牛逼，堪比api。谢谢 哇
我今天刚学到jQuery
然后楼主大大这么给力 在页面加载完成之前就执行 谢谢，正要学JS 感谢你的分享
页:
[1]
2