目录
1. 普通元素内容 html()（ 相当于原生inner HTML)
2. 普通元素文本内容 text() (相当与原生 innerText)
scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
jQuery 属性操作
设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。
1. 获取属性语法 element.prop('属性名')
$('a').prop('href')2. 设置属性语法 prop(''属性'', ''属性值'')
$('a').prop('title', 'bilibili'); // 设置属性
设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
1. 获取属性语法
attr(''属性'') // 类似原生 getAttribute()
console.log($('div').attr('index'));
2. 设置属性语法
attr(''属性'', ''属性值'') // 类似原生 setAttribute()
$('div').attr('index', '4');
数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
- data(''name'',''value'') // 向被选元素附加数据
- date(''name'') // 向被选元素获取数据
同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型
// 3. 数据缓存data() 这个里面的数据是存放在元素的缓存里面
$('span').data('uname', 'andy');
console.log($('span').data('uname')); // andy
console.log($('div').data('index'));
// 这个方法获取data-index h5自定义属性 不用写data- 而且返回的是数字型
案例：购物车案例模块-全选
全选思路：
- 里面3个小的复选框按钮（j-checkbox）选中状态跟着全选按钮（checkall）走。
- 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
- 把全选按钮状态赋值给3小复选框就可以了。
// 1. 全选功能 全不选功能
// 就是把全选按钮(checkall)的状态赋值给 三个小的按钮(j-checkbox)就可以了
$('.checkall').change(function(){
$(this).prop('checked'); // 得到全选按钮的状态
// 把全选按钮的状态赋值给小按钮 和 类名为 checkall的按钮
$('.j-checkbox,.checkall').prop('checked',$(this).prop('checked'));
})
当我们每次点击小的复选框按钮，就来判断：
- 如果小复选框被选中的个数等于 3 （全部小复选框的个数）
- 就应该把全选按钮选上，否则全选按钮不选。
- :checked 选择器 :checked 查找被选中的表单元素。
// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
$('.j-checkbox').change(function(){
// if(被选中的复选框的个数==3){
// 就要选中全选按钮
// }else {
// 不要选择全选按钮
// }
// :checked 选择器 :checked 查找被选中的表单元素。
// console.log($('.j-checkbox:checked').length);
// $('.j-checkbox').length 所有小复选框的个数
if($('.j-checkbox:checked').length==$('.j-checkbox').length){
$('.checkall').prop('checked',true);
}else{
$('.checkall').prop('checked',false);
}
})
jQuery 内容文本值
1. 普通元素内容 html()（ 相当于原生inner HTML)
- html() // 获取元素的内容
- html(''内容'') // 设置元素的内容
2. 普通元素文本内容 text() (相当与原生 innerText)
- text() // 获取元素的文本内容
- text(''文本内容'') // 设置元素的文本内容
3. 表单的值 val()（ 相当于原生value)
- val() // 获取表单的值
- val(''内容'') // 设置表单的值
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 1. 获取设置元素内容
console.log($('div').html()); // 得到div里面的内容
$('div').html('123'); // 内容改为123
// 2. 获取元素文本内容 text()
console.log($('div').text());
$('div').text('hahaha');
// 3. 获取设置表单值 val()
$('input').val('俺是内容');
</script>
</body>
案例：购物车案例模块-增减商品数量
核心思路：
- 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
- 注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。 修改表单的值是val() 方法
- 注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。
- 要获取表单的值 减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。
// 3. 增减商品数量模块：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框
$('.increment').click(function(){
// 得到当前兄弟文本框的值
var n=$(this).siblings('.itxt').val();
n++;
$(this).siblings('.itxt').val(n);
})
$('.decrement').click(function(){
// 得到当前兄弟文本框的值
var n=$(this).siblings('.itxt').val();
if(n<=1){
return false;
}
n--;
$(this).siblings('.itxt').val(n);
})
案例：购物车案例模块-修改商品小计
核心思路：
- 每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计
- 注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum）， 修改普通元素的内容是text() 方法
- 注意2： 当前商品的价格，要把￥符号去掉再相乘， 截取字符串 substr(1)
- parents(‘选择器’) 可以返回指定祖先元素
- 最后计算的结果如果想要保留2位小数， 通过 toFixed(2) 方法
// 4.修改商品小计模块：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格
var price= $(this).parent().parent().siblings('.p-price').text(); // this的爸爸的爸爸的兄弟
price= price.substr(1);
var p=(price*n).toFixed(2); // 保留两位小数
$(this).parent().parent().siblings('.p-sum').text('￥'+p);
- 用户也可以直接修改表单里面的值，同样要计算小计。
- 用表单change事件 用最新的表单内的值 乘以 单价即可
- 但是还是当前商品小计
// 5. 用户修改文本框的值：计算 小计模块
$('.itxt').change(function(){
// 先得到文本框里的值 乘以 文本框的单价
var n= $(this).val(); // 文本框的值
var price= $(this).parents('.p-num').siblings('.p-price').html();
price=price.substr(1);
var p=(price*n).toFixed(2);
$(this).parents('.p-num').siblings('.p-sum').html('￥'+p);
})
jQuery 元素操作
主要是遍历、创建、添加、删除元素操作。
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。
如果想要给同一类元素做不同操作，就需要用到遍历。
$("div").each(function (index, domEle) { xxx; }）
- 1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
- 2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
- 3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
// 1. each() 方法遍历元素
var arr = ['red', 'blue', 'pink'];
$('div').each(function (i, domEle) {
// 回调函数第一个参数一定是索引号,可以自己指定索引号名称
console.log(i);
// 回调函数第二个参数一定是 dom元素对象
console.log(domEle);
$(domEle).css('color', arr[i]); // 转换成jQuery对象
$.each(object，function (index, element) { xxx; }）
- 1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
- 2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
$.each($('div'), function (i, ele) {
console.log(i); // 索引号
console.log(ele); // 元素
})
遍历数组：
$.each(arr, function (i, ele) {
console.log(ele);
})
遍历对象：
$.each({
name: 'andy',
age: 20
}, function (i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 20 属性值
})
案例：购物车案例模块-计算总计和总额
核心思路：
- 把所有文本框里面的值相加就是总计数量。总额同理
- 文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量count，相加即可
- 点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额
- 因此可以封装一个函数求总计和总额的， 以上2个操作调用这个函数即可。
- 注意： 总计是文本框里面的值相加用 val() 总额是普通元素的内容用text()
- 要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加
- 另外，要小复选框勾上才计算！用if语句
// 6. 计算总计和总额模块
getSum();
function getSum(){
var count = 0; // 计算总件数
var money = 0; // 计算总金额
$('.itxt').each(function(i,ele){
// 当小复选框勾选上才进行计算总件数
if($(ele).parents('.p-num').siblings('.p-checkbox').find('.j-checkbox').prop('checked')){
count += parseInt($(ele).val()); // input表单的val值
}
})
$('.amount-sum em').text(count); // 让em的内容变成count
$('.p-sum').each(function(i,ele){
if($(ele).siblings('.p-checkbox').find('.j-checkbox').prop('checked')){
money += parseFloat($(ele).text().substr(1));
}
})
$('.price-sum em').text('￥'+money.toFixed(2));
}
创建元素
// 1. 创建元素
var li = $('<li>我是后来创建的小li</li>');
var div = $('<div>我是后来的div</div>');
- 动态的创建了一个 <li>
添加元素
内部添加
// (1)内部添加
$('ul').append(li); // 放到内容的最后面
$('ul').prepend(li); // 放到内容的最前面
- 把内容放入匹配元素内部最后面，类似原生 appendChild。
外部添加
// (2)外部添加
$('.test').after(div); // 把div放到目标元素.test的后面
$('.test').before(div); // 放到目标元素前面- 内部添加元素，生成之后，它们是父子关系。
- 外部添加元素，生成之后，他们是兄弟关系。
删除元素
// 3. 删除元素
$('ul').remove(); // 删除ul元素的本身 自杀
$('ul').empty(); // 删除里面所有的子节点 本身元素不杀掉
$('ul').html(''); //清空匹配的元素内容
- remove 删除元素本身。
- empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
案例：购物车案例模块-删除商品模块
核心思路：
- 把商品remove() 删除元素即可 有三个地方需要删除：
- 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
- 商品后面的删除按钮： 一定是删除当前的商品，所以从 $(this) 出发
- 删除选中的商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
- 清理购物车： 则是把所有的商品全部删掉
// 7. 删除商品模块
// (1) 商品后面的删除按钮
$('.p-action a').click(function(){
$(this).parents('.cart-item').remove();
// 调用函数6
getSum();
})
// (2) 删除选中的商品
$('.operation .remove-batch').click(function(){
// 删除的是小的复选框选中的商品
$('.j-checkbox:checked').parents('.cart-item').remove();
// 调用函数6
getSum();
})
// (3) 清空购物车 删除全部商品
$('.operation .clear-all').click(function(){
$('.cart-item').remove();
// 调用函数6
getSum();
})
案例：购物车案例模块-选中商品添加背景
核心思路：
- 选中的商品添加背景，不选中移除背景即可 addClass() removeClass() 不加点
- 全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
// 8. 选中商品添加背景
if($(this).prop('checked')){
// 让所有的商品添加.check-cart-item类名
$('.cart-item').addClass('check-cart-item');
}else{
// 移除类名.check-cart-item
$('.cart-item').removeClass('check-cart-item');
}
- 小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景 这个背景，可以通过类名修改，添加类和删除类
// 8. 选中商品添加背景
if($(this).prop('checked')){
// 让当前的商品添加.check-cart-item类名
$(this).parents('.cart-item').addClass('check-cart-item');
}else{
// 移除类名.check-cart-item
$(this).parents('.cart-item').removeClass('check-cart-item');
}
jQuery 尺寸、位置操作
jQuery 尺寸
- 以上参数为空，则是获取相应值，返回的是数字型。
- 如果参数为数字，则是修改相应值。
- 参数可以不必写单位。
$(function () {
// 1. width() / height() 获取设置元素width和height大小 不加单位
console.log($('div').width()); //200
// $('div').width(300); // 修改宽度
// 2. innerWidth() 包括padding大小
console.log($('div').innerWidth()); // 220
// 3. outerWidth() 包括padding和border
console.log($('div').outerWidth()); // 250
// 4. outerWidth(true) 包括padding和border和margin
console.log($('div').outerWidth(true)); // 290
})
jQuery 位置
位置主要有三个： offset()、position()、scrollTop() / scrollLeft()
offset() 设置或获取元素偏移
- offset() 方法设置或返回 被选元素相对于文档的偏移坐标，跟父级没有关系。
- 该方法有2个属性 left、top 。
- offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
- 可以设置元素的偏移：offset({ top: 10, left: 30 })；
// 1. 获取设置距离文档的位置（偏移） offset
console.log($('.son').offset()); // 返回的是一个对象
console.log($('.son').offset().top); // 100
console.log($('.son').offset().top);
$('.son').offset({
top: 200,
left: 200
})
position() 获取元素偏移
- position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
- 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
- 该方法只能获取。不能设置
// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为主
console.log($('.son').position());
scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
- scrollTop() 方法设置或返回被选元素被卷去的头部。
- 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
$(document).scrollTop(100);案例：带有动画的返回顶部
核心原理：
- 使用animate动画返回顶部。
- animate动画函数里面有个scrollTop 属性，可以设置位置
- 但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})
<script>
$(function () {
$(document).scrollTop(100);
var boxTop = $('.container').offset().top; // 盒子距离顶部的距离
// 页面滚动事件
$(window).scroll(function () {
// 如果滚进去的距离大于盒子距离顶部的距离
if ($(document).scrollTop() >= boxTop) {
$('.back').fadeIn();
} else {
$('.back').fadeOut();
}
})
$('.back').click(function () {
// 不能是文档，是html和body做动画
$('body,html').stop().animate({
scrollTop: 0
})
})
})
</script>
案例： 品优购电梯导航
- 当我们滚动到 今日推荐 模块，就让电梯导航显示出来
var toolTop = $('.recom').offset().top;
$(window).scroll(function(){
if($(document).scrollTop() >= toolTop){
$('.fixedtool').fadeIn();
}else {
$('.fixedtool').fadeOut();
}
})
- 点击电梯导航页面可以滚动到相应内容区域
核心算法：因为电梯导航模块和内容区模块一一对应的 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号 就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top 然后执行动画即可
- 当你点击某个小li的时候，会出现他的索引号
- 当我们每次点击小li 就需要计算出页面要去往的位置
- 这些楼层都有一个共用的类名是W，所以当我们点击小丽的时候，我们选择楼层里面有W类名的盒子的eq（小li的索引号）就知道是哪个盒子了，然后再计算出它的offset().top
// 2. 点击电梯导航页面可以滚动到相应内容区域
$('.fixedtool li').click(function() {
// 当你点击某个小li的时候，会出现他的索引号
console.log($(this).index());
// 当我们每次点击小li 就需要计算出页面要去往的位置
var current = $('.floor .w').eq($(this).index()).offset().top;
// 页面动画滚动效果
$('html, body').stop().animate({
scrollTop:current
})
})
- 当我们点击电梯导航某个小li， 当前小li 添加current类，兄弟移除类名
// 点击之后，让当前的小li添加carrot类名,姐妹移除current类名
$(this).addClass('current');
$(this).siblings().removeClass('current');
- 当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。
- 需要用到each，遍历内容区域大模块。
- each里面能拿到内容区域每一个模块元素和索引号
- 判断的条件： 被卷去的头部 大于等于 内容区域里面每个模块的offset().top
- 就利用这个索引号找到相应的电梯导航小li添加类。
// 4. 当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。
$('.floor .w').each(function(i,ele) {
if($(document).scrollTop() >= $(ele).offset().top){
// console.log(i); // 这个是每个模块的索引号
$('.fixedtool li').eq(i).addClass('current').siblings().removeClass();
}
})