脚本宝典收集整理的这篇文章主要介绍了jQuery_01，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
一、jquery框架简介
概述：jQuery是一个快速、简洁的JavaScript框架，是继PRototyPE之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“wrITe Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、opera 9.0+等。
1.1、引包
概述:目前而言：我们接触过文件类型css、html、js。JS这门脚本语言需要嵌套在静态页面中才可以执行的，
独立JS文件【书写JS语法】不能单独运行，需要在静态页面中引入。
1.2、JQ体验
<script>
$("li").css("color","red");
</script>
二、jQuery的基本使用
jQuery函数库支持我们曾经学习过的全部选择器：*【通配选择器】、标签选择器、类选择器、id选择器等。
<script type="text/javascript">
//jQuery函数库:对外暴露的是$函数,$函数是整个框架中最为重要的一个函数，可以获取节点
//JQ函数库：支持我们曾经学习过全部选择器，用来获取响应节点
//标签选择器
// $("li").css("color",'red');
// 类选择器
// $('.cur').css('background','cyan');
// id选择器
$('#study').css('fontSize',40);
</script>
l JQ函数库对外暴露一个核心函数$,可以获取节点树上节点
l JQ支持链式语法，连续打点【永远是$函数开头的】
l JQ支持我们曾经学习过的全部全部选择器
l CSS函数，也是JQ函数库提供的，用来设置匹配节点的行内样式
l JQ对象（类数组）才可以使用JQ里面方法
2.1、jQuery独有选择器
概述：jQuery函数库支持我们曾经学习过全部选择器【通配符选择器、标签选择器、id选择器、class选择器】。
但是，jQuery框架给我们提供一些CSS拓展选择器【JQ框架独有的：只能在JQ中使用】
2.1.1、:First || :last
概述:这两者选择器，是JQ框架中独有的。他们两个选择器主要的作用是，可以获取匹配节点的第一个元素、最后一个元素。
语法格式:
$(selector:first)
<script type="text/javascript">
//selecotr：first:获取匹配节点第一个元素
//selector:last:获取匹配节点最后一个元素
$("li:first").css("color",'red');
$("ul li:last").css('color','pink');
</script>
2.1.2、:odd||:even
概述:这两者也是JQ独有选择器，可以获取匹配元素奇数索引值、偶数索引值节点。
语法格式：
$(selector:odd)
//代码如下
//selector:odd 奇数选择器
//selector:even 偶数选择器
$("li:odd").css('color','cyan');
$('li:even').css('color','orange');
2.1.3、:gt(index)||:lt(index)
概述:他们两者也是JQ独有选择器，主要的作用是可以获取匹配节点大于某一个索引值、小于某一个索引值节点。
语法格式:
$(selector:gt(index))
//代码如下：
//:gt(index):大于选择器
$("ul li:gt(3)").css('color','white');
//:lt(index):小于选择器
$('ul li:lt(3)').css('color','cyan');
2.1.4、:eq(index)
概述：它也是JQ独有选择器，主要的作用是获取匹配节点，某一个准确索引值节点。
//语法格式：
$(selector:eq(index))
//代码如下：
$("ul li:eq(3)").css('color','pink');
2.1.5、表格制作
<script>
$("tr:odd").css("background","red");
$("tr:even").css("background","skyblue");
</script>
2.2、CSS方法
概述：css这个方法，它是JQ框架给我们提供的，它主要的作用是可以设置匹配节点行内样式。
$("div").css("color","red");
l 第一个参数：匹配节点添加样式名字。
l 第二个参数：匹配节点添加样式的属性值。
l 注意：当前这种写法不常用，因为只能给元素设置一个样式。
一般用JSON来给CSS写样式
<script type="text/javascript">
//CSS方法是JQ框架提供，给匹配节点添加行内样式
//JQ支持链式语法:从左到右
$("div").css({
color:"red",
background:"cyan",
fontSize:30,
opacity:.3
}); </script>
l 以后再给匹配节点添加样式，传递JSON数据格式即可【可以设置多个样式】
l 而且属性值可以省略px单位，中间带有横杠的样式可以变为驼峰写法。
2.3.attr方法
<script>
//attr方法是JQ框架提供的可以获取或者设置节点的属性
//获取节点属性
console.LOG($("input:eq(0)").attr("type"));
//动态设置节点属性值
$("input:eq(0)").attr("type","text");
//获取节点属性值
console.log($("img").attr("src"));
//修改节点属性值
$("img").attr("src","../images/2.png");
</script>
2.4、操作节点文本的方法
概述：原生DOM操作的时候，我们可以操作节点文本。分为两种情况：
操作非表单元素文本-----使用的是innerHTML属性
操作表单元素文本----- 使用的是value属性
/*********************************************/
JQ框架也给我们提供了一些操作文本的方法：分为两种情况
操作非表单元素文本----使用html方法
操作表单元素文本-----使用val方法
<script>
//JQ提供的val方法可以用来操作表单元素的文本
//获取表单元素的文本
console.log($("input").val());
//修改表单元素的文本
$("input").val("chongchongchong");
//JQ提供的html方法可以用来操作非表单元素的文本
//获取非表单元素的文本
console.log($("p").html());
//修改非表单元素的文本
$("p").html("45645600");
</script>
2.5、特效函数
2.5.1slideDown || slideUp
概述：slideDown与slideUp这两个方法是有JQ提供的，他们两者主要的作用是可以让匹配元素进行，
向下滑动、下上卷起操作。
语法格式：$("selector").slideUp(time,callback);
第一个参数：表示每一次动画的时间，单位：ms 可有可无
第二个参数：一个回调函数，表示动画执行完毕后立即调用一次 可有可无
<script>
//绑定第一个单击事件
$(".lBTn").click(function(){
//当点击左边按钮的时候实行向上卷起操作
$("div").slideUp(2000,function(){
//当执行完卷起操作后立即执行一次function
console.log("wozhixingle");
})
});
//绑定第二个单击事件
$(".rbtn").click(function(){
//当点击右边按钮的时候实行向下展开操作
$("div").slideDown(2000,function(){
//当执行完展开操作后立即执行一次function
console.log("wozhixingle1");
})
});
</script>
2.5.2、fadein || fadeOut
概述：他们两者也是JQ函数库提供方法。他们也可以给匹配元素添加特效。就是可以给匹配元素添加淡出、淡入效果。
语法格式：
$(selector).fadeIn(time,callback)
l 第一个参数：动画每一次时间【单位：毫秒】
l 第二个参数：回调函数，当动画结束以后立即执行一次。
<script>
//给第一个按钮绑定单击事件
$(".lbtn").click(function(){
//给div设置淡出效果
$("div").fadeOut(2000,function(){
//淡出效果完成后立即执行一次
console.log("wozhixingle");
})
});
//给第二个按钮绑定单击事件
$(".rbtn").click(function(){
//给div设置淡入效果
$("div").fadeIn(2000,function(){
//淡入效果完成后立即执行一次
console.log("wozhixingle1");
})
});
</script>
同样的，fadeIn与fadeOut的参数都是可有可无的
总结：
1.slideDown与slideUp的动态的改变表现的高度
2.fadeIn与fadeOut是动态的修改标签的opacity。
2.6、绑定事件
概述：在我们学习DOM的时候，经常通过DOM方法获取节点。经常给节点绑定事件。
当时的语法画风：
div.onclick = function(){}
注意：JQ函数库也给我们提供了给匹配节点绑定事件方法。在DOM学习的那些事件，在JQ当中也有，
但是需要注意的时候：JQ把他们封装成了函数，给匹配节点绑定事件。
$(selector).eventType(callBack)
l 注意1：JQ里面绑定事件函数都没有on关键字
l 注意2：回调函数【就是当年所谓事件处理函数】
<script>
//绑定鼠标单击事件
$("div:eq(0)").click(function(){
$("div:eq(0)").css({
"background":"red",
});
});
//绑定鼠标移上事件
$("div:eq(1)").mouseenter(function(){
$("div:eq(1)").css({
"background":"cyan",
});
});
//绑定鼠标移走事件
$("div:eq(1)").mouseleave(function(){
$("div:eq(1)").css({
"background":"yellow",
});
});
</script>
2.7淡入淡出轮播图
<script type="text/javascript">
//声明一个信号量
VAR idx = 0;
//左侧按钮
$(".lbtn").click(function(){
//当前显示图片淡出
$("li:eq("+idx+")").fadeOut(1000,function(){
idx++;
//约束信号量范围
idx = idx > 4 ? 0 :idx;
//下一张图片淡入
$('li:eq('+idx+')').fadeIn(1000);
});
});
//右侧按钮
$('.rbtn').click(function(){
$('li:eq('+idx+')').fadeOut(1000,function(){
idx--;
idx = idx < 0 ? 4 :idx;
$('li:eq('+idx+')').fadeIn(1000);
})
});
</script>
以上是脚本宝典为你收集整理的jQuery_01全部内容，希望文章能够帮你解决jQuery_01所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。