使用jQ的三个步骤
- 外部引入jq的插件
- 入口函数 $(function(){ })
- 功能的实现
javaScript和jQuery的对比
| JavaScript | jQuery | |
|---|---|---|
| 入口函数 | 只有一个，后面会覆盖前面 | 有多个，并且不会覆盖 |
| 代码兼容性 | 代码容易错乱，会影响到后面的代码 | 简洁不容易错乱，并且不会影响到后面的代码 |
| 浏览器兼容性 | 兼容性差 | 对浏览器兼容性做了封装，所以不存在兼容问题 |
选择器
$("p1,p2")// 并集选择器 对两个选择器一起共同设置
$("p1 p2")// 后代选择器
$("p1>p2")// 子代选择器
$("p1p2") //交集选择器 没有空格和逗号 表示对有共同的选择器设置
属性设置（追加、删除、切换）
attr（）获得设置属性值 //对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
addClass（）追加属性
removeClass（）删除属性
togleClass（）切换属性
hasClass（）判断是否有样式，一般用于避免用户操作与jq样式的重合
is（）
text（）获得文本内容，没有样式
html（）获得文本内容，包括样式
val 是例外，只代表value属性
注：括号里面设置一个属性样式用逗号隔开，设置多个属性样式，用冒号，并且多个设置之间用逗号隔开，并且整体需要加{ }符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.color{
color:blue;
}
.red{
background: red;
}
</style>
</head>
<body>
<p class="color">我是一个P标签</p>
<input type="text" value="请输入用户名">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(function () {
$("p").attr("class") //获得class下的属性值
$("p").attr("class","size") //将class下的color改为size
$("p").attr("class"："size"，"class":"one") // 追加多个属性值
$("p").addClass("red") //p标签中追加一个red属性
$("p").removeClass("red") //删除p标签中的red属性
$("p").toggleClass("red") //切换样式（注：一般与按钮一起切换）
$("p").hasClass("red") //判断是否有样式
$("p").is("red")
$("p").html("<b>热爱学习</b>")//p标签里面的内容替换成“热爱学习”，并且字体样式加粗
$("p").text("<b>热爱学习</b>")//p标签里面的内容替换成“<b>热爱学习</b>”，并且字体样式不会有变化
$("input").val("电话号码") //val是特殊的 只对value有效果，将value中“请输入用户名”，替换成“电话号码”
})
</script>
</body>
</html>内容添加
.$("p").append("学习内容"); 右追加到左，位置内容后
$("学习内容").appendTo("p");反之
$("p").prepend("学习内容"); 右追加到右，位置内容前
$("学习内容").prependTo("p");
$("p").after("学习内容"); 右追加到左，位置标签后
$("学习内容").insertAfter("p");
$("p").before("学习内容"); 右追加到左，位置标签前
$("学习内容").insertBefore("p");
删除节点
$("p").remove(); //删除节点，包括标签和内容
$("p").empty(); //清空节点内容
复制节点
$(this).clone().appendTo("p"); //复制节点
$(this).clone(true).appendTo("p"); //复制节点，包含所绑定的事件
替换节点
$("p").replaceWith("学习内容");//替换节点 左边内容换成右边
$("学习内容").replaceAll("p");//右边内容换成左边
遍历节点
children（）子元素
next（）下一个同辈元素
prev（）上一个同辈元素
sibling（）同一级的所有元素
closest（）被选元素的第一个祖先元素//祖先是 父 祖父 曾祖父 以此类推
parents（）该元素的所有父级元素
parent（）父级元素
find（）一直往下级找，返回多个子孙节点
css（）方法：与html（）方法相似，可以使用css（）方式设置获取css属性值
$("p").css("background-color","blue"); //写一个样式
$("p").css({"color": "red", "font-size": "50px"}); //写多个样式需要用小括号括起来
height和width可以直接写（不用带像素单位）
$("div").width(100);
$("div").height(100);
以下是最常用的事件：
鼠标事件：
click:单击时发生。
dblclick:双击元素时触发。
mouseenter:当鼠标指针放到所选元素时触发。
mouseleave:鼠标指针离开所选元素时触发。
hover:合成事件，鼠标放上去，鼠标离开
mouseover:当鼠标指针在所选元素上方悬停时触发。（子元素也生效）
mouseout:鼠标离开所选元素时（子元素也生效）
键盘事件：
keydown:当按下键盘按键时会触发。
keyup:当键盘按键被释放时会触发。
keypress:每插入一个字符，就会发生keypress事件
表单事件：
submit:提交表单时触发。
change:当表单元素的值发生改变时触发。区分于blur
focus:当表单元素获得焦点时触发。
blur:当表单元素失去焦点时触发。
select:当textarea或文本类型的input 元素中的文本被鼠标选中时
文件事件：
ready:当DOM加载完成以后触发。
resize:当浏览器窗口大小改变时触发。
scroll:当用户在指定的元素中滚动滚动条时触发。
解除、绑定事件
on（）方法绑定事件
off（）接触绑定事件
动画
hide（） 隐藏
show() 显示
toggle(时间) 切换
fadeIn(时间，透明度) 渐隐
fandOut(时间，透明度) 渐出
fadeToggle(时间) 渐隐渐出之间切换
slideUp(时间) 向上收起
slideDown(时间) 向下展开
slideToggle(时间) 收起展开切换
animate（{width：“200px”，left:”300px”},2000）2秒之内 宽度增加200px同时距离左边300px
小提示：如果将数值200px改为+=200px 则 它会不断的加200px宽度
可以写多个animate，用逗号隔开即可，动画效果是依次显示
注：要操纵元素的位置，一定要给元素设置position：relative，fixed或absolute
下拉式菜单可以用slideToggle（时间） 设置
轮播图用animate、定时器和递增、递减
选项卡用index eq
注：animate使用时一定要给父元素或祖先元素添加定位position，并且拥有position：relative这个属性的祖先元素的宽度一定 要小于整体图片的宽度，并且还要设置overflow：hidden属性，将多余的图片隐藏，只显示宽度内的图片
代码显示：
选项卡
$(function(){
$(".li").mouseenter(function () {
$(this).addClass("one").siblings().removeClass("one")
//点击li,li所发生的样式改变
var index=$(this).index()
//li点击的位置设置为变量index
$("div>img").eq(index).show().siblings().hide()
})
//用eq引用，让div下的img位置和li点击的位置对应，且显示，同辈元素隐藏
})
单个图片显示的轮播图-递增、递减、定时执行
$(function(){
var index=0 //图片初始值时第一张（因为数字是从0开始，0代表第一张图片）
$(".right").click(function () {
index++;
if(index==6){
index=0
}
//点击右边，次数不断加1，一直加到等于6，点击第6次时返回第一张，依次循环加
$(".img a").eq(index).show().siblings().hide()
//点击次数与图片顺序对应，并显示，同辈删除
})
$(".p .left").click(function () {
index--;
if(index<0){
index=5
}
//点击左边，次数不断减一，小于0时，返回到第5张图，依次循环减
$(".img a").eq(index).show().siblings().hide()
//点击次数与图片顺序对应，并显示，同辈删除
})
var x=function () {
index++;
if(index==6){
index=0
}
$(".img a").eq(index).show().siblings().hide()
}//意思同上
var i=setInterval(x,2000) //定时执行 2秒内执行x变量的内容
$(".content").hover(function () {
clearInterval(i) //鼠标指上去删除定时执行
},function (){
i=setInterval(x,2000)//鼠标指上去添加定时执行，设置变量是为了方便
})
})
多组轮播图
$(function () {
var index=1 //首尾组图复制，分别放在尾首位置，因为复制的尾图再最前面，所以index为1
$(".right").click(function () {
if(!$(".children").is(":animated")) { //判断是否有动画，避免用户操作和动画重合
index++;
if (index >4) {
$(".children").css({left:"-753px"})
// 让最后的首图回到前面首图的位置，通过定位，（如果不定位，动画回到首图会倒回去
而不是循环的走，定位的目的是让图片直接回到首图，而避免动画反着回去的效果）
//补充距离宽度是通过拥有position：relative这个属性的祖先元素设定的
index =2
//首图在最后一组已经显示，定位回到前面首图后应该直接到下一张所以索引对应位置为2
}
var x = -index * 753 + "px" //同上一样，只是对应的图片位置，变为长度
$(".children").animate({left: x}, 1000)
}
})
if(!$(".children").is(":animated")) {
$(".p .left").click(function () {
index--;
if (index<0) {
$(".children").css({left:"-2259px"})
//补充这个宽度是图片整体的宽度，需要移动的距离位置
index =2
}
var x = -index * 753 + "px"
$(".children").animate({left: x}, 1000)
}
)}
})
2530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
