第一个方法：
$(function (){...//此处是页面加载完成的入口
});//优选
第二个方法
$(document).read(function(){
...//此处是页面加载完成的入口
})
1. DOM对象转换为 jQuery对象
$(‘div‘)
$(‘video‘);
2. jQuery对象转换为DOM对象
$(‘div‘)[index] //index是索引号
$(‘video‘)[0].play()
$(‘div‘).get(index)
$(‘video‘).get=(0).play()
选择器跟CSS一致，jQuery获取的是伪数组对象
// 1. 获取四个div元素
console.log($("div"));
// 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
$("div").css("background", "pink");
// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul li").css("color", "red");
:first//第一个 如：$("ul li:first") 选择的是ul里面的第一个li
：last//最后一个
：eq（index）//指定的元素
：odd//奇数
：even//偶数
1.父 parent() 返回的是最近一级的父级元素 如：
$(".son").parent());
parents(".one")//parent("选择器") 返回指定祖先元素
2.子 children() 类似于子代选择器 ul>li
$(".nav").children("p").css("color","red");//将nav里面的亲儿子p的颜色改成红色
find() 类似于后代选择器//可以选择里面所有的孩子
$(".nav").find("p").css("color","red");//所有的p的颜色改成红色
3.兄弟元素 ①. sibings()除了自身元素外的所有亲兄弟
②. 第n个元素
var index = 2;
// (1) 我们可以利用选择器的方式选择
// $("ul li:eq(2)").css("color", "blue");
//
// (2) 我们可以利用选择方法的方式选择 更推荐这种写法
// $("ul li").eq(2).css("color", "blue");
// $("ul li").eq(index).css("color", "blue");
了解 3. 判断是否有某个类名 hasClass
console.log($("div:first").hasClass("current"));
console.log($("div:last").hasClass("current"));
$(function() {
? // 鼠标经过
? $(".nav>li").mouseover(function() { //jQuery调用函数的格式
? // $(this) jQuery 当前元素 this不要加引号
? // show() 显示元素 hide() 隐藏元素
//change() 改变
? $(this).children("ul").show();
? });
? // 鼠标离开
? $(".nav>li").mouseout(function() {
? $(this).children("ul").hide();
? })
? })
#nav > li 指的是#nav 下的直接li子元素.
#nav li 指的是#nav下的所有li元素.
#nav > li.first指的是#nav下直接li子元素的第一个li元素.
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
});
})
$(‘li‘).index(document.getElementById(‘ang‘)) //1 传递一个DOM对象，返回这个对象在原先集合中的索引位置
$(‘li‘).index($(‘#ang‘)) // 1 传递一个jQuery对象
$(‘li‘).index($(‘li:gt(0)‘)) // 1 传递一个jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$(‘#ang‘).index(‘li‘) // 1 传递一个选择器，返回#ang在所有li中的索引位置
$(‘#ang‘).index() // 1 不传递参数，返回这个元素在同辈中的索引位置
添加类
$("div").addClass("current") //不要加点
删除类
$("div").removeClass("current")
切换类
$("div").toggleClass("current")
show([speed,[easing],[fn]])//显示
hide([speed,[easing],[fn]])//隐藏
toggle([speed],[easing],[fn])//如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
fadeIn([speed],[easing],[fn])//通过不透明度的变化来实现所有匹配元素的淡入效果 淡入效果
fadeOut([speed],[easing],[fn])//淡出效果
fadeToggle([speed,[easing],[fn]])//切换淡入淡出效果
fadeTo([[speed],opacity,[easing],[fn]])//修改透明度 fadeTo() 这个速度和透明度要必须写
下滑动 slideDown()
上滑动 slideUp()
滑动切换 slideToggle()
**speed**:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
**easing**:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
**fn:**在动画完成时执行的函数，每个元素执行一次。
hover([over,]out)//over:鼠标移到元素上要触发的函数 //out:鼠标移出元素要触发的函数
（事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数）
停止动画排队：stop();//必须写到动画的前面 结束的上一次动画
animate(params,[speed],[easing],[fn])//自定义动画
//element.prop("属性名") 获取元素固有的属性值
//修改属性值：element.prop("属性名","属性值")
元素的自定义属性：
获取属性： attr("属性")//类似于原生getAttribute()
还可以获取H5 data新增属性 console.log($("div").attr("data-index"));
设置属性语法：attr("属性"，"属性值")//类似于原生setAttribute()
获取设置元素内容html()
$("div").html("123");//设置元素内容
获取设置元素文本内容text()
$("div").text("123");//设置元素内容 （把div里面的值改编为123）
获取设置表单值val()
$("input").val("123");//将表单里面的值改变成123
toFixed（2）//保留2位小数
$("div").each(function(index, domEle) {}
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
//回调函数第二个参数一定是 dom元素对象 也是自己命名
$.each() //方法遍历元素 主要用于遍历数据，处理数据
// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// (1) 内部添加
// $("ul").append(li); 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添
// (2) 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
$(function() {
// 1. 全选 全不选功能模块
// 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
// 事件可以使用change
$(".checkall").change(function() {
? // console.log($(this).prop("checked"));
? $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
? if ($(this).prop("checked")) {
? // 让所有的商品添加 check-cart-item 类名
? $(".cart-item").addClass("check-cart-item");
? } else {
? // check-cart-item 移除
? $(".cart-item").removeClass("check-cart-item");
? }
});
// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
$(".j-checkbox").change(function() {
? // if(被选中的小的复选框的个数 === 3) {
? // 就要选中全选按钮
? // } else {
? // 不要选中全选按钮
? // }
? // 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);
? }
? 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");
? }
});
// 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
$(".increment").click(function() {
? // 得到当前兄弟文本框的值
? var n = $(this).siblings(".itxt").val();
? // console.log(n);
? n++;
? $(this).siblings(".itxt").val(n);
? // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
? // 当前商品的价格 p
? var p = $(this).parents(".p-num").siblings(".p-price").html();
? // console.log(p);
? p = p.substr(1);
? console.log(p);
? var price = (p * n).toFixed(2);
? // 小计模块
? // toFixed(2) 可以让我们保留2位小数
? $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
? getSum();
});
$(".decrement").click(function() {
? // 得到当前兄弟文本框的值
? var n = $(this).siblings(".itxt").val();
? if (n == 1) {
? return false;
? }
? // console.log(n);
? n--;
? $(this).siblings(".itxt").val(n);
? // var p = $(this).parent().parent().siblings(".p-price").html();
? // parents(".p-num") 返回指定的祖先元素
? var p = $(this).parents(".p-num").siblings(".p-price").html();
? // console.log(p);
? p = p.substr(1);
? console.log(p);
? // 小计模块
? $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
? getSum();
});
// 4. 用户修改文本框的值 计算 小计模块
$(".itxt").change(function() {
? // 先得到文本框的里面的值 乘以 当前商品的单价
? var n = $(this).val();
? // 当前商品的单价
? var p = $(this).parents(".p-num").siblings(".p-price").html();
? // console.log(p);
? p = p.substr(1);
? $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
? getSum();
});
// 5. 计算总计和总额模块
getSum();
function getSum() {
? var count = 0; // 计算总件数
? var money = 0; // 计算总价钱
? $(".itxt").each(function(i, ele) {
? count += parseInt($(ele).val());
? });
? $(".amount-sum em").text(count);
? $(".p-sum").each(function(i, ele) {
? money += parseFloat($(ele).text().substr(1));
? });
? $(".price-sum em").text("￥" + money.toFixed(2));
}
// 6. 删除商品模块
// (1) 商品后面的删除按钮
$(".p-action a").click(function() {
? // 删除的是当前的商品
? $(this).parents(".cart-item").remove();
? getSum();
});
// (2) 删除选中的商品
$(".remove-batch").click(function() {
? // 删除的是小的复选框选中的商品
? $(".j-checkbox:checked").parents(".cart-item").remove();
? getSum();
});
// (3) 清空购物车 删除全部商品
$(".clear-all").click(function() {
? $(".cart-item").remove();
? getSum();
})
})
element.事件(function(){})
例子：$("div").click(function(){事件委托函数})
//缺点 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
$(function() {
// (1) on可以绑定1个或者多个事件处理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
? $(function() {
? // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
? $(".btn").on("click", function() {
? var li = $("
");? li.html($(".txt").val() + " 删除");
? $("ul").prepend(li);
? li.slideDown();
? $(".txt").val("");
? })
? // 2.点击的删除按钮，可以删除当前的微博留言li
? // $("ul a").click(function() { // 此时的click不能给动态创建的a添加事件
? // alert(11);
? // })
? // on可以给动态创建的元素绑定事件
? $("ul").on("click", "a", function() {
? $(this).parent().slideUp(function() {
? $(this).remove();
? });
? })
? })
原文：https://www.cnblogs.com/qingmuy/p/13953200.html