jQuery 《基础整合》 jQuery插件jQueryAPI查询网站
Posted MDR_0820
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 《基础整合》 jQuery插件jQueryAPI查询网站相关的知识，希望对你有一定的参考价值。
jQurey 的概念
jqurey 是一个快速简洁的javascript库 设计的总之能是 写更少的代码 做更多的事情
j 就是JavaScript 、Qurey 查询 意思就是查询js 把js 中的dom操作做了封装 我们可以快速的查询使用里面的功能
jQurey 封装了JavaScript常用的功能代码 优化了dom 的操作事件处理 动画设计和Ajax 交互
jQurey 的入口函数
1 等着页面 DOM 加载完毕再去执行js代码
$(document).ready(function(){
$('div').hide();
})
2.等着页面 DOM 加载完毕再去执行js代码
$(function(){
$('div').hide()
})
jquery对象和DOM对象
jQuery对象和DOM对象之间是可以相互转换的
因为js原生比jQuery更大 原生的一些属性和方法jQuery没有给我们封装 要使用这些方法和属性 需要吧jQuery对象转换为DOM对象才能使用
- DOM 对象转换为jQuery对象
- $('DOM’对象）
- jQuery 对象转换为DOM
- $(‘div’)[index] index是索引号
- $(‘div’).get（index）index是索引号
jQuery 常用API
jQuery 基础选择器
原生JS 获取元素的方法很多很杂 且兼容情况不一致 因此jQuery给我们做了一些封装 获取元素统一标准
- $( " 选择器"） 里面选择器直接写css选择器即可 但是要加引号
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>
jQuery 筛选方法
<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>
jquery 案例 下拉菜单 html+css+jquery
<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>
jQuery 排他思想
想要多选一 的效果
排他思想：当前元素设置样式 兄弟元素清楚样式
<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方法
jQuery 可以使用css方法 修改简单元素样式 也可以操作类 修改多个样式
- 只写属性名 则返回的是属性值 $(this).css( " 属性名")
- 参数 是 属性名 属性值 逗号分隔 是设置一组样式 属性必须加引号 如果是数字 可以不用加引号和单位 … $( this).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 可以操作类样式 注意里面的参数不要会加点
- 1 添加类
$("div).addClass("类名”） - 2 移除类
$('div).removeClass("类名”） - 3 切换类
$('div).toggleClass("类名”）
<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 效果
jquery给我们封装了了很多动画效果
- 显示和隐藏
show（）显示
hide（） 隐藏
toggle（）切换 - 滑动
slideDown（）
slideUp()
slideToggle() - 淡入淡出
fadeIn（）
fadeOut()
fadeToggle()
fadeTo() - 自定义动画
animate（）
显示和隐藏效果
显示语法规范
show([speed,[easing],[fn]]
显示参数
- 参数可以省略 无动画效果 直接显示
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
隐藏语法规范
hide([speed,[easing],[fn]])
显示参数
- 参数可以省略 无动画效果 直接显示
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- 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])
显示参数
- 参数可以省略 无动画效果 直接显示
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
<style>
div{
display: none;
width: 150px;
height: 300px;
background-color: skyblue
}
</style>
</head>
<body>
<button>下拉滑动</button>
<button> 上拉滑动</button>
<button>切换滑动 </button>
<以上是关于jQuery 《基础整合》 jQuery插件jQueryAPI查询网站的主要内容，如果未能解决你的问题，请参考以下文章
jqGrid 插件 (Tony Tomov, Oleg Kiriljuk) - 兼容 jQuery, jQuery UI