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> 元素$("p#demo") 选取所有 id="demo" 的 <p> 元素$(".liItem,div") 并集选择器$("#dv > span") 子代选择器-
$("#dv~span")div后面的兄弟元素sapn $("#dv+sapn") 获取#dv后面的直接兄弟$("选择器名:odd/even") 奇数选择器/偶数选择器 是指元素的下标是奇数或者偶数
2.3属性选择器
<script>
//属性选择器
$(function(){
// 查找a中有href属性的标签
$("a[href]").css("background","red");
//查找到有 www.baidu.com属性的 设置样式
$("a[href='www.baidu.com']").css("background","yellow");
//查找到 href != "www.jd.com" 的标签 设置样式
$("a[href!='www.jd.com']").css("background","green");
//找到包含 www的标签
$("a[href^='www']").css("background","#ccc");
//找到以dom结尾的元素
$("a[href$='dom']").css("background","black");
// 包含摸个元素的标签
$("a[href*='m']").css("background","red");
//选择包含多个属性的 标签
$("a[href][title='s']").css("background","pink");
});
</script>
2.4过滤选择器
<script>
$(function(){
//选择第一个元素
$("li:first").css("background","pink");
//选择最后一个元素
$("li:last").css("background","pink");
//选择索引为3的元素
// $("li").eq(3).css("background","red");
$("li:eq(3)").css("background","red");
//选择索引不等于2的元素
$("li:not(:eq(2))").css("background","yellow");
//选择索引是奇数的元素
$("li:odd").css("background","red");
//选择索引是偶数的元素
$("li:even").css("background","pink");
//选择大于摸个索引值的 元素
$("li:gt(5)").css("background","yellow");
//选择小于摸个索引值的 元素
$("li:lt(5)").css("background","yellow");
});
</script>
3.操作样式类
3.1设置样式 css的3种方法
<script>
$(function(){
//设置CSS的样式
// $().css("key","value") 方式一;
$("button").eq(0).click(function(){
//设置样式的 方法一
$("div").css("width","100px");
$("div").css("height","40px");
$("div").css("background","red");
});
//设置样式的方法二 链式编程思想
$("button").eq(1).click(function(){
$("div").css("width","100px").css("height","60px").css("background","yellow");
});
//对象的方式 设置样式
$("button").eq(2).click(function(){
$("div").css({
width:"100px",
height:"80px",
background:"pink"
});
});
//获取div的样式
$("button").eq(3).click(function(){
console.log( $("div").css("height"));
console.log( $("div").css("background"));
});
});
</script>
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>这是一个h3标签</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)当前动画立即执行完毕，并清空后续队列中的所有动画
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$("div>img:last").hide(300,function anHide() {
//循环调用 完成函数 函数递归
$(this).prev().hide(300,anHide);
});
});
$("#btn").click(function () {
$("div>img:first").show(300,function aniShow() {
//函数递归 自调用
$(this).next().show(300,aniShow);
})
});
});
</script>
案例.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>先创建的P你标签</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("事件类型","选择器(具体添加事件的对象)",回调函数) - 作用: 可以给当前还
没有创建(不存在)的标签添加事件, 可以提升性能
<script>
//事件委托
//
// JQ.on("click","给那个标签添加对象",fn);
$(function () {
//委托ul标签 给li标签 添加点击事件
$("ul").on("click", "li", function () {
alert($(this).text());
});
//新创建的li也可以 监听事件
$("button").on("click", function () {
var ulobj = document.getElementsByTagName("ul")[0];
var liobj = document.createElement("li");
liobj.innerHTML = "这是9个li";
ulobj.appendChild(liobj);
return false;
})
});
</script>
5.4事件的自动触发 trigger
script>
//自动触发事件，模拟被点击事件
$("div").click(function(){
console.log("点击div了");
});
//自动触发相关方法 tigger/ tiggerHander
//触发的事件是那个标签
//要触发的事什么事件
$("div").trigger("click");
//如果页面中有多个div，tigger事件选中的所有的div都会被触发 click事件
// tiggerHander只会触发第一个div的click事件
</script>
5.5事件的解绑
<script>
$("div").click(fn);
function fn(){
console.log("222222");
}
$("div").mouseenter(function(){
console.log("鼠标进入。。。。");
});
//事件注销
//注销div的所有点击事件
// $("div").off("click");
// 如有参数有回调函数，那么这个fn是表示 你要处理那个click点击事件
// 这个fn的函数 必须是 click中 函数是同一个函数
$("div").off("click",fn);
</script>
6.操作元素节点
6.1 元素的创建的2种方式
jQ.html()- 原生创建
document.createElement("span")
$(".box").html("<span>spanA</span>");
6.2获取节点
-
parent()父级节点 -
children()子节点 -
next()下一个兄弟元素 -
siblings()所有的兄弟元素 -
prev()上一个兄弟元素 -
find()比如：$("ul").find(li)查找li元素 (相当于后代选择器 $("ul li")) -
eq()$("li").eq(2)找到li的第二元素 (相当于$("li:eq(2)"))
<script type="text/javascript">
$(function () {
$("li").mouseenter(function () {
$(this).css("backgroundColor","red");
}).mouseleave(function () {
//找到父元素里面的子元素 去除样式
$(this).parent().find("li").css("backgroundColor","");
}).click(function () {
$(this).css("backgroundColor","red");
$(this).prevAll().css("backgroundColor","yellow");
$(this).nextAll().css("backgroundColor","green");
});
});
</script>
image.gif
6.3 添加删除节点
-
append()- 在被选元素的结尾插入内容 -
appendTo("父元素")把子元素添加到父元素容器里 -
prepend()- 在被选元素的开头插入内容 -
after()- 在被选元素之后插入内容 -
before()- 在被选元素之前插入内容 -
remove()- 删除被选元素（及其子元素） -
empty()- 从被选元素中删除子元素 -
clone()-克隆节点
7 jQ判断表单元素中的单选框或者是复选框是否选中
-
$("input").is(":checked")返回值是bool值
$("input").is(":checked")
