jQuery简介
jQuery是一款优秀的javaScript库（框架），该框架凭借简洁的语法和跨平台的兼容性，极大的简化了开发人员对HTML文档，DOM，事件以及Ajax的操作。
jQuery的主旨:
write less, do more.写的更少, 干的更多
以更少的代码,实现更多的功能.
特点
- 轻量级；2.免费开源；3. 完善的文档；4.完善的Ajax功能；5. 不会污染顶级变量；6. 丰富的插件支持；7. 强大的选择器功能；8. 出色的DIM操作封装；9. 出色的浏览器兼容性；10. 可靠的时间处理机制；11. 隐式迭代和链式编程操作。
基本功能
- 访问和操作DOM元素
使用jQuery库，可以很方便地获取和修改页面中的某元素，无论是删除，移动，复制某元素，jQuery 都提供了一整套方便，快捷的方法，既减少了代码的编写，又大大提高了用户对页面的体验度。
方法示例：append() prepend() remove() empty() html() text()等
- 控制页面的css样式
引入jQuery框架后，开发人员可以方便快捷的来操作页面中的css样式，而且jQuery已经帮我们完成了令人头疼的浏览器兼容性处理。
方法示例：css() addClass() toggleClass() hasClass() removeClass()等
- 完善的Ajax网络请求
Ajax是在原生页面中异步发送和读取服务器数据所采用的组合技术，使用Ajax实现网络通信提高了用户体验和程序性能，而jQuery框架中提供了专门处理网络请求的Ajax组件，我们可以方便的使用jQuery中提供的方法来实现Ajax网络请求。
方法示例：ajax() get() post()等
- 页面标签事件处理
jQuery 框架中对标签的处理，让页面的表现层与功能开发分离，开发者只需要更多的关注业务逻辑方面的实现即可。
方法示例：on() off() click() mouseenter() hover() 等
- 整套的动画特效实现
jQuery 框架中提供了一整套的动画方法，可以满足开发中常见的动画效果实现，而且使用简单方便。
方法示例：show() hide() slideDown() slideUp() Animate() 等
- 好用的工具方法和强大的插件支持
jQuery 框架中提供了插件机制，利用插件机制程序员可以方便的对原有的框架和功能进行扩展，另外框架本身也提供了表单、UI等大量的插件,这些插件的使用,极大丰富了页的展示效果。除了插件之外，jQuery框架中还为我们提供了很多好用的工具方法，我们可以通过调用这些工具方法来解决开发中一些常见的需求。
方法示例：extend() each() map()等
jQuery框架代码风格
- 美元符号起始：
在jQuery框架中，不管页面元素的选择，内置的功能函数，都使用美元符号来起始地，而这个美元符号其实就是jQuery框架中最重要且独有的对象：jQuery对象。 - 链式编程操作：
jQuery框架中为我们提供了链式编程操作，链式编程特点中，几乎每个jQuery方法执行完毕后都会把当前正在操作的对象作为返回值返回，如果我们需要对某个标签执行多个操作，那么使用链式编程可以使得代码更短更简洁。
附：jQuery框架知识体系
jQuery框架知识体系
jQuery框架和JavaScript加载模式对比
- 执行时机不同：
window.onload方法：等页面加载（所有资源[html/css/js/img]）完毕执行函数中的代码
$(document).ready()方法：等DOM加载完毕就执行函数中的代码； - 执行的次数
window.onload方法：如果添加N次，只会执行一次，后面的会将前面的覆盖；
$(document).ready()方法：如果添加N次就会执行N次； - 简写方式：
window.onload 没有简写方式；
(document).ready()存在简写方式： 1. 把参数省略（document）().ready(function () {}）
2. 把ready省略 $(function () {})
jQuery框架解决冲突
冲突问题：
在实际开发中，我们的项目中可能会用到多个第三方框架，如果这些框架在设计的时候没有命名空间的约束，那么库与库之间发生冲突在所难免。在jQuery框架中有两个对象可以供我们使用： | jQuery，如果其它框架中定义了符号，那么这种情况下就会出现冲突。
解决方法：
- 把jQuery使用之前凡是用到$符号的地方都替换为其他标识符；
- 使用noConflictf方法，可以在使用之前把$符号替换成其它标识符，相当于给jQuery对象换了一个其他的名字。
var QQ = $.noConflict();
var $ = "123";
QQ(function () {
console.log("234");
})
jQuery对象和DOM对象的相互转换
DOM对象：每个HTML页面都是一个 DOM对象(Document Object Model，文本对象模型)，通过传统的JavaScript方法访问页面中的元素，就是访问 DOM 对象。
jQuery对象:在 jQuery框架中，通过本身自带的方法获取页面元素的对象，称为 jQuery 对象 。
DOM标签对象 -> jQuery实例对象 ：$(DOM标签对象)
jQuery实例对象 -> DOM标签对象 ： jQuery对象.get(index) | jQuery对象[index]
<script>
//通过DOM提供的api获取页面中所有class为box的标签
var oDiv = document.getElementsByClassName("box")[0];
//通过jQuery提供的方法获取页面中所有class为box的标签
var ojQueryObj = $("div");
//DOM -> jQuery
console.log($(oDiv).html());
//jQuery -> DOM
console.log(ojQueryObj.get(0));
console.log(ojQueryObj[0]);
</script>
jQuery框架的CSS方法
jQuery框架提供了css方法，我们通过调用该方法传递对应的参数，可以方便的来批量设置标签的CSS样式。
- 使用原生的方式来设置标签的样式
<body>
<div>我是div标签</div>
<button id="btnID">按钮</button>
<script>
window.onload = function () {
var oBtn = document.getElementById("btnID");
oBtn.onclick = function () {
var oDiv = document.getElementsByTagName("div")[0];
oDiv.style.height = "50px";
oDiv.style.width = "200px";
oDiv.style.background = "red";
}
}
</script>
- 使用jQuery中的css方法来设置标签的样式
<body>
<div>我是div标签</div>
<button id="btnID">按钮</button>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
$("#btnID").click(function () {
$("div").css("height","50px").css("width","200px").css("background","red");
})
})
</script>
</body>
css方法的使用
- css("样式属性","值")：$("selector").css(name,value);
- 链式编程：$("selector").css(name1,value).css(name2,value)...;
- 传递对象：$("selector").css( { name1 : value , name2 : value})
<script>
$(function () {
$("#btnID").click(function () {
//01 CSS方法的第一种使用方式
//$("div").css("height","50px");
//$("div").css("width","200px");
//$("div").css("background","red");
//02 CSS方法的第二种使用方式:链式编程
$("div").css("height","50px").css("width","200px").css("background","red");
//03 CSS方法的第三种使用方式:传递样式键值对的对象作为参数
$("div").css({
"height":"100px",
"width":"200px",
"background":"red"
})
})
})
</script>
jQuery框架操作Class
addClass : 为选中的所有标签批量的添加Class ;
hasClass：检查选定的标签中是否存在指定的Class ;
removeClass：把选定标签中指定的Class删除 ;
toggleClass： 切换Class;
- addClass：为选中的所有标签批量的添加Class，语法:
- $("selector")addClass("class1");
- $("selector")addClass("class1 class2");
- $("selector")addClass("class1").addClass("class2");
- hasClass：检查选定的标签中是否存在指定的Class,只要选中的所有标签中有一个标签存在该Class，那么就把返回true,如果选中的所有标签中都没有找到该class ，那么就返回false。语法:
$("selector")hasClass("class1");
- removeClass:把所有选定标签中指定的Class删除，遍历jQuery实例对象中所有的标签，如果当前标签中存在该指定的class，那么就删除，如果不存在，则不作处理。语法:
- $("selector")removeClass("class1");
- $("selector")removeClass("class1 class2");
- $("selector")removeClass("class1").removeClass("class2");
- toggleClass：切换所有选中标签的Class，如果当前标签中存在指定的Class，那么就删除，如果不存在，那么就添加。语法:
- $("selector")toggleClass("class1");
- $("selector")toggleClass("class1 class2");
- $("selector")toggleClass("class1").toggleClass("class2");
jQuery框架操作位置的方法介绍
<script src="js/jquery-3.2.1.js"></script>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.box2{
width: 50px;
height: 50px;
background-color: yellow;
left: 20px;
top: 20px;
position: absolute;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<script>
$(function () {
//获取box2距离窗口顶部/左部的距离
var top = $('.box2').offset().top;
var left = $('.box2').offset().left;
console.log(top);
console.log(left);
//获取box2这个div 距离父标签顶部/左部的距离
console.log($('.box2').position().top);
console.log($('.box2').position().left);
//宽度和高度
//如果没有传递参数，那么表示获取指定标签的宽度或者高度
//如果传递了参数，那么表示设置标签的宽度或者高度
console.log($('.box2').width(300));
console.log($('.box2').height(200));
})
</script>
网友评论