jQuery 属性，元素
属性操作
固定属性 prop()
- 获取固定属性
- $("a").prop("href")
2. 设置属性
- $('a').prop("title", '我们')
注意:
- prop 更加适用disabled / checked / selected 等。
自定义属性 attr()
- 获取自定义属性
- $('div').attr('index')
2. 设置自定义属性
- $('span').attr('index', 1)
数据缓存 data()
- 设置数据缓存
- $('span').data('uname', 'peach')
2. 获取数据缓存
- $('span').data('uname')
注意：
- data 获取html5 自定义data-index， 第一个 不用写data- , 得到的是数字型。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <a href="http://www.itcast.cn" title="都挺好">都挺好</a> <input type="checkbox" name="" id="" checked> <div index="1" data-index="2">我是div</div> <span>123</span> </body> <script> $(function () { // 1.获取固定属性名 console.log($("a").prop("href")); console.log($("a").prop('title')); // 1.1 设置属性 $('a').prop("title", '我们') // 1.2 prop 更加适用disabled / checked / selected 等。 $('input').change(function () { console.log($(this).prop("checked")); }) // 2 自定义属性 // 2.1 获取自定义属性 console.log($('div').attr('data-index')); console.log($('div').attr('index')); // 2.2 设置自定义属性 $('span').attr('index', 1) // 3 数据缓存 data() 这个里面的数据是存放在元素的内存里面 $('span').data('uname', 'peach'); // 设置缓存数据 console.log($('span').data('uname')); // 获取缓存数据 // 3.1 data 获取html5 自定义data-index， 第一个 不用写data- , 得到的是数字型。 console.log($('div').data('index')); }) </script> </html>
$(function () { // 全选和 全不选 // 把全选的的状态给其他商品的状态即可 // 1. 全选 $('.checkall').change(function () { // 1.1 设置其他商品的状态和全选按钮 的状态一致 console.log($(this).prop('checked')); $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked")); // 1.2 如果全选则 让所有的商品添加 check-cart-item 类名 if ($(this).prop("checked")) { $('.cart-item').addClass("check-cart-item"); // 添加类名 } else { $(".cart-item").removeClass("check-cart-item"); } }) // 2. 如果小框里面的数值等于所有数组，则选择全选 $('.j-checkbox').change(function () { console.log($(".j-checkbox:checked").length); // 如果当前选择的数量等于商品数量， 则全选选中 if ($(".j-checkbox:checked").length == $(".j-checkbox").length) { $(".checkall").prop("checked", true); } else { $(".checkall").prop("checked", false); } 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"); } }) })
文本数值
文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。
- 普通元素内容html() 对应JS中的 innerHTML
- 普通元素文本内容 对应JS中的 innerText
- 表单的值 对应JS中的 value
注意：html() 可识别标签，text() 不识别标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <div> <span>我是内容</span> </div> <input type="text" value="请输入内容"> <script> // 1. 获取设置元素内容 html() console.log($('div').html()); // 1.1 设置HTML内容 $('div').html('<h1>握手</h1>') // 2. 获取设置元素文本内容 text() console.log($('div').text()); // 2.1 设置文本内容 $('div').text('111') // 3. 获取设置表单值 val() console.log($('input').val()); // 3.1 设置属性值 $('input').val('test') </script> </body> </html>
$(function () { // 全选和 全不选 // 把全选的的状态给其他商品的状态即可 // 1. 全选 $('.checkall').change(function () { // 1.1 设置其他商品的状态和全选按钮 的状态一致 console.log($(this).prop('checked')); $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked")); // 1.2 如果全选则 让所有的商品添加 check-cart-item 类名 if ($(this).prop("checked")) { $('.cart-item').addClass("check-cart-item"); // 添加类名 } else { $(".cart-item").removeClass("check-cart-item"); } }) // 2. 如果小框里面的数值等于所有数组，则选择全选 $('.j-checkbox').change(function () { console.log($(".j-checkbox:checked").length); // 如果当前选择的数量等于商品数量， 则全选选中 if ($(".j-checkbox:checked").length == $(".j-checkbox").length) { $(".checkall").prop("checked", true); } else { $(".checkall").prop("checked", false); } 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"); } }) // -------------------------------------------------------------------------------- // 商品 + 计算 $('.increment').click(function () { // 获取到当前多少件商品 var n = $(this).siblings('.itxt').val() n++; $(this).siblings(".itxt").val(n); // 然后获取到单价标签 var p = $(this).parents('.p-num').siblings('.p-price').html() p = p.substr(1) // 得到单价 var price = (p * n).toFixed(2); // 保留两位小数 console.log(price); // 然后把价格替换到小计里面 // 获取到小计标签 $(this).parents('.p-num').siblings('.p-sum').html("￥" + price) }) // 商品 - 计算 $('.decrement').click(function () { // 先获取到当前商品数量 var n = $(this).siblings('.itxt').val() // 如果等于1 不做操作 if (n == 1) { return false } n--; // 赋值到数量标签里面 $(this).siblings(".itxt").val(n); // 得到商品的单价 var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1) var price = (p * n).toFixed(2); // 保留两位小数 $(this).parents('.p-num').siblings('.p-sum').html("￥" + price) }) // 用户直接再文本款里面输入数量 $('.itxt').change(function () { var n = $(this).val() if (n < 0) { n = 1 $(this).val(n); } // 得到商品的单价 var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1) var price = (p * n).toFixed(2); // 保留两位小数 $(this).parents('.p-num').siblings('.p-sum').html("￥" + price) }) })
元素操作
- $('div').each(function (i, domEle) { })
- 回调函数第一个是index，第二个是dom元素对象, 要转换为jquer对象
2. $.each(obj, function (i, ele) { })
- $.each() 方法遍历元素 主要用于遍历数据，处理数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> </style> <script src="jquery.min.js"></script> </head> <body> <div>1</div> <div>2</div> <div>3</div> <script> $(function () { var sum = 0 var arr = ["red", "green", "blue"]; // 第一种遍历元素 $('div').each(function (i, domEle) { // console.log(i, domEle); // 回调函数第一个是index， // 第二个是dom元素对象,要转换为jquer对象 $(domEle).css('color', arr[i]) sum += parseInt($(domEle).text()) }) // 第二种 $.each() 方法遍历元素 主要用于遍历数据，处理数据 $.each(arr, function (i, ele) { console.log(i, ele); }) $.each({ "name": 'peach', "age": 12 }, function (i, ele) { console.log(i); // name console.log(ele); // peach }) }) </script> </body> </html>
$(function () { // 全选和 全不选 // 把全选的的状态给其他商品的状态即可 // 1. 全选 $('.checkall').change(function () { // 1.1 设置其他商品的状态和全选按钮 的状态一致 console.log($(this).prop('checked')); $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked")); // 1.2 如果全选则 让所有的商品添加 check-cart-item 类名 if ($(this).prop("checked")) { $('.cart-item').addClass("check-cart-item"); // 添加类名 } else { $(".cart-item").removeClass("check-cart-item"); } }) // 2. 如果小框里面的数值等于所有数组，则选择全选 $('.j-checkbox').change(function () { console.log($(".j-checkbox:checked").length); // 如果当前选择的数量等于商品数量， 则全选选中 if ($(".j-checkbox:checked").length == $(".j-checkbox").length) { $(".checkall").prop("checked", true); } else { $(".checkall").prop("checked", false); } 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"); } }) // -------------------------------------------------------------------------------- // 商品 + 计算 $('.increment').click(function () { // 获取到当前多少件商品 var n = $(this).siblings('.itxt').val() n++; $(this).siblings(".itxt").val(n); // 然后获取到单价标签 var p = $(this).parents('.p-num').siblings('.p-price').html() p = p.substr(1) // 得到单价 var price = (p * n).toFixed(2); // 保留两位小数 console.log(price); // 然后把价格替换到小计里面 // 获取到小计标签 $(this).parents('.p-num').siblings('.p-sum').html("￥" + price) getSum() }) // 商品 - 计算 $('.decrement').click(function () { // 先获取到当前商品数量 var n = $(this).siblings('.itxt').val() // 如果等于1 不做操作 if (n == 1) { return false } n--; // 赋值到数量标签里面 $(this).siblings(".itxt").val(n); // 得到商品的单价 var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1) var price = (p * n).toFixed(2); // 保留两位小数 $(this).parents('.p-num').siblings('.p-sum').html("￥" + price) getSum() }) // 用户直接再文本款里面输入数量 $('.itxt').change(function () { var n = $(this).val() if (n < 0) { n = 1 $(this).val(n); } // 得到商品的单价 var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1) var price = (p * n).toFixed(2); // 保留两位小数 $(this).parents('.p-num').siblings('.p-sum').html("￥" + price) getSum() }) // ---------------------------------------------------------------- // 计算总价 getSum() function getSum() { // 先定义总件数，总价格 var count = 0; var money = 0; $('.itxt').each(function (i, ele) { // ele 就是三个图书的dom对象，要转换为jquer对象 count += parseInt($(ele).val()) // 总件数 }) // 修改底部总件数 $('.amount-sum em').text(count) // 修改总价格 $('.p-sum').each(function (i, ele) { // 总价格 money += parseInt($(ele).text().substr(1)) }) // 修改底部总价格 $(".price-sum em").text("￥" + money.toFixed(2)); } })
创建，删除，修改元素
创建
- $("<li>创建的li</li>")
添加
- 内部添加
- $('li').append(li) // 放在元素的最后面
- $('li').prepend(li) // 放在元素的最前面
2. 外部添加
- $('li').after(li) // 放在目标元素的最后面
- $('li').before(li) // 放在目标元素的最前面
内部添加元素，生成后，他们是父子关系
外部添加元素，生成后，他们是兄弟关系
删除
- $('ul').remove() // 自杀式删除，删除元素本身
- $('ul').html('') // 可以删除匹配的元素里面的子节点 孩子
- $('ul').empty() // 匹配删除ele 里面的所有子节点
empty() 和 html() 区别在于html可以设置内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <ul> <li>原先的li</li> </ul> <div class="test">我是原先的div</div> <script> $(function () { // 创建元素 // 1.1 内部添加 // var li = $("<li>创建的li</li>") // $('li').append(li) // 放在元素的最后面 // $('li').prepend(li) // 放在元素的最前面 // 1.2 外部添加 // var li = $("<div> 我是外部添加的</div>") // $('li').after(li) // 放在目标元素的最后面 // $('li').before(li) // 放在目标元素的最前面 // 删除元素 // $('ul').remove() // 自杀式删除，删除元素本身 // $('ul').html('') // 可以删除匹配的元素里面的子节点 孩子 $('ul').empty() // 匹配删除ele 里面的所有子节点 }) </script> </body> </html>
$(function () { // 全选和 全不选 // 把全选的的状态给其他商品的状态即可 // 1. 全选 $('.checkall').change(function () { // 1.1 设置其他商品的状态和全选按钮 的状态一致 console.log($(this).prop('checked')); $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked")); // 1.2 如果全选则 让所有的商品添加 check-cart-item 类名 if ($(this).prop("checked")) { $('.cart-item').addClass("check-cart-item"); // 添加类名 } else { $(".cart-item").removeClass("check-cart-item"); } }) // 2. 如果小框里面的数值等于所有数组，则选择全选 $('.j-checkbox').change(function () { console.log($(".j-checkbox:checked").length); // 如果当前选择的数量等于商品数量， 则全选选中 if ($(".j-checkbox:checked").length == $(".j-checkbox").length) { $(".checkall").prop("checked", true); } else { $(".checkall").prop("checked", false); } 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"); } }) // -------------------------------------------------------------------------------- // 商品 + 计算 $('.increment').click(function () { // 获取到当前多少件商品 var n = $(this).siblings('.itxt').val() n++; $(this).siblings(".itxt").val(n); // 然后获取到单价标签 var p = $(this).parents('.p-num').siblings('.p-price').html() p = p.substr(1) // 得到单价 var price = (p * n).toFixed(2); // 保留两位小数 console.log(price); // 然后把价格替换到小计里面 // 获取到小计标签 $(this).parents('.p-num').siblings('.p-sum').html("￥" + price) getSum() }) // 商品 - 计算 $('.decrement').click(function () { // 先获取到当前商品数量 var n = $(this).siblings('.itxt').val() // 如果等于1 不做操作 if (n == 1) { return false } n--; // 赋值到数量标签里面 $(this).siblings(".itxt").val(n); // 得到商品的单价 var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1) var price = (p * n).toFixed(2); // 保留两位小数 $(this).parents('.p-num').siblings('.p-sum').html("￥" + price) getSum() }) // 用户直接再文本款里面输入数量 $('.itxt').change(function () { var n = $(this).val() if (n < 0) { n = 1 $(this).val(n); } // 得到商品的单价 var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1) var price = (p * n).toFixed(2); // 保留两位小数 $(this).parents('.p-num').siblings('.p-sum').html("￥" + price) getSum() }) // ---------------------------------------------------------------- // 删除商品模块 $('.p-action a').click(function () { $(this).parents('.cart-item').remove(); getSum(); }) // 删除选中的商品 $('.remove-batch').click(function () { $('.j-checkbox:checked').parents('.cart-item').remove() getSum() }) // 清空购物车 $('.clear-all').click(function () { $('.cart-item').remove() getSum() }) // ---------------------------------------------------------------- // 计算总价 getSum() function getSum() { // 先定义总件数，总价格 var count = 0; var money = 0; $('.itxt').each(function (i, ele) { // ele 就是三个图书的dom对象，要转换为jquer对象 count += parseInt($(ele).val()) // 总件数 }) // 修改底部总件数 $('.amount-sum em').text(count) // 修改总价格 $('.p-sum').each(function (i, ele) { // 总价格 money += parseInt($(ele).text().substr(1)) }) // 修改底部总价格 $(".price-sum em").text("￥" + money.toFixed(2)); } })
尺寸，位置操作
尺寸
语法 | 用法 |
width() / height() | 匹配元素宽度和高度，只算width和height |
innerWidth() / innerHieght() | 匹配元素宽度和高度，包含padding |
outerWidth() / outerHeight() | 匹配元素宽度和高度，包含padding, border |
outerWidth(true) / outerHeight(true) | 匹配元素宽度和高度，包含padding，border，margin |
- 如果() 里面参数为空，返回相对应值，返回数字类型
- 参数如果为数字，则是修改相对于的值
- 参数可以不写单位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; padding: 10px; border: 15px solid red; margin: 20px; } </style> <script src="jquery.min.js"></script> </head> <body> <div></div> <script> $(function () { console.log($('div').height()); //200 console.log($('div').width(250)); // 修改值 console.log($('div').innerWidth()); //220 width + padding console.log($('div').outerWidth()); // 250 width + padding + border console.log($('div').outerWidth(true)) // 290 width + padding + border + margin }) </script> </body> </html>
位置
- offset() 设置或者获取元素偏移量
- 跟父级别没关系，相对于文档的偏移量
- 有left, top两个属性， offset().top 获取相对于文档的值，
- 设置元素偏移量: offser({left: 100, top: 100})
2. position() 获取元素偏移
- 相对于定位的父亲偏移量坐标
- 有left, top两个属性， offset().top 获取相对于父亲的值
- 只能获取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father { width: 400px; height: 400px; background-color: pink; margin: 100px; overflow: hidden; position: relative; } .son { width: 150px; height: 150px; background-color: purple; position: absolute; left: 10px; top: 10px; } </style> <script src="jquery.min.js"></script> </head> <body> <div class="father"> <div class="son"></div> </div> <script> // 相对于文档 console.log($('.son').offset()); console.log($('.son').offset().top) //设置 $('.son').offset({ top: 200, left: 200 }) // 相对于父亲, 只能获取，不是设置 console.log($('.son').position()); console.log($('.son').position().top); </script> </body> </html>
3. scrollTop() / scrollLeft() 设置获取元素卷去的距离
- () 为空是获取，里面是数字是设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { height: 2000px; } .back { position: fixed; width: 50px; height: 50px; background-color: pink; right: 30px; bottom: 100px; display: none; } .container { width: 900px; height: 500px; background-color: skyblue; margin: 400px auto; } </style> <script src="jquery.min.js"></script> </head> <body> <div class="back">返回顶部</div> <div class="container"> </div> <script> $(function () { // 设置卷去的头部距离 $(document).scrollTop(100) // 获取box 距离顶部的距离 var boxTop = $('.container').offset().top console.log(boxTop); // 注册卷去事件 $(window).scroll(function () { // console.log($(document).scrollTop()); // 这个是文档距离顶部的距离 // 如果页面的卷去大于 盒子卷去的距离，显示返回顶部按钮 if ($(document).scrollTop() >= boxTop) { $('.back').fadeIn() } else { $('.back').fadeOut() } }) // 点击返回顶部， $('.back').click(function () { $('html, body').stop().animate({ scrollTop: 0 }) }) }) </script> </body> </html>
$(function () { // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current // 节流阀 互斥锁 var flag = true; // 1.显示隐藏电梯导航 var toolTop = $(".recommend").offset().top; toggleTool(); function toggleTool() { if ($(document).scrollTop() >= toolTop) { $(".fixedtool").fadeIn(); } else { $(".fixedtool").fadeOut(); }; } $(window).scroll(function () { toggleTool(); // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名 if (flag) { $(".floor .w").each(function (i, ele) { if ($(document).scrollTop() >= $(ele).offset().top) { console.log(i); $(".fixedtool li").eq(i).addClass("current").siblings().removeClass(); } }) } }); // 2. 点击电梯导航页面可以滚动到相应内容区域 $(".fixedtool li").click(function () { flag = false; console.log($(this).index()); // 当我们每次点击小li 就需要计算出页面要去往的位置 // 选出对应索引号的内容区的盒子 计算它的.offset().top var current = $(".floor .w").eq($(this).index()).offset().top; // 页面动画滚动效果 $("body, html").stop().animate({ scrollTop: current }, function () { flag = true; }); // 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名 $(this).addClass("current").siblings().removeClass(); }) })
相关资料: https://github.com/1515806183/html-code/tree/master/jQuery-02
