jQuery是一个轻量级的js库，jQuery的所有功能都可以通过JavaScript进行访问，兼容大多数浏览器，使得对html的文档遍历和操作，事件的处理，动画和Ajax操作更加简单
注意两点
-
从源码知道：
jQuery是一个类，jQuery()是一个实例（因为执行完成返回的是一个new，是实例） -
$().XXX$('div').html() 实例的方法
- 调用
jQuery的方法，即，使用$()来调用的方法都是在$.fn的命名空间中,指向到jQuery原型上面，或者说是jQuery上面的原型方法，即jQuery对象上的方法；并且会自动接收返回的this；原型上面只能实例使用；$()返回的是实例，所有原型上面的方法中的this都指向实例
-
$.XXX$.ajax() 类的方法
- 使用
$来调用的方法，不适用选择，不会自动传递参数，返回值会有不同；比如：$.trim()：去掉前后空格；$.each()：遍历数组和对象；$.extend(前对象，后对象)：使用后对象的属性改变前对象的属性，都有相同属性的前提下
效率
原生
js的效率要比jQuery低
window.onload=function(){
var oDiv=document.getElementById('div');
alert('我是原生JS')
};
$(document).ready(function(){
console.log($('.div1'))
alert('我是jquery')
})
// 或者这种写法
$(function(){
alert('我是jquery')
//....js代码})
从上面的代码可以知道，先弹出我是jquery，接着在弹出我是原生js，这就说明jquery的效率要比原生的js效率高，它们获取DOM元素的方式也不一样；在此可以知道：Window.onload是等页面所有的内容（视频，音频，DOM结构，图片）都加载完成的时候，才执行js代码；而$(document).ready(function(){js代码})是只要DOM结构加载完成，就开始执行js代码
选择器
- 基本的选择器
$('#div')$('.div')$('div')$('#div1 .div2 li')-
$('.div1,.div2')：同时选择多个
- 特有的表达式选择器(伪选择器)
-
$('div:first')：所有的div标签中的第一个；其效果和$('div').first()这个方法一样 -
$('div:eq(1)')：可以拿到开头和结尾的元素，也可以拿到中间的元素 -
$('div:not(:first)')：选中除去第一个的所有的元素 -
$('div:even')：偶数选择器，隔行换色 -
$('div:odd')：奇数选择器，隔行换色； 求余来计算隔行变色 -
$('div:lt(3)')：索引值小于3的所有元素 对应的有gt(3) -
$(':input')：input标签选择器 -
$(':input[type]')/$(':input[type ^=t]')：input标签的属性选择器；属性值以什么开头的选择器
-
jQuery实现的选项卡
以前使用过原生的JS实现了选项卡，基本上的思路是：获取要操作的元素，for循环遍历，在遍历的时候执行事件操作，当然在循环的时候执行异步的事件操作的时候，循环里面的i值是错误的，可以通过闭包或者自定义属性的方法来把正确的i值传递给事件，当点击的时候，先把所有的样式去掉，然后给点击元素加上点击的样式，对应的内容区域显示
html代码
<div class="wrap">
<button class="active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div class="show">内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
css代码
.wrap{
width: 600px;
height:300px;
font-size: 20px;
}
.wrap button{
width: 200px;
height: 40px;
float: left;
font-size: 20px;
}
.wrap button.active{
background: lightblue;
}
.wrap div{
width: 100%;
height: 260px;
clear: both;
display: none;
background: lightblue;
}
.wrap div.show{
display: block;
}
js代码
$('button').click(function(){
$(this).addClass('active').siblings('button').removeClass('active'); // 按钮点击的时候给其添加active样式，并且其余的兄弟元素除掉active样式
$('.wrap div').eq($(this).index()).addClass('show').siblings('div').removeClass('show');
})
取值赋值合体
-
.attr()：里面可以传入一个属性（获取属性值）或者一个键值对（给属性设置属性值），或者是包含多个键值对的对象，对于那些需要单位的属性值不用加单位 -
.css()：效果同上 -
.val()：不写参数的时候是获取对应的value值，写入参数的时候是设置value值，表单元素的值 -
.html()：效果同上
区分
val()和html()
- val针对表单元素的值；input textarea select
- html针对普通标签元素的值；div p span h1
jquery与js之间的转换
js和jQuery是可以转换的，把js转为jquery就是把js代码用$(JS对象)包裹起来，jquery转js就是把获取的一堆jquery对象在后面[index]或者get(inedx)
var $aDiv=$('div');// 这个是获取的jquery对象，一堆的div元素 ；但是不用遍历，直接使用`css`方法：$aDiv.css('background','bule');
// jquery转为js
$aDiv.get(i) 或者 $aDiv[i] -----> 接着js转为`jQuery`对象：$( $aDiv[i])才能继续使用`jQuery`对象的方法来操作`CSS`：$( $aDiv[i]).css('background','red')
jQuery的DOM方法
- parent
- parents
- children
- next
- nextAll
- prev
- prevAll
- index
- siblings
动态创建一个元素：
$('<div></div>') 或者 $('<div>')
创建的元素插入到页面中：功能相同，针对的主体不一样
- 父级元素.append(元素) -----返回的this是作用在父级元素上面
- 元素.appendTo(父级元素)-----返回的this是作用在元素上面
对应的有：
- insertAfter：在后面插入
- after
- insertBefore：在前插入
- before
- prependTo
- prepend：插入到容器的前面
- remove()：移除
获取body的方法：$('body')
jQuery的数据交互
$.ajax({})
表格操作提交，一定要有name值
<form action='提交的地址：www.baidu.com' target='_blank'>
<lable for='username'>
用户名：<input type='text' name='这个地方告诉后台用户输入了什么数据username' id='就是跟lable中的for一样，这样才能点击lable输入框聚焦：username'>
</lable>
<lable for='password'>
密码：<input type='password' name='这个地方告诉后台用户输入了什么数据password' id='就是跟lable中的for一样，这样才能点击lable输入框聚焦：password'>
</lable>
<p><input type='submit' value='提交数据'></p>
</form>
- js代码，数据交互
$('input[type=button]').click(function(){
$.ajax({
url:'json/data.txt?'+Math.random(),// 请求地址，加随机数，来清除缓存
type:'get',// 请求方式
dataType:'json',// 返回数据的格式
async: true,// 是否异步 不写默认异步（true），同步（false）
data:`username=${$('#username').val()}&password=${$('#password').val()}`,// 模版字符串拼接（手写） 给后台传递的参数，获取提交的数据
// data:$('form').serialize(); 表格序列化，一样的功能，帮忙实现了一个key=value的键值对的字符串
success:function(val){
var data=val;
console.log(data);
}, // 请求成功
error:function(val){
// 请求失败
}
})
})
动画
- hide（）
- show（）
- toggle（）：这个功能包括上面两个功能，
js可以使用状态判断的方法实现前面两个功能 - slideUp()：百叶窗的效果，收；这个方法是用定时器写的，所以使用这个方法之前要先关闭不必要的定时器：元素.stop().slideUp()
- slideDown()：拉，同上
- slideToggle()：同时实现上面的功能，也要停止多余的定时器
- fadeOut(2000，function(){ })：淡出，可以传入参数，函数，运动的时间
- fadeIn()：淡入，也有关掉多余的定时器
- fadeToggle()：
- animate(target，time，effect，callback)：参数可以直接传入css对象｛height:200,width:300｝,时间，运动，事件函数
- stop()：开启运动之前，先停止运动
事件绑定
-
DOM0级事件同一个元素身上，只能绑定一个事件，否者后面的会覆盖前面的事件（原生JS）
-
jQuery中绑定事件
on(事件，事件行为)：绑定事件（可以执行多次）----$('div').on('click',fn2)one(type,fn)：绑定事件（只能执行一次）off(什么事件，事件的行为(具体的函数，有名函数))：解除绑定（只能解除有名字的函数）----$('div').off('click',fn2)
插件（直接调用就可以）
- 给类创建插件（静态方法的添加，直接给类添加的）工具函数
$.extend({tab:function(){}})
选项卡插件
// 作为一个插件，就是要成为jquery的组件，方法就应该不能写死
// 静态方法的添加，extend：扩展
$.extend({
tab:function(ele){
var $aBtn=$(ele).find('button');
var $aDiv=$(ele).find('div');
$aBtn.click(function){
$(this).addClass('active').siblings('button').removeClass('active');
$aDiv.eq($(this).index()).addClass('show').siblings().removeClass('show');
}
}
})
// 调用插件，直接在代码里面引入js代码，执行`$.tab(.wrap)`就行，选项卡插件
- 给实例添加，给原型上面添加插件
$.fn.extend({})
$.fn.extend({
tab:function(){
var $aBtn=this.find('button');
var $aDiv=this.find('div');
$aBtn.click(function){
$(this).addClass('active').siblings('button').removeClass('active');
$aDiv.eq($(this).index()).addClass('show').siblings().removeClass('show');
}
}
})
// 在代码里面调用，引入js文件，执行`$('.tab1').tab()`,实例调用
jQuery的each()方法
想要知道一个方法传入了什么参数，使用
arguments打印出来；想知道参数是原生的js对象还是jQuery对象，把参数打印出来，原生js对象是标签之类的，只有foreach()方法来遍历数组对象，jQuery对象是数组之类的
-
传入两个参数
- item （索引值对应的对象）
- index （索引值）
-
$.each(要变量的对象，callback回调函数（Index,item）{})
- 类的方法
- 可以遍历jQuery对象
- 也可以遍历原生的数组，原生的js对象
-
实例.each(callback回调函数（index,item）{})
- 实例的方法 $('li')返回的就是实例
- 只能遍历jQuery对象
-
map()的用法和each()差不多，就是参数的位置不一样，正好相反
网友评论