/*js加载完成事件*/
window.onload=function(){
console.log("页面和资源完全加载完毕");
}
/*jQuery的ready函数*/
$(document).ready(function(){
console.log("页面dom层渲染完毕---我是完整写法");
});
$(function(){
console.log("页面dom层渲染完毕---我是简写形势");
});
jQuery对象是一个由DOM对象组成的伪数组，jQuery转DOM使用数组取值的方式，DOM转jQuery使用jQuery的工厂函数。
//获取jq对象
let div=$("div");
//数组取值的方式获取DOM对象
let divDom=div[0];
//get函数获取DOM对象
let divDom=div.get(0);
//获取DOM对象
let box=document.getElementById("box");
//使用jq的工厂函数转换
/*一般转换来的jq对象，或者自己创建的jq对象取名时，推荐以$开头*/
let $box=$(box);
jQuery的选择器和CSS1-3的选择器完全一致，但是jQuery选择器在兼容性上更好。 比如css3的选择器在IE8及以下浏览器中不能使用，但是在jq中可以使用。而jq1.7以下的版本是可以使用在IE8中的，所以间接实现了在IE8里使用CSS3的选择器。
//使用选择器的方式实现后代选择
$("div p").css("color","red");
//使用find函数实现后代选择
$("div").find("p").css("color","red");
//使用选择器的方式实现子代选择
$("div>p").css("color","red");
//使用children函数实现子代选择
$("div").children("p").css("color","p");
//选择所有匹配的li中下标为0的这一个li
$("li:eq(0)").css("color","red");
//对应函数为eq函数
$("li").eq(0).css("color","red");
//获取所有匹配的li中下标为奇数的li
$("li:odd").css("color","red");
//获取所有匹配的li中下标为偶数的li
$("li:even").css("color","red");
|
函数名 |
说明 |
|
children(selector) |
等价于子代选择器，如果不给参数（等价于给*）表示获取所有子代 |
|
find(selector) |
等价于后代选择器，不给参数如上 |
|
eq(index) |
在得到的一组元素中匹配下标为index的那一个 |
|
siblings(selector) |
查找除了自己以外的兄弟节点，不给参数则找所有。 |
|
next(selector) |
查找下一个兄弟节点，如果给定了参数，下一个节点不符合参数要求则不会选中，一般使用时不给参数 |
|
prev(selector) |
查找上一个兄弟节点，如果给定了参数，上一个节点不符合参数要求则不会选中，一般使用时不给参数 |
|
parent() |
获取父级节点 |
|
parents(selector) |
获取所有的父级节点中符合给定的参数要求的第一个这一层级 |
//获取属性原生属性---attr和prop结果相同
console.log($("div").attr("title"));
console.log($("div").prop("title"));
//获取属性值和属性名相同的属性
console.log($("input").attr("checked")); //选中结果为checked否则undefined
console.log($("input").prop("checked")); //选中结果为true否则false
//获取自定义属性
console.log($("div").attr("zdy")); //可以正常取值
console.log($("div").prop("zdy")); //结果为undefined
//设置原生属性
$("div").attr("title","attr设置的标题"); //可以设置
$("div").prop("title","prop设置的标题"); //可以设置
//设置属性名和属性值相同的属性
$("input").attr("checked",true); //设置选中
$("input").attr("checked","checked"); //设置选中，在1.7版本以前只能使用attr设置，推荐使用该方案
$("input").attr("checked",false); //设置取消选中
//在1.7版本以前取消选中
$("input").removeAttr("checked"); //设置取消选中
$("input").prop("checked",true); //设置选中
$("input").prop("checked",false); //设置取消选中
//设置自定义属性
$("div").attr("zdy2","自定义2"); //可以设置属性
$("div").prop("zdy2","自定义2"); //设置属性无效
//一次设置多个属性
$("div").attr({title:"一次多个属性",id:"d1"}); //attr函数内传递对象的方式批量设置属性/prop函数同理
//设置文本颜色
$("p").css("color","red");
//设置背景颜色：background-color属性要改写为backgroundColor
$("p").css("backgroundColor","green");
//一次设置多个样式
$("p").css({color:"red",fontSize:"20px"});
//获取样式的值
console.log($("p").css("fontSize"));
//追加一个样式
$("p").addClass("active");
//追加多个样式，使用空格隔开即可
$("p").addClass("active hover");
$("div").removeClass("active");
let flag=$("p").hasClass("active");
console.log(flag); //如果p标签有active样式结果为true否则false
//如果p标签有active样式则移除该样式，否则追加active样式
$("p").toogleClass("active");
使用jQuery的工厂函数可以直接创建出jQuery对象的DOM节点
let $p=$("<p title="把你鼠标移开~~">我是jq创建的标签</p>");
//此时$p这个dom对象只存在内存中，页面中不存在该元素
console.log($p);
//清空box元素内所有内容，box会保留，返回值是box
$("#box").empty();
//删除box元素，box消失，返回值是box
//remove删除的元素再次追加回页面，其绑定的事件会消失
$("#box").remove();
//删除box元素，box消失，返回值是box
//detach删除的元素再次追加回页面，其绑定的时间会跟随回来
$("#box").detach();
//只复制box节点
let $box=$("#box").clone();
//复制box节点和其绑定的事件
let $box2=$("#box").clone(true);
//复制的节点追加到页面中
$("#main").append($box);
<body>
<ul>
<li><b>选项1</b></li>
<li><b>选项2</b></li>
<li><b>选项3</b></li>
</ul>
<input type="text" value="你好">
<input type="text" value="我不好">
<select>
<option value="1">男</option>
<option value="2" selected>女</option>
</select>
</body>
//text函数取值会把匹配到的所有元素的文本内容合并为一个字符串
let texts=$("li").text(); //选项1选项2选项3
//html函数取值只取第一个匹配到的元素的内部的内容，包含标签结构
let html=$("li").html(); //<b>选项1</b>
//val函数取值只取第一个匹配到的表单元素的value的值
let val=$("input").val(); //你好
let sex=$("select").val(); //获取到当前选中的option的value的值
$("li").text("设置文本"); //所有li标签文本内容都变为设置文本，li原先的b标签也被覆盖掉了
$("li").html("<i>设置标签</i>"); //所有li标签内容变为斜体设置标签
$("input").val("val函数设置"); //所有input标签value属性的值都为设置值
$("select").val("1"); //设置选中value为1的选项
//使用回调函数设置文本内容，设置标签和value属性同理
$("li").text(function (index,text) {
console.log(index);//li的下标
console.log(text); //当前li标签的原始内容
//回调函数一定要给返回值，返回的结果就是最终设置的值
return index+1+text;
});
|
函数名 |
描述 |
备注 |
|
height() |
获取/设置元素的高度 |
给参数(数值，不带单位，默认px)则设置，否则获取。 |
|
width() |
获取/设置元素的宽度 |
给参数则设置否则获取，得到的是内容的宽度，不包括内外边距和边框 |
|
innerHeight() |
获取元素的高度 |
包含内边距的高度 |
|
innerWidth() |
获取元素的宽度 |
包含内边距的宽度 |
|
outerHeight() |
获取元素的高度 |
包含内边距和边框的高度 |
|
outerWidth() |
获取元素的宽度 |
包含内边距和边框的宽度 |
|
outerHeight(true) |
获取元素的高度 |
包含了外边距、边框和内边距的高度 |
|
outerWidth(true) |
获取元素的宽度 |
包含了外边距、边框和内边距的宽度 |
|
函数名 |
描述 |
备注 |
|
scrollTop() |
获取滚动条滚动的高度 |
一般使用$(window).scrollTop()获取网页滚动条 |
|
scrollLeft() |
获取滚动条向右滚动的距离 |
目前一般不使用 |
|
offset() |
获取元素距离文档顶部的位置 |
返回值如下:{top:100,left:200} |
|
postion() |
获取定位元素距离有定位的父级元素的位置 如果所有父级都没有定位，则返回距离浏览器内容左上角的顶点 |
返回值如下:{top:200,left:100} |
$("html,body").animate({scrollTo:0},1000);
//函数名方式绑定
$("#box").click(function(){
console.log("函数名方式绑定");
});
//bind方式绑定
$("#box").bind("click",function(){
console.log("bind方式绑定");
});
//on方式绑定
$("#box").on("click",function(){
console.log("on方式绑定");
});
//on或者bind一次绑定多个事件
$("#box").on("click mouseover mouserout",function(){
console.log("一次绑定多个事件");
});
移除事件代码演示
//unbind函数移除事件
$("#box").unbind("click");
//off函数移除事件
$("#box").off("click");
//off或者unbind移除多个事件
$("#box").off("click mouseout");
//通过JS代码来触发box的单击事件
$("#box").trigger("click");
jQuery的事件对象必须通过事件触发的函数传递参数的方式来使用，没有兼容问题
/*
* 内置动画的参数如下：
* 1：number类型的毫秒数,默认都是400/string类型的单词表示normal普通速度(400),fast(600),slow(200)
* 2：function类型的回调函数,表示在动画执行完毕自动执行的函数
* */
$("#show").click(function () {
/*控制div显示*/
$("#main").show("fast");
});
$("#hide").click(function () {
/*控制div隐藏*/
$("#main").hide("slow");
});
$("#sliderUp").click(function () {
$("#main").slideUp();
});
$("#sliderDown").click(function () {
$("#main").slideDown();
});
$("#toggleSlider").click(function () {
$("#main").slideToggle(5000);
});
$("#fadeIn").click(function () {
$("#main").fadeIn();
});
$("#fadeOut").click(function () {
$("#main").fadeOut();
});
$("#toggleFade").click(function (){
$("#main").fadeToggle(5000);
});
$("#fadeTo").click(function () {
/*
* fadeTo参数如下：
* 1.执行时间
* 2.指定的透明度，可选值0-1之间，0表示完全透明，1表示不透明
* 3.表示执行效果方式，可选值：swing表示缓动，是默认值。或者是linear表示匀速
* 4.动画执行完毕的回调函数
* */
$("#main").fadeTo(3000,.4,"swing",function () {
console.log("透明度已经调整到40%");
});
});
/*
* animate函数参数如下：
* 1.对象类型：设置要执行动画的css属性[必填]
* 1.1：jQuery动画不支持transform属性
* 2.速度:执行动画所需的时间，单位毫秒[必填]
* 3.执行效果：swing缓速（默认值）,linear匀速
* 4.回调函数：动画执行完毕后自动调用的函数
* */
/*
* jq动画中设置的属性名要符合DOM对象属性名的设置（驼峰命名）
* 例如：font-size必须写为：fontSize
* */
$("#d1").animate({left:"200px",opacity:".3",fontSize:"30px"},3000);
$("#qu1").click(function () {
/*使用回调函数来实现动画的队列效果*/
$("div").animate({left:"200px"},1500,"swing",function () {
$("div").animate({opacity:0.4},1500,"swing",function () {
$("div").animate({fontSize:"50px"},2000,"swing",function () {
$("div").animate({top:"200px",height:"400px",width:"400px"},2000);
});
});
});
});
$("#qu2").click(function () {
/*使用链式编程来实现动画的队列效果*/
/*
* delay函数用来控制等待时间，单位毫秒，delay函数也可以用在内置动画中
* */
$("div").animate({left:"200px"},1500)
.animate({opacity: 0.4},1500).delay(3000)
.animate({fontSize: "50px"},1500)
.animate({top:"200px",height:"400px",width: "400px"},2000);
});
队列动画已体现效果
stop(是否清除队列,是否立即完成当前动画);
$("#box").stop(true,true); //清除后续动画效果，当前动画效果立即完成
$("#box").stop(true,false); //清除后续动画效果，当前动画效果立即停止,该 效果可省略第二个参数
$("#box").stop(false,true); //后续动画会继续执行，当前动画立即完成
$("#box").stop(false,false); //后续动画会继续执行，当前动画立即停止，该效果可省略两个参数
(function($){
//设置某个元素的color属性
$.fn.changeColor=function (color) {
this.css("color",color?color:"red");
}
})(jQuery);
//不传参数则设置box的字体颜色为red
$("#box").changeColor();
//传递正确的参数则设置box的字体颜色为指定颜色
$("box").changeColor("#FFF");//设置box的字体颜色为白色
<div class="main">
<div class="banner-list">
<div class="banner-item"><a href=""><img src="images/ad-1.png" alt=""></a></div>
<div class="banner-item"><a href=""><img src="images/ad-2.png" alt=""></a></div>
<div class="banner-item"><a href=""><img src="images/ad-3.png" alt=""></a></div>
</div>
<div class="banner-opt">
<span class="left"><</span>
<span class="right">></span>
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
*{
padding: 0;
margin: 0;
}
.main{
height: 300px;
width: 380px;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.banner-list{
position: absolute;
left: 0;
top: 0;
}
.banner-list div{
float: left;
}
.banner-opt span{
display: none;
height: 20px;
line-height: 20px;
width: 20px;
text-align: center;
background-color: #ccc;
color: #fff;
position: absolute;
top: 50%;
margin-top: -10px;
cursor: pointer;
}
.banner-opt span.left{
left: 0;
}
.banner-opt span.right{
right: 0;
}
.main:hover .banner-opt span{
display: block;
}
.banner-opt ul{
list-style: none;
width: 45px;
height: 25px;
position: absolute;
left: 50%;
margin-left: -22px;
bottom: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.banner-opt ul li{
height: 10px;
width: 10px;
background-color: #ccc;
border-radius: 50%;
}
.banner-opt ul li.active{
background-color: #5cb85c;
border: 2px solid #fff;
}
/*初始化轮播图默认选中下标*/
let index=0;
/*初始化计时器*/
let inter;
$(function(){
/*无缝轮播*/
/*1.复制首项内容*/
let $itemFirst=$(".banner-item").eq(0).clone(true);
/*2.追加到末尾*/
$(".banner-list").append($itemFirst);
/*3.更新轮播box的宽度:banner-item的宽度*banner-item的个数*/
let listWidth=$(".banner-item").length*$(".banner-item").width();
$(".banner-list").width(listWidth);
/*下一张按钮*/
$(".right").click(next);
/*上一张按钮*/
$(".left").click(prev);
/*鼠标进入则停止轮播,移出则继续轮播*/
$(".banner-list").mouseover(stopMove).mouseout(autoMove);
/*页面加载则自动轮播*/
autoMove();
});
/*切换下一张*/
function next() {
index++;
if(index===$(".banner-item").length){
index=1;
$(".banner-list").css("left",0);
}
moveItem(index);
}
/*切换上一张*/
function prev(){
index--;
if(index===-1){
index=$(".banner-item").length-2;
$(".banner-list").css("left",($(".banner-item").length-1)*$(".banner-item").width()*-1);
}
moveItem(index);
}
/*移动轮播图*/
function moveItem(i) {
$(".banner-list").stop().animate({"left":-i*$(".banner-item").width()},500);
/*轮播指示点设置*/
if(i==$(".banner-item").length-1){
$("li").eq(0).addClass("active").siblings().removeClass("active");
}else{
$("li").eq(i).addClass("active").siblings().removeClass("active");
}
}
/*自动轮播*/
function autoMove() {
inter=setInterval(next,1500);
}
/*停止自动轮播*/
function stopMove() {
clearInterval(inter);
}
