脚本宝典收集整理的这篇文章主要介绍了jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
jqurey 是一个快速简洁的JavaScript库 设计的总之能是 写更少的代码 做更多的事情
j 就是JavaScript 、Qurey 查询 意思就是查询js 把js 中的dom操作做了封装 我们可以快速的查询使用里面的功能 jQurey 封装了JavaScript常用的功能代码 优化了dom 的操作事件处理 动画设计和Ajax 交互
1 等着页面 DOM 加载完毕再去执行js代码
$(document).ready(function(){
$('div').hide();
})
2.等着页面 DOM 加载完毕再去执行js代码
$(function(){
$('div').hide()
})
jQuery对象和DOM对象之间是可以相互转换的 因为js原生比jQuery更大 原生的一些属性和方法jQuery没有给我们封装 要使用这些方法和属性 需要吧jQuery对象转换为DOM对象才能使用
原生JS 获取元素的方法很多很杂 且兼容情况不一致 因此jQuery给我们做了一些封装 获取元素统一标准
<body>
<div class="nav"> nav /div </div>
<div> divvvvvv</div>
<ul>
<li> ul li </li>
<li> ul li </li>
<li> ul li</li>
</ul>
<ol>
<li>ol /li </li>
<li>ol /li </li>
<li>ol /li </li>
</ol>
<script>
$(function(){
console.log($('.div'));
console.log($("ul li"));
})
</script>
</body>
遍历内部DOM元素(伪数组形式储存)的过程叫做 隐式迭代 简单理解 在匹配到所有元素进行循环遍历 执行相应的方法 而不用我们在进行循环 简化我们的操作 方便调用
<body>
<div> surprise</div>
<div> surprise</div>
<div> surprise</div>
<div> surprise</div>
<ul>
<li>surprise 1</li>
<li>surprise 1</li>
<li>surprise 1</li>
<li>surprise 1</li>
</ul>
<script>
$("div").css("background","pink")
$("ul li ").css("color",'red')
</script>
</body>
<body>
<ul>
<li>ul li 1</li>
<li>ul li 2</li>
<li>ul li 3</li>
<li>ul li 4</li>
<li>ul li 5</li>
</ul>
<ol>
<li>ol li 1</li>
<li>ol li 2</li>
<li>ol li 3</li>
<li>ol li 4</li>
<li>ol li 5</li>
</ol>
<script>
$(function(){
$('ul li:first').css('color','red')
$('ul li:eq(3)').css('color','red')
$('ol li:odd').css('color','red')
$('ol li:even').css('color','blue')
})
</script>
</body>
<body>
<div class="yey">
yeye
<div class="bab">
babb
<div class="erz">
erz
</div>
</div>
</div>
<div class="nav">
<p> P </p>
<div>
<p> sp</p>
</div>
</div>
<script>
// 以下都是方法 都带括号
$(function(){
// 父级 parent() 返回的是最近一级的父级
console.log( $('.erz').parent());
// 子级 children() 亲儿子级 类型子代选择器 ui> li
// $('.nav').children('p').css('color','red')
// 可以选择 所以的 子级 find() 类似于后代选择器
$('.nav').find('p').css('color','blue')
})
</script>
</body>
<script src="jQuery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 40px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 40px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#"> 李白</a>
<ul>
<li> <a href="#">刺客</a></li>
<li> <a href="#">打野</a></li>
<li> <a href="#">突进</a></li>
</ul>
</li>
<script>
$(function(){
// 鼠标经过
$('.nav>li').mousemove(function(){
// $(this) jQuery 当前元素 this不加引号
// show()显示元素 hide()隐藏元素
$(this).children('ul').show();
})
// 鼠标离开
$('.nav>li').mouseout(function(){
// $(this) jQuery 当前元素 this不加引号
// show()显示元素 hide()隐藏元素
$(this).children('ul').hide();
})
})
</script>
</body>
想要多选一 的效果 排他思想:当前元素设置样式 兄弟元素清楚样式
<script src="jQuery.min.js"></script>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
$(function(){
$("button").click(function(){
$(this).css("background","skyblue");
$(this).siblings("button").css("background","")
})
})
</script>
</body>
链式编程是为了节省代码量 使代码看起来更优雅
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
$(function(){
// $("button").click(function(){
// $(this).css("background","skyblue");
// $(this).siblings("button").css("background","")
// })
// 链式编程
$(this).css("background","skyblue").sibling("button").css("background","")
})
jQuery 可以使用css方法 修改简单元素样式 也可以操作类 修改多个样式
<style>
div{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<script>
$(function(){
//只写属性名 则返回的是属性值
console.log( $("div").css("width"));
// 写属性名 和属性值 逗号隔开属性必须加引号
// $("div").css("width","200px")
// $("div").css("width",200) // 属性值可以不用加引号
// 参数可以是对象形式 方便设置多组样式 属性值和属性名 冒号隔开 非数字必须加引号
$("div").css({
width:200,
height:200,
backgroundColor:"skyblue" // backgroundColor 使用驼峰命名法
})
})
</script>
</body>
作用等同于以前的的classList 可以操作类样式 注意里面的参数不要会加点
<style>
div{
width: 150px;
height: 150px;
background-color: orange;
margin: 100px auto;
transition: all 0.8s;
}
.nav{
width: 200px;
height: 200px;
background-color: skyblue;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div ></div>
<script>
$(function(){
// 1 添加类 addClass(“ ”)
// $("div").click(function(){
// $(this).addClass("nav")
// })
// 2 删除类 removeClass(" ")
// $("div").click(function(){
// $(this).removeClass("nav")
// })
// 3 切换类 toggleClass(" ")
$("div").click(function(){
$(this).toggleClass("nav")
})
})
</script>
</body>
jquery给我们封装了了很多动画效果
显示语法规范
show([speed,[easing],[fn]]
显示参数
隐藏语法规范
hide([speed,[easing],[fn]])
显示参数
<script src="jQuery.min.js"></script>
<style>
div{
width: 150px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button>显示</button>
<button> 隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function(){
// button 索引号为1 的 点击事件
$("button").eq(1).click(function(){
$("div").hide(1000,function(){//点击后 div 1000毫秒(1秒)隐藏 在执行回调函数
alert(123)
} )
})
$("button").eq(0).click(function(){
$("div").show(1000,function(){//点击后 div 1000毫秒(1秒)显示 在执行回调函数
alert(456)
} )
})
$("button").eq(2).click(function(){
$("div").toggle(1000,function(){//点击后 div 1000毫秒(1秒)切换 在执行回调函数
alert(789)
} )
})
})
</script>
语法规范
slideDown([speed],[easing],[fn])
显示参数
<style>
div{
display: none;
width: 150px;
height: 300px;
background-color: skyblue
}
</style>
</head>
<body>
<button>下拉滑动</button>
<button> 上拉滑动</button>
<button>切换滑动 </button>
<div></div>
<script>
$(function(){
$("button").eq(0).click(function(){
$("div").slideDown(1000) // 下滑动
})
$("button").eq(1).click(function(){
$("div").slideUp(1000) // 上拉滑动
})
$("button").eq(2).click(function(){
$("div").slideToggle(1000) // 切换
})
})
</script>
事件切换
hover([over,]out)
$(".nav > li").hover(function(){ // 鼠标经过和离开
$(this).children("ul").slideToggle()
})
})
动画或效果一旦触发 就会执行 如果多次快速触发 就会造成多个动画或效果排队执行
stop() 用于停止动画 一定要加到动画前面 相当于停止上一次动画
$(".nav > li").hover(function(){ // 鼠标经过
$(this).children("ul").stop().slideToggle() // stop 停止动画 必须加到动画前面
})
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。 语法:
fadeTo([[speed],opacity,[easing],[fn]])
<script src="jQuery.min.js"></script>
<style>
div{
display: none;
width: 200px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<button>淡入</button>
<button>淡出 </button>
<button>切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function(){
$("button").eq(0).click(function(){
$("div").fadeIn(1000) // 淡入
})
$("button").eq(1).click(function(){
$("div").fadeOut(1000) //淡出
})
$("button").eq(2).click(function(){
$("div").fadeToggle(1000) // 切换
})
$("button").eq(0).click(function(){
// 时间和透明度必须要写
$("div").fadeTo(1000,0.5) // 修改透明度
})
})
</script>
淡入淡出 练习 高亮显示
<body>
<div class="nav">
<ul>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/04.jpg" alt=""></li>
<li><img src="images/05.jpg" alt=""></li>
<li><img src="images/06.jpg" alt=""></li>
</ul>
</div>
<script>
$(function(){
// 第一个function 是鼠标经过 第二个是鼠标离开
$(".nav li").hover(function(){
//siblings 查找兄弟节点不包括自己本身 除自己外其他兄弟节点透明降的到50%
$(this).siblings().stop().fadeTo(200,0.5) //停止动画排队
},function(){
$(this).siblings().stop().fadeTo(200,1);
})
})
</script>
</body>
语法
animate(params,[speed],[easing],[fn])
参数
案例 自定义+淡入淡出
<script src="jQuery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.nav{
margin: 100px auto;
width: 800px;
height: 69px;
background: url(images/bg.png)no-repeat;
padding-left: 10px;
}
img{
display: block;
}
.nav ul {
overflow: hidden;
}
.nav ul li{
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.nav .current{
width: 224px;
}
.small{
display: block;
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
}
.big{
width: 224px;
display: none;
}
.current .big{
display: block;
}
.current .small {
display: none;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="current">
<a href="#">
<img src="images/c.png" alt="" class="big">
<img src="images/c1.jpg" alt="" class="small">
</a>
</li>
</ul>
</div>
<script>
$(function() {
// 鼠标经过某个小li 有两步操作:
$(".nav li").mouseenter(function() {
// 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
</body>
元素固有属性就是元素本身自带的属性 比如< a > 元素里面的 href < input > 里边的 type 获取语法:
prop(“属性”)
设置属性语法:
prop(“属性”,“属性值”)
<body>
<a href="http://www.baidu.com" title="固定属性">固定属性 prop</a>
<script>
$(function(){
// 获取固定属性 prop( )
console.log($("a").prop("href"));
$("a").prop("title","设置固定属性")
用户自己给元素添加的属性 称为自定义属性 比如 给div 添加index= “1” 获取属性语法:
attr (“属性”) // 类似于原生getAttribute()
设置属性语法:
attr(“属性”,“属性值”) // 类似原生setAttribute()
<div index = "1">自定义属性 attr</div>
// 自定义属性 attr()
console.log($("div").attr("index")); // 获取自定义属性
$("div").attr("index","8"); // 修改自定义属性
})
data() 方法可以在指定的元素上 存取数据 并不会修改DOM元素结构 一旦页面刷新 之前存放的数据将被移除 附加数据语法:
data(“name”,“value“) // 被选元素添加数据
获取数据语法:
data(“name”) // 向被选元素 获取数据
同时还可以读取HTML5 自定义属性 date-index 得到的是数字型
<span data-index="2"> 123</span>
// 数据缓存 data()
$("span").data("uname","red")
console.log($("span").data("uname"));
console.log($("span").data("index")); // 获取H5自定义属性 得到的是数字型
})
:checked 查找被选中的表单元素 全选按钮 案例
<body>
<div>
<input type="checkbox" name="" id="" class="all"> 全选
</div>
<div>
<input type="checkbox" name="" id="" class="add"> 单选
</div>
<div>
<input type="checkbox" name="" id="" class="add"> 单选
</div>
<div>
<input type="checkbox" name="" id="" class="add"> 单选
</div>
<div>
<input type="checkbox" name="" id="" class="add"> 单选
</div>
<div>
<input type="checkbox" name="" id="" class="all"> 全选
</div>
<script>
$(function(){
$(".all").change(function(){
// console.log($(this).prop("checked")); 打印检查 得到 true false
// 核心思路:当全选按钮发生改变时 拿到全选按钮的状态 false 或true 判定是否选中
// 然后把拿到的状态赋值给单选按钮 同时让另外一个全选按钮一起发生变化
$(".add,.all").prop("checked",$(this).prop("checked") )
});
$(".add").change(function(){
// 被选中的单选复选框的个数
// console.log($(".add:checked").length); 打印查看
// $(".add").length) 是所有单选复选框的个数
// :checked返回几个复选框被选中
if($(".add:checked").length === $(".add").length){
$(".all").prop("checked",true)
}else{
$(".all").prop("checked",false)
}
})
})
</script>
</body>
普通元素内容html() 相当于原生inner HTML 语法:
html() // 获取元素内容 包含标签
html( "内容") // 设置元素内容
普通元素内容text() 语法:
text() // 获取元素内容 不包含标签
text( "内容") // 设置元素内容
获取设置表单值 val() 语法:
val() // 获取表单值
val( "内容") // 设置修改表单值
<body>
<div>
<span>132</span>
</div>
<input type="text" value="请输入">
<script>
$(function(){
// 获取设置元素内容 HTML()
console.log($("div").html()); // <span>132</span> 带有标签
$("div").html("修改内容")
// 获取设置元素文本内容 text()
console.log($("div").text()); // 只有内容 没有标签
$("div").text("text修改内容")
// 获取设置表单值 val()
console.log($("input").val()); // 获取表单值
$("input").val("请输入内容"); // 修改表单值
})
</script>
</body>
主要遍历、创建、添加、删除元素操作
jQuery 隐式迭代是对同一类元素做来了同样的操作 如果想对同一类元素做不同的操作 就需要遍历 语法1:
$("div") .each(function( index,domEle ){xxx;}
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){
var num = 0
var arr = ['red','blue','pink' ]
// each() 方法遍历 元素
$("div").each(function( i,domEle){
// 回调函数的第一个参数一定索引号 可以是自己指定索引号名称
console.log(i);
// 回调函数的第二个参数 一定是dom元素对象
console.log(domEle);
$(domEle).css('backgroundColor',arr[i])
num += ($(domEle).text())-0 // -0 隐式转换为数字型 也可以用parseInt
})
console.log(num);
})
</script>
</body>
语法2:
$.each(对象,function( index,element){xxx}
$.each(arr,function( i,exe){ // 遍历数组
console.log(i);
console.log(exe);
})
$.each({ // 遍历对象
name:'Angle',
age:'22'
},function( i,exe){
console.log(i); //输出的是属性名
console.log(exe); // 输出的是属性值
})
位置主要有三个:offset()、position()、scrollTop()/scrollLeft()
offset ()设置或获取元素偏移 offset()方法 设置或返回被选元素相对于文档的偏移坐标 跟父级没有关系 有两个属性 left 、top ,offset().top 用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离 可以设置元素偏移量offset({top:10;left:10})
position()获取带有定位父级位置 (偏移)如果父级没有定位则以文档为准 这个方法只能获取不能设置偏移
scrollTop()/scrollLeft() 设置被卷去的头部和左侧
事件处理 on()绑定事件 on()方法在匹配元素上绑定一个或多个事件处理函数 语法:
element.on(events,[selector],fn )
events一个或多个用空格分割的事件类型 selector 元素的 子元素选择器 fn 回调函数 绑定在元素身上的侦听函数
.nav{
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<script>
$(function(){
// 事件处理 on()
// $("div").on({
// mouseover:function(){
// $(this).css("background", "red")
// },
// mouseout:function(){
// $(this).css("background", "pink")
// },
// click:function(){
// $(this).css("background", "green")
// }
// })
$("div").on("mouseover mouseout",function(){ // 添加类名 用空格隔开
$(this).toggleClass("nav")
})
})
</script>
</body>
在选择元素上移除一个或多个事件的事件处理函数。
off(events,[selector],[fn])
events:一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", “keydown.myPlugin”, 或者 “.myPlugin”.
selector:一个最初传递到.on()事件处理程序附加的选择器。
fn:事件处理程序函数以前附加事件上,或特殊值false.
$(“p”).off() 解绑P元素所有事件处理程序
$(“p”).off( “click” ) 解绑P元素上的点击事件
$(“ul”).off(“click”,“li”); 解绑事件委托
如果事件 只想触发一次 可以使用one()来绑定事件
one(type,[data],fn) 绑定一个一次性的事件处理函数。
type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data:将要传递给事件处理函数的数据映射
fn:每当事件触发时执行的函数。
element.click() 第一种简写形式 element.trigger(“type” ) 第二种自动触发模式 type:一个事件对象或者要触发的事件类型
如果想要把某个对象拷贝(合并)给另外一个对象使用 可以用$.extend()方法 语法: $.extend([deep], target, object1, [objectN])
jQuery之家:http://www.htmleaf.com/ jQuery库:https://www.jq22.com/ 使用步骤 : 下载插件 引入相关文件 jQuery文件和插件文件 复制HTML css js 调用插件
https://jquery.cuishifeng.cn/index.html
以上是脚本宝典为你收集整理的jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站全部内容,希望文章能够帮你解决jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。