jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery选择器及链式编程
// 基本和层级选择器
$("#id") $(".class") $("div") $("div,li,span") $("li.current")
console.dir($('li.current'));
$('li.current').css({
color: 'white',
background: 'pink',
});
// 层级选择器
// 层级选择器最常用的两个分别为：后代选择器和子代选择器。
$("ul li") $("ul>li")
$('ul li').css({
background: 'blue',
});
// 隐式迭代 // 被选中的元素都添加了样式，默认自带循环效果。
$('div').css('background', 'red')
$('ul li').css('color', 'blue')
// 筛选选择器
// 筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :
$("li:first") $("li:last") $("li:eq(2)") $("li:odd") $("li:even")
// 筛选方法
// 筛选方法-选取父子元素
$('.son').parent() // 选取父子元素
$('.nav').find('p') // 查找该父元素nav中嵌套的p标签子元素
$(function () {
console.log($('.son').parent()) // w.fn.init [div.father, prevObject: w.fn.init(1)]
$('.nav').find('p').css('color', 'blue') //find查找该父元素nav中嵌套的p标签子元素，全部会找出来。
})
// 其他筛选方法
$('ol >li').siblings('li') // 兄弟元素siblings 除了自身元素之外的所有亲兄弟
$('ul >li').eq(4) //查找该子元素
$('ul >li').eq(变量名) //查找该子元素
$('ol >li').hasClass('item')//判断是否有某个类名,返回布尔值。
// 判断是否有某个类名
console.log($('ol >li').hasClass('item'))//true
// 链式编程
$(this).css('color', 'red').sibling().css('color', '');
$('ul li').click(function () {
$(this).css({ background: 'red' }).siblings().css('background', '');
});
// jQ 转 JS 两种方法： 方法1： [0] | 方法二： .get(0)
console.log($('ul li').text());
console.log($('ul li')[0].innerHTML);
console.log($('ul li').get(0).innerText);
// 修改样式操作类
// 作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
$('.box').addClass('current'); //1. 添加类
$('.box').removeClass('current'); //2. 移除类
$('.box').toggleClass('current'); //3. 切换类
// 电商商品切换
$('ul li').click(function () {
var index = $(this).index();
console.log(index);
$(this).addClass('current').siblings('li').removeClass();
$('.container > div').eq(index).show().siblings('div').hide();
});
jQuery-动画
// jQuery 给我们封装了很多动画效果，最为常见的如下：
// - 显示隐藏：show() / hide() / toggle() ;
// - 滑入滑出：slideDown() / slideUp() / slideToggle() ;
// - 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
// - 自定义动画：animate() ;
$('button')
.eq(0)
.click(function () {
$('div').toggle();
});
$('button')
.eq(1)
.click(function () {
$('div').slideToggle();
});
$('button')
.eq(2)
.click(function () {
$('div').fadeToggle(1000);
});
$('.box').click(function () {
$(this).animate({
top: '300',
left: 500, //如果是数字，可以不用加引号和px，但是建议加上引号和px单位。
opactiy: 0.5, //.5不推荐，推荐写0.5
width: 500, // backgroundColor在jquery中设置是无效的
});
});
jQuery 属性操作
// 设置或获取元素固有属性值 prop()
// 设置或获取元素自定义属性值 attr()
$('img').prop({
src: '../image/衣服.jpg',
alt: '衣服',
});
$('a').prop({
href: 'https://www.jd.com',
});
$('span').attr({
id: 1,
name: 'zs',
});
jQuery 内容文本值
// 主要针对元素的内容还有表单的值操作。
// 1. 普通元素内容 html()（ 相当于原生inner HTML)
// html() // 获取元素的内容
// html(''内容'') // 设置元素的内容
// 2. 普通元素文本内容 text() (相当与原生 innerText)
// text() // 获取元素的文本内容
// text(''文本内容'') // 设置元素的文本内容
// 主要针对元素的内容还有表单的值操作。
// 3. 表单的值 val()（ 相当于原生value)
// val() // 获取表单的值
// val(''内容'') // 设置表单的值
// parents 返回指定祖先元素
$('div').parents('.yeye'); // 拿到祖先元素，爷爷
$('.box').html('黑盒子');
$('span').text('内容很长');
$('input').val('要搜索点啥呢');
var grandpa = $('.box3').parents('.box1');
console.log(grandpa.text());
jQuery 元素操作
// 主要是遍历、创建、添加、删除元素操作。
// $.each()遍历元素
// 遍历数组
var arr = ['apple', 'banana', 'orange'];
$(arr).each(function (i, ele) {
console.log(i); // 0 1 2
console.log(ele); //apple banana orange
});
// 遍历对象
var obj = {
name: '李飞',
age: 15,
score: function () {
console.log('考试');
},
};
$.each(obj, function (i, ele) {
console.log(i); // name age score
console.log(ele); // 李飞 15 function score()
});
// $(''<li></li>''); 动态的创建了一个 <li>
var li = $('<li>我是后来者</li>');
// append prepend 添加元素
// after before 外部添加
// remove empty html 删除元素
// element.remove() // 删除匹配的元素（本身）
// element.empty() // 删除匹配的元素集合中所有的子节点
// element.html('''') // 清空匹配的元素内容
// remove 删除元素本身。
// empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
$('ul').append(li);
$('ul').prepend(li);
$('ul').after(li);
$('ul').before(li);
$('ul li').eq(0).remove();
$('ul li').eq(1).empty();
$('ul li').eq(0).html('');
jQuery 位置操作
// 1. offset() 设置或获取元素偏移
$('.box1').offset({
top: 100,
left: 100,
});
// 2: position() 获取元素偏移
console.log($('.box1').position().top); //100
// 3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
// scrollTop() 方法设置或返回被选元素被卷去的头部。
// 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
console.log($('.box1').scrollTop()); //295
var backTop = $('.goback').offset().top;
// console.log(backTop);
$(window).scroll(function (e) {
if (window.pageYOffset >= backTop) {
$('.goback').fadeIn();
} else {
$('.goback').fadeOut();
}
});
$('.goback').click(function () {
$('body, html').stop().animate({
scrollTop: 0,
});
});
事件绑定、解绑、自动触发、冒泡、对象深浅拷贝
// on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
$('.box1').on('click', function () {
$(this)
.css({ border: '1px solid blue' })
.mouseover(function () {
console.log(123);
});
});
$('.box1').on({
click: function () {
$(this).css({ border: '1px solid blue' });
},
mouseover: function () {
$(this).css({ background: 'red' });
},
mouseleave: function () {
$(this).css({ background: '' });
},
});
// 如果事件处理程序相同
$('div').on('mouseenter mouseleave', function () { //多个事件中不用, 逗号隔开，直接空格连写
$(this).toggleClass('current')
})
// 事件委派和给动态元素绑定事件
// 可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click', 'li', function () {
$(this).css({ border: '1px solid blue' });
});
// 动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件
$('ul').on('click', 'li', function () {
$(this).css({ border: '1px solid blue' });
});
var li = $('<li>我是后来创建的li</li>');
$('ul').append(li);
// 自动触发事件
// 1：事件封装
$('.box1').click(function () {
console.log('click');
});
// 2：触发事件
$('.box1').click();
// 1：事件封装
$('input').on('focus', function () {
$(this).val('今日热点');
});
// // 2：触发事件
// $('input').focus();
// // 输入框不会高亮 就是不会触发元素的默认行为
$('input').triggerHandler('focus');
// 事件冒泡 e.stopPropagation()阻止冒泡到父元素上
$(document).click(function () {
console.log('document');
});
$('.box1').click(function (e) {
e.stopPropagation();
console.log('box1');
});
// 对象拷贝 $.extends
var a = {
name: 'A',
age: 16,
msg: {
sex: '男',
},
say: function () {
console.log('say');
},
};
var b = {
name: 'B',
age: 18,
msg: {
sex: '女',
},
Hi: function () {
console.log('Hi');
},
};
// 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
// (a会把b的同名属性给合并，并以b的值为准，不同的则会新添加到对象中)
// (修改b的b.msg.sex = '女女'， a的a.msg.sex = '女女'也会变成了女女，修改任何一方都会影响彼此的值)
$.extend(a, b);
a.msg.sex = '男男';
// b.msg.sex = '女女';
// b.name = 'b';
console.log(a); //Object { name: "B", age: 18, msg: {…}, say: say(), Hi: Hi() }
console.log(b); //Object { name: "b", age: 18, Hi: Hi() }
// 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
// (修改任何一个对象，彼此独立，互不影响)
$.extend(true, a, b);
a.msg.sex = '男孩';
b.msg.sex = '女孩';
console.log(a);
console.log(b);
