jQuery入门

一，简介

jQuery是一个前端工具库，主要解决了操作DOM元素。
库，只是对某一项技术进行升级，比如说JQ针对JS的升级。
JQ是一个js文件， 基于js面向对象写出。

框架是对多种技术进行升级。
JQ库：减少DOM操作， VUE ,REACT框架：不操作DOM ，只会控制数据。（数据驱动框架）

jquery历史：2006年诞生，全球前100万的网站 ，70%（百度，微软。。）

jquery1.0.0 版本号.中版本.修正版本
jquery1.2.6(双数更稳定)
jquey3.5.1 (2020.5.4)

jquery1.0.0 1版本兼容所有浏览器， 文件比较大。

jquery2.0.0 2版本不再去兼容IE低版本（6，7，8），文件会比较小（比较适合在移动端）

jquey3.0.0 3版本对2这个源码进行了改进，加入了es6的东西，模块化的东西。对整个性能进行了提升。
3和2在使用上是没有区别的。

jQuery对象

jQuery是一个类，是一个函数，调用jQuery（$)方法返回一个jQuery的实例，叫jQuery对象、
jQuery对象是一个类数组对象，有数字下标和length属性。
数字小标对应的是原生元素，length表示当前的jQuery对象中一共包含多少个原生元素。

jQuery向全局中添加了$和jQuery两个对象，是同一个地址，为了防止$和jQuery被占用， $.noConflict()

var my$ = jQuery.noConflict(true)//解决变量名称冲突的问题 不带true表示放弃$,带参数true表示两个都放弃

二，操作

命名规范， 在变量前面加一个$ ,这是人为规定的 （不加不会报错）

为了区分原生js , 前面带有$的必然是jquery元素。

var $lis = $('ul li');

一，选择元素

注：CSS中的选择元素，在JQ中都是支持的。

$（selector)返回值是一个jQuery对象，jQuery对象才拥有以下所有的jQuery方法。

只有jQuery3.x版本支持css3选择器

$ 函数的用法 — 获取元素

var $a = $(".a") //选择了class名称中含有a的           

将jQuery对象转为原生对象的方法 ， 一旦转换完毕就不可以调用jQuery方法了。
$a[0]
$a.get(0)

在原生js中， 想要改变ul中的li的属性， 需要遍历

var lis = document.querySelectorAll('ul li');
for(var i=0;i<lis.length;i++){
	lis[i].style.background = 'red';
}

在jQuery中，封装好的面向对象， 直接用，会省略遍历集合的操作，非常方便。
jQuery === $ 等价关系

jQuery('ul li').css('background','blue');
$('ul li').css('background','blue');

children()方法， 找所有孩子

$('ul').children().css('background','red');

html() , 找到元素的内容 ，类似于原生中的innerHTML

console.log( $('#elem').html() );

取值与赋值，很多时候用一种方法 ， 通过方法的参数来区分的 。

$('#elem').html('bbbb');
console.log( $('#elem').css('margin') ) ; // 50px

attr() : 来获取或者设置元素的属性值的

console.log( $('#elem').attr('title') );
$('$elem').attr('data-color','red'); //自定义的属性也可以（原生js不可以，要用getAttribute（），或者dataset.）

console.log( $('input').val('hi') );

如果操作多个元素的时候 ，怎样取值与赋值 ？

console.log( $('input').val('hi') );//赋值是操作所有元素

console.log( $('input').val() );//多个元素取值的时候 ，取第一个 。 

text() 只会获取文本 ， 不会获取标签
console.log( $('div').text() ) //特殊性，  多个元素会取出多个内容文本
$('div').text('<h1>标题</h1>');

链式操作：为什么那么多人喜欢用JQ的原因 ， 写更少的代码做更多的事情。

注：链式操作只能针对设置，不能获取。

强大的$

页面执行完再执行window.onload里的代码（等整个页面加载完：DOM, 图片，视频，iframe）

只等DOM加载完， 而不是等整个页面

document.addEventListener(‘DOMContentLoaded’,function(){ })

$(function(){
console.log(‘DOM加载完’); // 相当于jq中加了个函数DOMContentLoaded ，等DOM加载完
})

二，创建元素

$(html)返回值是一个jQuery对象

var $a = $("<div>haha</div>");

//创建一个p标签 $('<p>');
//JS原生 :
 var p = document.createElement('p');
p.innerHTML = '内容';

//JQ :
var $p =  $("<p>内容</p>");

三，追加操作 appendTo

JQ的DOM 操作

