标签：代码风格 ack title 压缩版 选择 版本 包括 jquery类库 get
一、jQuery简介
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装。
二、jQuery的优势
1、强大的选择器。
2、出色的DOM封装。
3、可靠的事件处理机制。
4、出色的浏览器兼容性。
5、使用隐式迭代简化编程。
6、丰富的插件支持。
7、体积小，压缩后只有100KB左右。
三、下载和使用jQuery
1、下载
进入jQuery官网：http://jquery.com下载
2、jQuery库文件
jQuery库分开发版和发布版
| 名称 |
大小 |
说明 |
| jquery-1.版本号.js(开发版) |
约268kb |
完整无压缩版本，主要用于测试、学习和开发。 |
| jquery-1.版本号.min.js(发布版) |
约91KB |
经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目。 |
3、搭建jQuery使用环境
3.1 下载jQuery类库。
3.2 在页面中引入jQuery
四、jQuery语法结构
语法：$(selector).action();
说明：
工厂函数$()：将DOM对象转化为jQuery对象。
选择器 selector：获取需要操作的DOM元素。
方法action()：jQuery中提供的方法，包括绑定事件处理的方法。
示例：
$("#current").addClass("current"); // id选择
$("input").addClass("current"); // 标签选择
$(".current").addClass("other"); // class类名选择
五、jQuery代码风格
1、$(selector).action();
$等同于"jQuery"
$(document).ready()等同于jQuery(document).ready()
2、方法举例
| 语法 |
说明 |
| css("属性","属性值") |
为元素设置CSS样式的值 |
| addClass("类样式名") |
为元素添加类样式 |
| html("html代码") |
为元素设置innerHTML的值 |
操作连缀书写：
$("h2").css("background-color","#CCFFFF").next().css("display","block");
六、$(document).ready()
$(document).ready()与window.onload类似，但也有区别：
| |
window.onload |
$(document).ready() |
| 执行时机 |
必须等待网页中所有的内容加载完毕后（包括图片、视频等）才能执行 |
网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、视频等）并没有加载完 |
| 编写次数 |
同一页面不能同时编写多个 |
同一页面能同时编写多个 |
| 简化写法 |
无 |
$(function(){
//执行代码
});
|
七、jQuery对象和DOM对象
1、DOM对象：直接使用JavaScript获取的节点对象
var objDOM=document.getElementById("title");
var objHTML=objDOM.innerHTML;
2、jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法：
$("#title").html()
等同于
document.getElementById("title").innerHTML;
提示：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用。
3、jQuery对象转DOM对象
jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
示例：
var $txtName=$(".txtName"); //jQuery对象
var txtName=$txtName[0]; //DOM对象
通过get(index)方法得到相应的DOM对象
示例：
var $txtName=$(".txtName"); //jQuery对象
var txtName=$txtName.get(0); //DOM对象
DOCTYPE html>
html>
head>
meta name="viewport" content="width=device-width" />
title>jQuery对象转化成DOM对象title>
style type="text/css">
p{
display: none;;
}
.show{
display: block;
}
style>
script type="text/javascript" src="jquery-3.2.1.js">script>
script type="text/javascript">
$(document).ready(function(){
var $txtname=$(".txtName"); //获取jQuery对象
var txtname=$txtname[0]; //获取DOM对象
console.log($txtname);
console.log(txtname);
});
script>
head>
body >
p id="title">
a href="hello world">a>
p>
div class="txtName">
111111111
div>
body>
html>
4、DOM对象转jQuery对象
使用$()函数进行转换：$(DOM对象)
示例：
var txtName=document.getElementById("txtName"); //DOM对象
var $txtName=$(txtName); //jQuery对象
注意：
1、jQuery对象命名一般约定以$开头。
2、常使用$(this)来获取触发该事件的当前jQuery对象。
jQuery:（一）jQuery简介
标签：代码风格 ack title 压缩版 选择 版本 包括 jquery类库 get
原文地址：http://www.cnblogs.com/dotnet261010/p/7306584.html