jQuery基础与应用#最流行的前端JS开发框架就要这么用
收藏本课程是JavaScript的高级框架jQuery部分, 以最新版本的jQuery进行教学, 全面讲解了jQuery的各种API的应用, 每个知识点都配合相关的实用案例进行讲解, 课程讲解细致并和实战应用相结合。是jQuery非常不错的一课程。
1关: jQuery的基本应用 本关主要介绍js的框架功能, 讲解jQuery的引入和基本使用, 重点讲解了几种常用的jQuery选择器,并通过实例演示介绍jQuery的一些基础功能。
2关:jQuery编写页面特效 本关主要讲解了jQuery操作样式,包括基本的样式操作和类样式操作, 也详细介绍了jQuery处理动画,并通过实例演示一些常见特效的实现过程。
3关:jQuery创建元素和操作属性 本关主要讲解jQuery创建新元素加到页面中,并操作元素的属性,重点介绍了jQuery提供的内部属性方法,并结合实例详细讲解了本关知识点应用。
4关:jQuery的事件操作 本关内容包括各种jQuery的事件操作和事件绑定方式和解绑方法,并对比介绍不同事件的绑定方式, 每个应用都有实例结合对照讲解.
一定要放在下面
1.Jquery的顶级对象$
DOM中的顶级对象:document-----页面中的顶级对象
document.下面属性和方法
BOM中的顶级对象是浏览器:window----浏览器的顶级对象
window.浏览器中的属性和方法
window.document
jquery的顶级对象:jQuery -----$
2.页面加载事件
//页面所有的代码都加载完成之后才执行
$(window).load(function () {
console.log("我执行了111111");
});
//页面中基本的标签加载完成之后就执行了
$(document).ready(function () {
console.log("我执行了22222");
});
//简化方法
$(function () {
console.log("我是最简单的方法加载页面")
})
3.常用的jquery中的方法
//常用的选择器 id 元素 类
//常用的方法 操作样式 操作内容 操作属性
//常用的事件 点击事件 鼠标放上 鼠标离开
$(function () {
$("li").text("bjyxszd");
$("#btn").attr("data-index","100"); //添加属性
});
4.jquery对象和DOM对象互转
//DOM对象转成jquery对象
/ window.onload = function () {
//DOM 对象
var obj = document.getElementById("btn");
/!obj.onclick = function () {
this.style.backgroundColor ="red";
}!/
//jquery对象 $(window).load(); $(document).ready();
$("#btn").click(function () {
$(this).css("background","pink");
})
}/
//jquery 对象转成DOM 对象
/
1.jquery对象.get(0);
2.jquery对象[0];
/
$(function () { /*$("#btn").get(0).onclick = function () { this.style.backgroundColor ="yellow"; }*/ $("#btn")[0].onclick = function () { this.style.backgroundColor ="yellow"; } })
$(this).val()=="关灯" .val() 是获取值 $(this).val('关灯'); .val('赋值')
5.jquery的选择器
//DOM获取元素的方式
document.getElementById("id的值");//根据id获取元素 一个
document.getElementsByTagName("标签名");//根据标签名字获取元素 多个
document.getElementsByName("name属性");//根据Name属性获取元素 多个
document.getElementsByClassName("类名");//根据class类名获取元素 多个
//jquery选择器
1.id选择器:$("#id的值") ==》1个
2.元素选择器:$("标签名") ==》多个
3.类选择器:$(".类名") ==》多个
4.$("*") ==>所有
6.标签+类选择器 $(li.cls)
7.多条件选择器 $(span,li,div,.cls,#btn);
8.层级选择器
A.后代选择器(子元素中的元素,儿子,孙子,子子孙孙)
$(“#dv li”)或者$(“ul li”)或者$(“.cls li”)
B.子代选择器(直接的所有子元素,儿子)
$(“#ul>li”)或者$(“div >span”)或者$(“.cls >li”)
C.获取当前元素的相邻元素: //这个元素后紧跟着的第一个元素
$(“div + span”)
D.获取当前元素后面所有元素://这个元素后跟着的所有元素
$(“div ~ span”)
E.常见的选择器,(可以理解成是过滤器)
:even偶数 选择器
:odd奇数 选择器
$(function () {
alert("哈哈");
$("#u1 li:odd").css("backgroundColor","yellow");
$("#u1 li:even").css("backgroundColor","blue");
});
9.索引选择器
eq(3)获取索引为3的元素; 一个
gt(3)索引大于3的所有元素; 多个
lt(3)索引小于3的所有的元素; 多个
$("#u1 li:eq(7)").css("backgroundColor","red");
$("#u1 li:gt(7)").css("backgroundColor","green");
$("#u1 li:lt(5)").css("backgroundColor","black");
10.jquery操作样式常见的方法
.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
.text()方法,设置标签中间显示的文本内容,类似于innerText
.val()方法.设置input标签中value的值,类似于value
.css()方法,.设置元素的样式,类似于style
注意:
()中写字符串,一个参数,就是要设置的值,什么也不写,返回的是这个属性的值 如:$("#dv").html(); ==>返回标签里的内容
.css()写的是键值对
A.操作样式:
//第一种方式
/$("#btn").click(function () {
$("#dv").css("width","100px");
$("#dv").css("height","100px");
$("#dv").css("backgroundColor","red");
})/
//第二种方式
/$("#btn").click(function () {
$("#dv").css("width","100px").css("height","100px").css("backgroundColor","red");
})/
//第三种json格式
$("#btn").click(function () {
$("#dv").css({"width":"100px","height":"100px","backgroundColor":"red"});
})
})
11.操作类样式
addClass();参数:类样式名字,添加样式的同时不会干掉原有的样式
removeClass();不写参数移除所有的类样式
removeClass(“cls“);移除指定的一个类样式
//判断该元素是否有这个类样式
console.log($("#dv").hasClass("cls2"));
//toggleClass(类名); 如果有此类就删除,没有就添加
$("body").toggleClass("cls");
var index = $(this).index(); //对应索引操作
$(".bottom>li").eq(index).addClass("selected").siblings("li").removeClass("selected");
12.链式编程
链式编程原理:内部返回了return this当前对象
有些方法设置了值才能返回当前对象,如果没有设置值,是获取属性对应的值,而不是当前对象
13.获得兄弟元素的方法
next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个)
nextAll(); //当前元素之后的所有兄弟元素
prev(); //当前元素之前的紧邻着的兄弟元素(上一个)
prevAll(); //当前元素之前的所有兄弟元素
siblings(); //当前元素的所有兄弟元素(同袍元素 除自己外)
//end() 断链 可以恢复到断链之前的效果
$(this).prevAll().css("background","blue").end().nextAll().css("background","yellow");
14.jquery显示隐藏动画
hide()方法:
$("div").hide(1000); //参数是数字 参数:可以是一个number类型,也可以是字符串类型
$("div").hide("slow");
$("div").hide("normal");
$("div").hide("fast"); $("div").hide(1000,function () {
alert("隐藏完毕");
});
show()方法:
$("div").show(1000); //参数是数字
$("div").show("slow");
$("div").show("normal");
$("div").show("fast");
$("div").show(1000,function () {
alert("显示完毕");
});
$(function () {
$("#btn1").click(function () {
//last() 最后一个元素开始隐藏*
$("div>img").last().hide(600,function () {
//arguments.callee 相当于递归 一个一个元素 进行隐藏
$(this).prev().hide(600,arguments.callee);
})
});
$("#btn2").click(function () {
//first() 第一个元素开始显示
$("div>img").first().show(600,function () {
//arguments.callee 相当于递归 一个一个元素 进行隐藏 *
$(this).next().show(600,arguments.callee);
})
});
})
15.滑入滑出淡入淡出动画
$("div").slideUp(1000);//滑入
$("div").slideDown(1000);//滑出
$("div").slideToggle(1000);//切换滑入滑出
$("div").fadeIn(1000);//淡入
$("div").fadeOut(1000);//淡出
$("div").fadeToggle(1000);//切换淡入淡出
//可以设置透明度,参数1:时间,参数2:到达透明度
$(“div”).fadeTo(1000,0.3);//一个参数,常用
//参数1:没有时间,参数2:到达透明度
//和css("opacity",0.1);
$("div").fadeTo(0,0.1);//一个参数
16.自定义动画:animate方法
第一个参数:JSON对象,可以通过键值对,设置多个样式(数值的属性可以改,颜色不能改)
第二个参数:动画的时间
第三个参数:回调函数(可选)
停止动画效果:stop()方法,解决下拉框案例中的bug
$(this).children("ul").stop().show(500);//显示ul
17.创建元素和追加元素
DOM中可以动态创建元素:document.createElement(“标签的名字”);
jQuery中同样可以创建元素标签,并且返回的就是jQuery对象,可以直接调用方法进行使用
append:方法用来在元素的末尾追加元素(最后一个子节点)。增加元素末尾(儿子)(元素内部) 把元素追加到其他元素里面
prepend:在元素的开始添加元素(第一个子节点)。增加元素开始(儿子)
after:在元素之后添加元素(添加兄弟)增加元素后面(兄弟)
before:在元素之前添加元素(添加兄弟)增加元素前面(兄弟)
$('#dv').append($('学习猿地'));
append方法可以把页面中的元素添加到其他标签中,添加的方式属于移动
append() 相当于剪切 $("#dv>p").clone() 把$("#dv>p")克隆一份 clone():克隆
$("#dv1").append(obj); //在dv1里添加#dv>p 被动
$($("#dv>p")).appendTo($("#dv1")); //把"#dv>p"追加到dv1里面 主动
18..html方法
//设置内容后,原内容丢失,返回的是当前对象
//var dvObj=$("div").html("哈哈");
//设置层中间显示其他的标签内容
$("div").html("学习猿地");
//直接获取的是标签中的内容
console.log($("div").html());
html方法设置内容,返回的是当前的对象,如果不传入参数,获取的是标签中的内容
.text方法同上
创建元素的方式:
.html方法可以创建元素
$(“html标签”)可以创建元素
19.清空层中的内容和移除层
$("div").html("");//删除元素中的所有内容 $("div").html();括号里面什么也不加是获取内容
$("div").empty();//清空元素中的所有内容
$("div").remove();//删除自身,自杀式
$("div>p").remove();//可以删除子元素的某一个节点
20.设置和获取表单的value
常见的表单标签都可以通过val方法获取和设置value值
$("#txt1").val("admin"); console.log($("#txt1").val());
$("#s1").val(2);//设置value为2的选中
console.log($("#s1").val());
textarea 可以用 text() 方法设置和获取value
21.设置和获取系统属性值或者自定义属性
attr()方法:可以设置属性值,两个参数:1.属性名字,2,属性值
attr()方法:可以获取属性值,一个参数:1.属性名字
$(function () {
$("#btn").click(function () {
var aobj = $('');//创建a元素
aobj.text("百度"); //标签内容
aobj.attr("href","https://www.baidu.com");
aobj.css("background","pink").css("color","red");
(aobj).appendTo($("#dv")); }) })
22.bool属性的设置方法 prop("属性","值");
//$("#dv :checkbox") 选择器的一种 选择dv下所有属性是checkbox的元素
$(function () {
$("#btnall").click(function () {
$("#dv :checkbox").prop("checked",true);
});
$("#btnoall").click(function () {
$("#dv :checkbox").prop("checked",false);
})
})
var checkedval = $(this).prop('checked');
$("#dv input").prop('checked',checkedval);
23.获取宽度和高度的方法
//1.获取宽度高度 width() height()
console.log($("#dv").width());
console.log($("#dv").height());
//2.设置宽度 //console.log($("#dv").width(500)); //3.包含padding innerWidth()) innerHeight()) console.log($("#dv").innerWidth()); console.log($("#dv").innerHeight()); //4.包含padding+border outerWidth() outerHeight() console.log($("#dv").outerWidth()); console.log($("#dv").outerHeight()); //5.包含padding+border+margin(true) outerWidth(true) outerHeight(true) console.log($("#dv").outerWidth(true)); console.log($("#dv").outerHeight(true)); //6.获取页面可视区域 console.log($(window).width()); console.log($(window).height());
24.获取偏移量位置
设置的时候元素在设置前如果没有脱离文档流,设置的时候会自动进行脱离文档流,默认为relative;
如果设置前有脱离文档流,那么设置的时候直接改变位置。
A.获取偏移量
console.log($("div").offset().left); //左偏移
console.log($("div").offset().top); //右偏移
B.设置偏移量
$("div").offset({"left":100,"top":100});
25.滚动位置
$(document).scrollLeft(500);==》距左滚动500
$(document).scrollTop(200);==》距上滚动200
console.log($(document).scrollLeft());
console.log($(document).scrollTop());
整个屏幕加载滚动事件
$(window).scroll(function () {})
26.事件绑定bind()方法
$(function () {
$("#btn").bind({"click":function () {
alert("哎呀妈呀");
},"mouseover":function () {
$(this).css("backgroundColor","red");
},"mouseout":function () {
$(this).css("backgroundColor","");
}});
})
27.绑定事件的on()方法 手机开发中也是使用on的方式绑定事件
*on()方法为父级元素绑定事件,子元素来触发.**
$(function () {
$("#btn").click(function () {
$('
我是p元素
').appendTo($("#dv")); //把p加入到dv里面
//$("#dv").append('
我是p元素
'); 在dv里面追加p元素
/* on() 绑定事件 的三个元素 * 参数1:绑定事件的类型 * 参数2:绑定事件的元素 * 参数3:执行事件的函数 */ $("#dv").on("click","p",function () { alert("看见我了没?") }) }) })
28.解除绑定事件
.off()方法可以解绑事件
$("#btn1").on("click",function () {
alert("被点了");
});
$("#btn2").on("click",function () { $("#btn1").off("click"); });
推荐:用什么方式绑定事件就要用对应的解绑事件解除绑定
$("#btn").bind("click",function(){});
$("#btn").unbind("click");
$("#dv").delegate("p","click",function(){});
$("#dv").undelegate("p","click");
//解绑多个事件
$("#btn1").off("click mouseover");
多个事件解绑 加 空格
$(function () {
$("#div").on("click",function () {
alert("层被点了");
});
/$("#div").on("click","p",function () {
alert("p被点了");
});/
$("#btn1").on("click",function () {
//解绑事件的时候div和p同时解绑(所有的)
//自身绑定的事件以及动态绑定的事件都会解绑 $("div").off("click");
});
//解除绑定事件:自身的绑定事件和动态绑定的事件都会被解绑
//$("#div").off("click","**");
//$("#div").off();//全部解绑
//固定的写法,解除p的绑定事件,自身div的事件不会被解绑
})
29.事件的触发
.trigger('focus').trigger('select'); 获取焦点 和选中内容的事件触发
$(function () {
$("#btn1").click(function () {
//$("#txt").focus(); //直接调用元素事件
//$("#txt").trigger("focus"); //同上效果
$("#txt").triggerHandler("focus");//不会触发浏览器默认获取焦点的行为,但是会执行事件
})
})
.trigger()和.triggerHandler()区别前者会触发浏览器的默认行为,并执行事件,后者不会触发浏览器默认行为,但是会执行事件
获得焦点属于浏览器的默认行为
30.事件冒泡处理
$("#dv2").click(function () {
alert("我是dv2");
return false;
});
$("#dv3").click(function(event) {
alert("我是dv3");
event.stopPropagation();
//return false;
});
$("#monkey").click(function() { alert("我是连接"); return false; //取消默认事件 阻止跳转 });
31.隐式迭代each()
$(function () {
$("#uu>li").each(function (index,element) {
//each():相当于循环遍历
//console.log(index);
$(element).css("opacity",(index + 1) / 10); //颜色渐变
})
})
32.解决多库共存
//让jQuery释放对$的控制权
$.noConflict();
var $="哦买噶";
console.log($);
jQuery(function () {
jQuery("#btn").click(function () {
alert("正常的执行");
});
});
JavaWeb从基础到项目实战
Java 949
JavaWeb项目实战全程实录#学完你就可以自己用Java做项目了
Java 实战 5997
Bootstrap从入门到实战三天精品课程
前端 实战 3158
PHP项目开发全程实录【已完结】
PHP 实战 3322
WebAPI之DOM实战教程#JavaScript的核心技术
前端 中级 3289
Web前端页面各种布局方式全攻略#实战全程实录
前端 实战 3055
C4D三维立体设计全套课程#C4D字体案例实战
UI/UE 中级 1927
生产环境下的LAMP环境搭建#全部应用最新版本软件
Linux 中级 3027
辅导猿
辅导猿
辅导猿
辅导猿
辅导猿
学习资料 | 内容数量 |
---|---|
任务数量 | 116 关 |
视频教程 | 350 小时+ |
教学案例 | 800 个+ |
辅助资料 | 340 个+ |
练习作业 | 460 个+ |
阶段测评 | 1700 道+ |
王凡 好
GoCo 好
Wangmafei 好
是飒飒 好
千年老妖 好
Mr_xie 好