1.jQuery属性操作 1.1.获取属性值prop ，可以设置属性
console.log( $('a').prop('href') ); //http://www.idlkj.com/
//2.设置属性值
$('a').prop('title' , '我们都很好') ;
1.2.元素自定义属性 arrt 查询元素自定义属性
<script>
// 1.入口函数
$(function(){
//1.获取属性值prop
console.log( $('div').attr('index') );
//2.设置属性值
$('div').attr('index' , '5') ;
})
1.3.data()方法 数据缓存，这个数据是存放在元素内存里面
<div index="4" >12</div>
<span data-index="6"></span>
<!-- <script type="text/javascript"> -->
<script>
// 1.入口函数
$(function(){
//1.data 把里面的存放在元素里面
$('span').data('uname' ,'jack');
// 打印data里面的数据
console.log($('span').data('uname'));
// 也可以直接打印data-index 属性 ,就不需要data
console.log($('span').data('index'));
})
2.购物车全选按钮 -里面有重要的思路 全选 和单个复选框 如果判断全选 :checked 判断被选择的复选框 的个数 = 小复选框的个数
// 1.全选思路，如果里面3个复选按钮j-chek的转态，跟踪群宣按钮chekall 走
// 1.proP 获取按钮 changae事件
$('.cheakall').change(function(){
// 把变化的转态给 三个单选框 另外的全选按钮也需要变化--采用并集选择器
$('.j-chaeck,.cheakall').prop('checked' ,$(this).prop('checked') );
})
// 2.如果下面的按钮 三个都被选中 那么权限就会被选中
// 每次都需要记录 有几个被选中了
// :checked 判断被选择的复选框 的个数 = 小复选框的个数
$('.j-chaeck').change(function(){
if ($('.j-chaeck:checked').length == $('.j-chaeck').length) {
$('.cheakall').prop('checked' ,true );
}else{
$('.cheakall').prop('checked' ,false );
}
})
3.jQuery 获取文本内容 3.1 html () 相当于原生 inner Html
// 1.获取元素内容
console.log($('div').html());
// 也可以设置内容
console.log($('div').html('123'));
3.2 text( )相当于原生 innerText
// 1.获取元素文本
console.log($('div').text());
// 也可以设置文本
console.log($('div').text('456'));
3.3 value 相当于表单中的value
// 1.获取表单的value
console.log($('input').val());
// 也可以设置文本
console.log($('input').val('456'));
4.快速找到父级 parents 可以找打所有的父级元素 跟上选择器可以找到指定的子元素
<div class="one"> one
<div class="two">
<div class="three">
<div class="four"></div>
</div>
</div>
</div>
<script>
$(function(){
// 直接获取子元素所有的父级，再找到自己需要的元素
console.log($('.four').parents('.one').html());
}) ;
</script>
5.toFixed(2)--保留2位小数
console.log((21.553 * 329.240).toFixed(2));
6.jQuery 遍历元素 each方法--遍历DOM
$(selector).each(function (index,element) )
必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置。
- element - 当前的元素（也可使用 "this" 选择器）。 DOM元素，
如果要用jQuery 就需要加$(element)
<script>
$(function(){
// 隐士迭代 同一类元素 会一样的属性
$('div').css('color','red') ;
// each(()方法 可以遍历每一个元素，单独设置
// index 可以自己指定索引号 可以自己定义
var arr = ['red','blue','yellow'];
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(index);
// console.log(i);
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom对象没有css方法
$(domEle).css("color", arr[i]);
})
}) ;
</script>
通过遍历求和的案例
<script>
$(function(){
// 隐士迭代 同一类元素 会一样的属性
$('div').css('color','red') ;
// each(()方法 可以遍历每一个元素，单独设置
// index 可以自己指定索引号 可以自己定义
var arr = ['red','blue','yellow','purple'];
var sum = 0;
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(index);
// console.log(i);
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom对象没有css方法
$(domEle).css("color", arr[i]);
// 通过变量把所有的 元素值 秋和
sum += parseInt( $(domEle).text() ) ;
console.log(sum) ;
})
}) ;
6.2 $.each() 方法遍历元素 主要用于遍历数据，处理数据
$.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
7.创建 添加 删除元素 7.1 内部添加 --添加后是父子关系 Element.append（） 添加元素 放在匹配元素的最后面 Element.append（‘内容’）
$(function(){
var li = $('<li>我是后面添加的li</li>') ;
// 1.添加到ul的最后面
$('ul').append(li) ;
//2.添加到ul的最前面
}) ;
添加到内容的最前面
//2.添加到ul的最前面
$('ul').prepend(li) ;
7.2 外部添加 -添加后是兄弟关系 7.2.1 把内容添加到目标元素的后面
$(function(){
var li = $('<li>我是后面添加的li</li>') ;
//1.把内容添加到目标元素的后面
$('ul').after(li);
}) ;
7.2.2 把内容添加到目标元素的前面
$(function(){
var li = $('<li>我是后面添加的li</li>') ;
//1.把内容添加到目标元素的后面
$('ul').before(li);
}) ;
7.3 删除元素
// 删除元素, remove 可以删除匹配元素 -自杀
$('ul').remove();
// 删除元素, remove 可以删除匹配元素 子节点元素 -孩子都没有
$('ul').empty(); 删除子节点 孩子
$('ul').html(“”) ;// 可以删除匹配元素的子节点 孩子 和上面empty效果是一样的啊
