web.jpeg
1.基本使用
1.1加载时机
//页面中所有加载完 触发
$(window).load(function(){
console.log("开始了");
});
$(document).ready(function(){
console.log($(".demo"));
});
// DOM加载完成 简写一
$().ready(function(){
});
// DOM加载完成 简写二
$(function(){
});
1.2JQ对象和DOM对象的相互转化
//JQ转化为 DOM
//获取JQuery对象
var jq_dom = $("div");
//格式 jq_dom[0]
console.log( "====="+jq_dom[0]);
//方法二 Jq.get(0)
jq_dom.get(0);
//DOM转化 jQ
// 格式:$(要转化的DOM对象)
var dom_obj = document.getElementsByTagName("div")[0];
$(dom_obj).html();
2.选择器
2.1基本选择器
$("元素名称") 标签选择器$("#test") id选择器$(".test") 类选择器$("*") 通配符选择器
2.2 层级选择器
-
$("#dv span")后代选择器 空格隔开获取div中所有span标签 $("p.intro") 交集选择器 获取 class 为 intro 的元素
$("p#demo") 选取所有 id="demo" 的元素
$(".liItem,div") 并集选择器$("#dv > span") 子代选择器-
$("#dv~span")div后面的兄弟元素sapn $("#dv+sapn") 获取#dv后面的直接兄弟$("选择器名:odd/even") 奇数选择器/偶数选择器 是指元素的下标是奇数或者偶数
2.3属性选择器
2.4过滤选择器
3.操作样式类
3.1设置样式 css的3种方法
3.2操作class类名
- 添加类名
jQ.addClass()的3中方式
//添加样式
$("button").eq(0).click(function(){
//添加方式一
// $("div").addClass("class1");
//添加方式二
// $("div").addClass("class1").addClass("class2");
//添加方式三
$("div").addClass("class1 class2");
});
- 判断是否有这个类名
jQ.hasClass() 检查是否拥有指定的样式
$("button").eq(1).click(function(){
// 返回值是 bool值
//该方法检测 只能检测一个样式，不能检测多个样式，也不可以链式检测
console.log( $("div").hasClass("class1"));
});
- 移除类名
jQ.removeClass()可以单个移除，也可以移除多个
$("button").eq(2).click(function () {
//说明:使用方式同addClass方法
//$("div").removeClass("class1")
//$("div").removeClass("class1").removeClass("class2");
$("div").removeClass("class1 class2");
})
- 样式切换
jQ.toggleClass()
//样式切换
$("button").eq(3).click(function(){
//有这个样式就删除 没有这个样式就添加
$("div").toggleClass("class1");
});
3.3 标签位置的操作
-
jQ.width()有参数设置宽和高，没有参数获取宽高
//1.获取宽度和高度
console.log($(".demo").width());
console.log($(".demo").height());
//2.设置宽度
$(".demo").width(300)
jQ.innerWidth()获取带有 边框padding的宽度jQ.offset()获取当前标签相对于窗口的位移信息,返回的是json对象,可以直接访问对象的属性jQ.position()获取的是当前标签相对于父标签的位移信息$(“div”).scrollTop(); // 相对于滚动条顶部的偏移$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移
3.4 操作元素的内容和属性
-
jQ.text()没有参数是获取内容,有参数是设置内容
$("button").eq(0).click(function () {
//获取 文本内容
console.log($("div").text());
//设置文本内容
$("div").text("哈哈哈");
});
-
jQ.html()没有参数是获取内容,有参数是设置内容
$("button").eq(1).click(function(){
//获取 文本内容
console.log($("div").html());
//设置 文本标签内容
$("div").html("这是一个h3标签
");
});
上述：2个方法的区别是
text()仅仅是内容显示遇到标签不会转化，html()遇到标签会语义化标签的内容
-
jQ.val()设置或者返回表单的内容value的值
//获取value的值
console.log( $("input").val());
//设置value的值
$("input").val("设置一下");
-
jQ.attr("key","value")设置或者元素的属性值
//设置
$("#demoID").attr("title","我是标题") //添加
$("#demoID").attr("title","我是标题-X") //修改
//获取
$("#demoID").attr("title")；
-
jQ.removeAttr("属性")移除摸一个属性
$("#demoID").removeAttr("id");
-
jQ.prop("属性","属性值")这个直接添加在DOM对象上 -
jQ.removeProp()删除
4动画
4.1隐藏和显示
$(selector).hide(speed,callback);$(selector).show(speed,callback);
$("button").eq(0).click(function(){
//显示
$("div").show(2000,function(){
console.log("动画执行完毕");
});
});
$("button").eq(1).click(function(){
//隐藏
$("div").hide("slow",function(){
console.log("hide动画执行完毕");
});
});
$("button").eq(2).click(function(){
//切换
$("div").toggle("fast",function(){
console.log("切换动画执行完毕");
});
});
4.2滑动
slideDown()slideUp()slideToggle()
//展开
$("button").eq(3).click(function(){
$("div").slideDown(1000,function(){
console.log(22221);
});
});
//收起
$("button").eq(4).click(function(){
$("div").slideUp(1000,function(){
console.log(1111);
});
});
//切换
$("button").eq(5).click(function(){
$("div").slideToggle(1000,function(){
console.log(33333321);
});
});
4.3淡出淡入
-
fadeOut()用于淡出可见元素 -
fadeIn()用于淡入已隐藏的元素。 -
fadeToggle()方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 -
fadeTo()方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。更改透明度
$("button").eq(0).click(function () {
$("div").fadeIn(2000,function () {
console.log("动画执行完毕");
})
})
$("button").eq(1).click(function () {
$("div").fadeOut(2000,function () {
console.log("动画执行完毕");
})
})
$("button").eq(2).click(function () {
$("div").fadeToggle(2000,function () {
console.log("动画执行完毕");
})
})
$("button").eq(3).click(function () {
$("div").fadeTo(2000,0.5,function () {
console.log("动画执行完毕");
})
})
4.4 动画的停止
-
$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,如果是true，表示清空队列，就是后面的动画都不执行了
goToEnd 参数规定是否立即完成当前动画。默认是 false。如果为true，表示立即执行当前动画，然后在执行后续动画
stop(false)停止当前动画，后续队列中的动画继续执行stop(true)停止当前动画，并清空队列中的所有动画stop(false,true)当前动画立即执行完毕，后续队列中的动画继续执行stop(true,true)当前动画立即执行完毕，并清空后续队列中的所有动画
案例.gif
4.5 自定义动画
- 格式
animate(目标对象，时间，回调函数)
/**
自定义动画
animate(目标对象，时间，回调函数)
*/
$(function(){
$("button").eq(0).click(function(){
$("div").animate({width:"500px",height:"500px"},1000,function(){
console.log("动画完成");
});
});
$("button").eq(1).click(function(){
$("div").animate({width:"+=50px",height:"+=50px"},1000,function(){
console.log("动画完成");
});
});
});
5 事件
- 常用的点击事件
对象.事件的名字(function(){})
$("#btn1").click(function () {
$("#box").append($("先创建的P你标签
"));
});
5.1事件的绑定 on
对象.on("事件名字"，"选择器"，"事件处理函数")
$("div").on("click",function(event){
console.log("点击事件");
// event 事件处理对象
//target是事件的目标对象 就是div
});
每一个事件函数都有一个隐藏的参数 event,其中这个几个属性，
type是事件类型，target目标对象(事件作用的对象),data是自定义数据，可以在点击事件传值
$("div").on("click",{name:"CC",age:"18"},function(e){
console.log(e.data);
})
image.png
这个事件绑定可以绑定多次，也可以是不同的事件 比如:
mouseenter
5.2 事件冒泡 和 事件的默认行为
- 当标签事件被触发的时候,事件会向上层层传递直到根节点,如果这个过程中遇到注册了相同事件的标签那么也会触发
在jQ中阻止事件冒泡的方式有2种
1.直接return:false
2.根据事件函数的参数event阻止event.stopPropagation() | window.event.cancelBubble = true;
事件的默认行为主要是
a标签的一些行为事件 ,有些时候是不需要这些行为自动触发的 所以需要阻止event.preventDefault();
5.3事件委托
- 格式
$("选择器-委托对象").on("事件类型","选择器(具体添加事件的对象)",回调函数) - 作用: 可以给当前还
没有创建(不存在)的标签添加事件, 可以提升性能
5.4事件的自动触发 trigger
script>
//自动触发事件，模拟被点击事件
$("div").click(function(){
console.log("点击div了");
});
//自动触发相关方法 tigger/ tiggerHander
//触发的事件是那个标签
//要触发的事什么事件
$("div").trigger("click");
//如果页面中有多个div，tigger事件选中的所有的div都会被触发 click事件
// tiggerHander只会触发第一个div的click事件
5.5事件的解绑
6.操作元素节点
6.1 元素的创建的2种方式
jQ.html()- 原生创建
document.createElement("span")
$(".box").html("spanA");
6.2获取节点
-
parent()父级节点 -
children()子节点 -
next()下一个兄弟元素 -
siblings()所有的兄弟元素 -
prev()上一个兄弟元素 -
find()比如：$("ul").find(li)查找li元素 (相当于后代选择器 $("ul li")) -
eq()$("li").eq(2)找到li的第二元素 (相当于$("li:eq(2)"))
image.gif
6.3 添加删除节点
-
append()- 在被选元素的结尾插入内容 -
appendTo("父元素")把子元素添加到父元素容器里 -
prepend()- 在被选元素的开头插入内容 -
after()- 在被选元素之后插入内容 -
before()- 在被选元素之前插入内容 -
remove()- 删除被选元素（及其子元素） -
empty()- 从被选元素中删除子元素 -
clone()-克隆节点
7 jQ判断表单元素中的单选框或者是复选框是否选中
-
$("input").is(":checked")返回值是bool值
$("input").is(":checked")