var $p = $('<p>内容</p>);
$('div').append($p);

简化成

$('div').append('<p>内容</p>');

var $p = $('<p>内容</p>);
$p.appendTo( $('div') );

append() 与 appendTo() 区别 ：针对后续操作的时候是不一样的。

$p.appendTo( $('div') ).css('border','1px black solid'); //边框加到p 上

$('div').append($p).css('border','1px black solid'); // 边框加到div上

$(xxx).appendTo(parent) 将选中的元素追加到父元素中
$(xxx).append(child) 将子元素添加到选中的元素中

appendTo方法既可以使用原生元素 又可以使用jQuery对象 又可以使用选择器字符串 作为参数

如果选择器选择的是多个元素，则每一个元素都会追加一个当前的$a

var $body = $("div")
$a.appendTo($body)

$b.appendTo("div") //子追加到父 ， 子是最后一个儿子
$("div").append($b) //父添加子
$xx.prependTo() //子追加到父中 ， 子是第一个儿子
$xx.prepend()// 父添加子 ，子是第一个儿子

四，移除元素 remove() ，detach()

区别 ， 会不会保留数据或者事件
detach() 会保留之前元素的行为 （一般不会有这样的需求）

$("li").remove();
$("li:nth-child(2)").remove()

var $li = $('li').remove();
$('#ul').append($li);

五，修改元素属性

类的操作
添加类：addClass ,移除类：removeClass, 判定是否有类： hasClass ,切换类：toggleClass（点一下有类，点一下没有）

$("ul").addClass("box").addClass("red").addClass("lsn").removeClass("red")

var res = $("ul").hasClass("lsn");
console.log(res) // true

$('div').addClass('box1 box2 box3');

$('div').removeClass('box1');

$('div').toggleClass('box3'); //当这个class没有，就是addClass ,如果这个class有 ，就是removeClass

原生js也可以add , toggle .

document.querySelector('div'>.classList.add('box2');

六，克隆元素 clone（）

$('#ul').append( $('li') ) // 页面已经有li ，还append , 相当于剪切。

var $cloneli = $('li').clone();
$('#ul').append( $('cloneli') ) // 复制过来

var $cloneli = $('li').clone(true);// 默认是false ,true 就可以把行为事件也复制过来。
$('#ul').append( $('cloneli') )  

七，操作css行内样式

$xx.css()设置行内样式，如果不传递参数，会报错。

如果传递一个参数，并且是css属性字符串，会返回该元素的计算后样式的值（值的数据类型是字符串）

var $a = ${"<div></div>").css("width")
console.log($a) //返回width的值

如果传递两个参数，就表示设置属性，

var $a = ${"<div></div>").css("border","200px solid red")

如果传递一个参数并且是对象 会将该对象的每一个属性名当做css属性名 对应的属性值当做css属性值 可以一次设置多条属性

var $a = ${"<div></div>").css({
	width:100,
	height:200,
	backgroundColor:"red"
})

八，属性操作

在原生中操作html属性，用setAttribute（），getAttribute（） ，removeAttribute（）
在jQuery中，要使用attr方法， removeAttr（）方法

设置attr(key,value)

$("div").attr("class","a").attr("class","b")
$("div").attr("hello","hehehe") //该方法用于操作html属性，html属性分标准属性，自定义属性，attr方法都可以操作

获取attr(key)

var $res = $("div").attr("hello")
console.log($res)

推荐的自定义属性写法是 data-xxx

$("div").attr("data-a","aaaa").attr("data-b","bbb")

删除 removeAttr(key)

还有data 和 prop 方法来操作属性

九，事件绑定

click() 给元素添加点击操作

$('#elem').click(function(){
	console.log(123);
})

var elem = document.getElementById('elem');
elem.onclick() = function(){
	console.log(this.innerHTML);
}

JQ和JS是可以共存的，但是不能混用
在JQ事件中 ，this是原生JS中的this ， 如何变成JQ的this呢 ？ $(this)

$('#elem').click(function(){
	console.log( this.html()) ;//错误：混用， 前面原生+ 后面JQ (html() )
	console.log( this.innerHTML ) ; //正确 ： 前面原生 + 后面原生
	console.log( $(this).html()) ; //正确 ： 前面JQ  + 后面JQ
	console.log( $(this).innerHTML ) ; //错误 ： 前面JQ + 后面原生
})

$xxx.事件名称（）

链式调用原理：返回的是同一个对象
jQuery中绑定事件，使用的是dom2级绑定，所以可以绑定多个
事件函数中的this指的是原生元素
$函数的第三个用法是讲原生元素转为jQuery对象

$div.off(“click”,fun)移除事件

off方法有三个使用方式，如果不传参数，会将所有的事件都清空，
如果传递一个参数，并且是字符串，会清空该类型的参数（click），
如果传递两个参数，第一个参数是字符串，第二个参数是函数，表示清空该类型下的该处理函数，其他的该类型下的函数保留

var $div = $("div></div>").appendTo("body").css({
	width:100,
	height:100,
	backgroundColor:"red"
}).click(function(){
	$(this).css("backgroundColor","blue");
});

$div.mouseenter(function(){
	console.log("进入了")
}

$div.off("click")

快捷尺寸

委托模式

AJAX

  $.ajax({
  		url : './data.json' ,
  		success(data){
  			console.log(data) //获取到的json数据
  		},
  		error(err){  
			console.log(err)
		}
	})

  $.ajax({
  		url : './data.json' ,
  		type :'POST',
  		data : {age : 20}
  		success(data){
  			console.log(data);
  			JSON.parse(data);
  		}
	})

当success返回是字符串 ，dataType : ‘json’ 自动解析成json

  $.ajax({
  		url : './data.json' ,
  		type :'POST',
  		dataType : 'json', // 返回的文件能解析出json , 不需要写JSON.parse(data)
  		data : {age : 20}
  		success(data){
  			console.log(data);
  		}
	})

async 默认是true 异步

JQ的ajax

十，集合的长度

JQ的length属性 （注意不是方法），返回集合的长度

$('li').length

length还有一个在JQ中的小技巧 ：容错处理

document.querySelector('#elem').style.background = 'red' ; //程序中没有elem这个元素会报错
$('#elem).css('background','red' ); //用JQ找不到这个元素也不会报错
console.log( $('#elem').length ); //一旦看到0 ，那么获取元素是失败的 

十一，显示隐藏

$('button').click(function(){
	$('div').hide();  // display: none 
	$('div').show();
	$('div').toggle(); //显示隐藏之间的智能切换
	$('div').toggle(1000); //动画效果。括号里是时间。1s完成隐藏显示功能。
})

十一，集合

eq()表示集合中的第几项。 0是集合的第一项

$('li').eq(1).css('background','red');

for(var i=0;i<$('li').length;i++){
	$('li').eq(i)..html(i);
}

$('li').first().css('background','red');// 和eq（0）等价

$('li').last().css('background','red'); // length -1 等价

$('li').slice(1,3).css('background','red'); // 截取一个范围，包含起始位置，不包含结束位置

$('li').children().css('background','red'); //找到所有的孩子

$('li').find('li').css('background','red'); //找到所有的li元素

$('li').prev().css('background','red'); // 上一个兄弟

$('li').next().css('background','red'); // 下一个兄弟

$('li').nextAll().css('background','red'); // 下一个所有的兄弟

$('li').prevAll().css('background','red'); // 上一个所有的兄弟

$('li').prevAll().css('background','red'); // 上一个所有的兄弟

$('li').prevAll('h1').css('background','red'); // 参数可以实现条件
$('li').next('h1').css('background','red'); 

$('p').parent().css('background','red'); //找到他的父亲
$('p').parents().css('background','red'); //找到他的所有的祖先

查找之王

$('p').closest('div').css('background','red'); // 找 离得最近的 div
$('p').closest('li').css('background','red'); // 找 离得最近的 li

十二，索引

index()

第一种用法 ：在兄弟中的排行
第二种用法：筛选后的排行

例子，标签页，选项卡，轮播图， 评分（豆瓣）

十三，包装

$('span').wrap('<div>');  //给每个span外面添加一个包装，div
$('span').wrapAll('<div>'); //给所有的span外面添加一个div

$('span').wrapInner('<div>'); //内部包装
$('span').unwrap(); // 删掉父元素 ，body是不能删除的，其他父元素都可以

十四， get() 方法

用JQ的目的是简化js的操作 ， get（）方法是把获取到的JQ元素转换成原生

get() 转完是一个原生的集合

$('h1').get(0).style.background = 'red' ;

意义在于 ，有些时候JQ操作元素并没有想要的方法， 而原生中有这个方法。

console.log( $('textarea') == $('textarea') ) // false 
//比较的时候 ， 不仅要值相同 ，还要有相同的内存地址 ，

console.log( [] == [] ) // false ,虽然在堆里面长得一样 ，但是在栈里的内存地址不一样

十五，元素的尺寸

$('#elem').width() ; //width
$('#elem').innerWidth() ; // width + padding
$('#elem').outerWidth() ; // width + padding + border
$('#elem').outerWidth(true) ; // width + padding + border +margin

$('#elem').width(500) ;//给宽设置成500 

console.log( $('#elem').get(0).offsetWidth ) //原生js是获取不到隐藏元素的尺寸的。
console.log( $('#elem').width() ) ;//JQ的尺寸操作可以获取隐藏元素的尺寸大小

可视区大小

console.log( $(window).width() );

页面的大小

console.log( $(body).height() );

滚动距离

$(document).click(function(){
	console.log( $(window).scrollTop() );
})

距离

offset() :得到一个元素距离页面的位置

$('#elem').offset() //返回一个对象 {top:10,left:18}

$('#elem').offset().position() // margin不生效，不影响定位