jQuery
2016-04-03 22:57
411 查看
（1）.Jquery理念：写得少，做得多（write less ，do more）
(2).<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
// $(document).ready(function(){}) 这个函数ready相当于 window.onload事件
// $(document).ready函数可以被简化为 $
// $(document).ready(function(){
// alert("这里是我的jQuery函数");
// });
$(function(){
// alert("这里是简化后的jQuery初始化代码");
});
</script>
</head>
<body>
<input type="text" id="mytxt"/>
<script>
// 标准的js里面dom模式去获取页面上的元素， 它得到的标准的HTML下的元素标记
var mytxt = document.getElementById("mytxt");
// alert(mytxt);
// 使用jQuery来获取页面元素， 它得到的是通过jquery封装后的jQuery对象
// 转换后的jQuery对象才能正常的去调用jquery函数库中函数和属性
var jqtxt = $("#mytxt");
alert(jqtxt);
</script>
</body>
（3）.<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
}
</style>
<script src="js/jquery-1.12.2.min.js"></script>
</head>
<body>
<div id="div1" class="cldiv">
<ul>
<li>张三</li><li>李斯</li><li>王五</li><li>马六</li><li>黄芪</li>
</ul>
</div>
<div class="cldiv">
我也是div
<div class="cldiv">我是内部的div元素</div>
</div>
<script>
var div1 = document.getElementById("div1");
// alert(div1.innerHTML);
// alert(div1.innerText);
// 在jquery当中，借用了Css中选择器的做法，从页面中找寻对应的元素，因此称为jQuery选择器
var jqdiv = $("#div1");
// alert(jqdiv.html()); //jquery中的html函数相当于js中innerHTML属性
// alert(jqdiv.text()) //jquery中的text函数相当于js中innerTEXT属性，但是它只获取文字内容，没有显示效果
//那么标准js的dom元素是否可以和jQuery的对象进行转换
//标准的jQuery可以简写为$
var jqdiv1 = $(div1); //可以使用简单的jQuery()或者$()函数将已经获取的dom元素直接转换为jQuery对象
// alert(div1.html()); //标准的dom元素无法直接调用jquery函数
// alert(jqdiv1.html());
// alert(",,长度size函数："+jqdiv.size() +",,长度length属性："+jqdiv.length);
var mydiv = $(".cldiv");
// alert(mydiv.length);
// alert(mydiv.get(2).innerHTML); //使用get（n）函数来把对应的jQuery对象转换为dom元素
// alert(mydiv.html()); // 如果得到多个同名的jQuery对象，当调用函数时，默认是调用其中的第一个jQuery对象
// alert(mydiv.eq(2).html());
alert(mydiv.eq(-1).html());
//eq函数可以获取到jQuery对象中的第N个jQuery对象，其值从0开始正着数；
// 但是可以用负数来表示倒数，但是倒数是从-1开始
</script>
</body>
</html>
(4).特点
一、动态特效 二、AJAX 三、通过插件来扩展
四、
方便的工具 - 例如浏览器版本判断 五、渐进增强 六、链式调用
七、多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了
对Internet Explorer6,7,8的支持）
(5).选择器
jQuery 使用sizzle引擎，支持css选取，Xpath选取等方式。
$("p") 选取全部 <p> 元素。
$("p.intro") 选取所有包含class为"intro"的 <p> 元素。
$("#demo") 选取 id为"demo" 的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("[href^='/imgaes/']") 选取所有 href 值以 /imgaes/" 开头的元素。
更多详细信息请参见jQuery API的Selectors部分。
(6).jQuery还支持如下方法:
.blur() 表单元素失去焦点。
.change() 表单元素的值发生变化
.click() 鼠标单击
.dblclick() 鼠标双击
.focus() 表单元素获得焦点
.focusin() 子元素获得焦点
.focusout() 子元素失去焦点
.hover() 同时为mouseenter和mouseleave事件指定处理函数
.keydown() 按下键盘（长时间按键，只返回一个事件）
.keypress() 按下键盘（长时间按键，将返回多个事件）
.keyup() 松开键盘
.load() 元素加载完毕
.mousedown() 按下鼠标
.mouseenter() 鼠标进入（进入子元素不触发）
.mouseleave() 鼠标离开（离开子元素不触发）
.mousemove() 鼠标在元素内部移动
.mouseout() 鼠标离开（离开子元素也触发）
.mouseover() 鼠标进入（进入子元素也触发）
.mouseup() 松开鼠标
.ready() DOM加载完成
.resize() 浏览器窗口的大小发生改变
.scroll() 滚动条的位置发生变化
.select() 用户选中文本框中的内容
.submit() 用户递交表单
.toggle() 根据鼠标点击的次数，依次运行多个函数
.unload() .当用户离开页面时，会发生 unload 事件。
(7).动态特效
较快速度的淡入
$("#msg").show("fast");
较慢速度的淡出
$("#msg").hide("slow");
淡入淡出
$("#msg").fadeIn();
$("#msg").fadeOut();
带参数的淡入淡出
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
滑动
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
以上代码实现一个id为Msg的jQuery对象的渐入和淡出。函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，
单位为ms。更多详细信息请参见jQuery API的Effects部分。
(8).jQuery1.x和jQuery2.x的区别：
1、jQuery 2.x不支持IE6、IE7和IE8，而jQuery 1.x支持；
2、相对于jQuery 1.x，jQuery 2.x内核发生了改变
(2).<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
// $(document).ready(function(){}) 这个函数ready相当于 window.onload事件
// $(document).ready函数可以被简化为 $
// $(document).ready(function(){
// alert("这里是我的jQuery函数");
// });
$(function(){
// alert("这里是简化后的jQuery初始化代码");
});
</script>
</head>
<body>
<input type="text" id="mytxt"/>
<script>
// 标准的js里面dom模式去获取页面上的元素， 它得到的标准的HTML下的元素标记
var mytxt = document.getElementById("mytxt");
// alert(mytxt);
// 使用jQuery来获取页面元素， 它得到的是通过jquery封装后的jQuery对象
// 转换后的jQuery对象才能正常的去调用jquery函数库中函数和属性
var jqtxt = $("#mytxt");
alert(jqtxt);
</script>
</body>
（3）.<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
}
</style>
<script src="js/jquery-1.12.2.min.js"></script>
</head>
<body>
<div id="div1" class="cldiv">
<ul>
<li>张三</li><li>李斯</li><li>王五</li><li>马六</li><li>黄芪</li>
</ul>
</div>
<div class="cldiv">
我也是div
<div class="cldiv">我是内部的div元素</div>
</div>
<script>
var div1 = document.getElementById("div1");
// alert(div1.innerHTML);
// alert(div1.innerText);
// 在jquery当中，借用了Css中选择器的做法，从页面中找寻对应的元素，因此称为jQuery选择器
var jqdiv = $("#div1");
// alert(jqdiv.html()); //jquery中的html函数相当于js中innerHTML属性
// alert(jqdiv.text()) //jquery中的text函数相当于js中innerTEXT属性，但是它只获取文字内容，没有显示效果
//那么标准js的dom元素是否可以和jQuery的对象进行转换
//标准的jQuery可以简写为$
var jqdiv1 = $(div1); //可以使用简单的jQuery()或者$()函数将已经获取的dom元素直接转换为jQuery对象
// alert(div1.html()); //标准的dom元素无法直接调用jquery函数
// alert(jqdiv1.html());
// alert(",,长度size函数："+jqdiv.size() +",,长度length属性："+jqdiv.length);
var mydiv = $(".cldiv");
// alert(mydiv.length);
// alert(mydiv.get(2).innerHTML); //使用get（n）函数来把对应的jQuery对象转换为dom元素
// alert(mydiv.html()); // 如果得到多个同名的jQuery对象，当调用函数时，默认是调用其中的第一个jQuery对象
// alert(mydiv.eq(2).html());
alert(mydiv.eq(-1).html());
//eq函数可以获取到jQuery对象中的第N个jQuery对象，其值从0开始正着数；
// 但是可以用负数来表示倒数，但是倒数是从-1开始
</script>
</body>
</html>
(4).特点
一、动态特效 二、AJAX 三、通过插件来扩展
四、
方便的工具 - 例如浏览器版本判断 五、渐进增强 六、链式调用
七、多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了
对Internet Explorer6,7,8的支持）
(5).选择器
jQuery 使用sizzle引擎，支持css选取，Xpath选取等方式。
$("p") 选取全部 <p> 元素。
$("p.intro") 选取所有包含class为"intro"的 <p> 元素。
$("#demo") 选取 id为"demo" 的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("[href^='/imgaes/']") 选取所有 href 值以 /imgaes/" 开头的元素。
更多详细信息请参见jQuery API的Selectors部分。
(6).jQuery还支持如下方法:
.blur() 表单元素失去焦点。
.change() 表单元素的值发生变化
.click() 鼠标单击
.dblclick() 鼠标双击
.focus() 表单元素获得焦点
.focusin() 子元素获得焦点
.focusout() 子元素失去焦点
.hover() 同时为mouseenter和mouseleave事件指定处理函数
.keydown() 按下键盘（长时间按键，只返回一个事件）
.keypress() 按下键盘（长时间按键，将返回多个事件）
.keyup() 松开键盘
.load() 元素加载完毕
.mousedown() 按下鼠标
.mouseenter() 鼠标进入（进入子元素不触发）
.mouseleave() 鼠标离开（离开子元素不触发）
.mousemove() 鼠标在元素内部移动
.mouseout() 鼠标离开（离开子元素也触发）
.mouseover() 鼠标进入（进入子元素也触发）
.mouseup() 松开鼠标
.ready() DOM加载完成
.resize() 浏览器窗口的大小发生改变
.scroll() 滚动条的位置发生变化
.select() 用户选中文本框中的内容
.submit() 用户递交表单
.toggle() 根据鼠标点击的次数，依次运行多个函数
.unload() .当用户离开页面时，会发生 unload 事件。
(7).动态特效
较快速度的淡入
$("#msg").show("fast");
较慢速度的淡出
$("#msg").hide("slow");
淡入淡出
$("#msg").fadeIn();
$("#msg").fadeOut();
带参数的淡入淡出
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
滑动
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
以上代码实现一个id为Msg的jQuery对象的渐入和淡出。函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，
单位为ms。更多详细信息请参见jQuery API的Effects部分。
(8).jQuery1.x和jQuery2.x的区别：
1、jQuery 2.x不支持IE6、IE7和IE8，而jQuery 1.x支持；
2、相对于jQuery 1.x，jQuery 2.x内核发生了改变
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- svg使用小计（二）
- 谈谈jQuery和js里有关位置和宽高的方法
- jquery attr()和prop()方法的使用
- html基础开发-- Jquery框架方法使用（攻略二）
- Html Css Javascripe jQuery 速成经验 support by Mr song 第五周作业
- JavaScript之jQuery-10 T-Query(T-Query、基本选择器、T-Query对象、操作方法、创建元素、事件绑定)
- jquery实现ajax实例
- JavaScript之jQuery-9 jQuery 开发插件(添加新全局函数、添加jQuery对象方法、添加新简写方法、方法参数)
- jQuery代码优化：事件委托篇
- jquery-ajax-php(内容点赞并进行cookie限制实现)
- JavaScript之jQuery-8 jQuery 使用插件(zTree树插件、jQuery UI插件)
- jQuery实现图片轮播且鼠标可控制显示，使用animate函数
- JavaScript之jQuery-7 jQuery 使用插件(使用插件、日历插件、表单验证插件)
- jQuery实现图片轮播特性。使用animate函数
- jquery 点击元素以外任意地方隐藏该元素的方法
- JQuery日期插件datepicker的使用
- 国内jQuery CDN
- Jquery 选择器 详解
- jQuery源码浅析
- JavaScript之jQuery-6 jQuery 类数组的操作