JQuery的学习
Posted 烈焰杀神小军
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery的学习相关的知识，希望对你有一定的参考价值。
1、:content是内容选择器，查找的时候即使有标签，也能查到其表签内部的文本。
例如：
$（function(){
$("li:content(l列表)").css("color","red")
})
//------------------
<li>列表1</li>
<li>列表2</li>
<li><span>列表3</span></li>
列表3在span标签内也可以被查询到
2、:has（选择器）
选择的时候，有元素在内的话，可以元素和元素内部的东西一起被匹配出来
3、:empty选择器，可以选择不包含元素或者文本的元素
4、:parent选择器,将含有子元素或者文本的元素选择出来
5、
:hidden匹配所有不可见元素或者是type为hidden的元素
:visible匹配所有可见元素
这俩个的话都是可见选择器，
例如：
$("div:hidden").css("color","red")//display：none
//---------------------------------
<div style="width: 100px; height: 100px; background-color: yellow;display: none;">
11
</div>
<div style="width: 100px; height: 100px; background-color: burlywood;visibility: hidden;">
22
</div>
其中display:none也可以把元素不可见
6、attr和prop属性
其中attr返回的类型是string类型，而prop返回的类型是boolean类型，所以prop选中复选框为true，没选中为false。
共同返回的属性值的函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值。
attr第一个参数是获取，第二个为设置，可以替换第一个获取的值。
例如：
$(".div").attr("data","2")
var ch1=$(":checked:eq(3)").attr("checked")
console.log(typeof ch1)
if(ch1==="checkde"){
}
var ch2=$(":checked:eq(3)").prop("checked")
console.log(typeof ch2)
if(ch1===true){
}
$(":checkbox:eq(3)").prop("checked",false)
//----------------------------------------------------------------
<div class="div" data= "1" vale="000">这是一个<span>div</span></div>
<input type="checkbox" checked value="足球" />
<input type="checkbox" checked=""/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="1212"/>
<input type="checkbox" checked="true"/>
7、基本效果
show（显示隐藏的匹配元素）
hide（隐藏显示的元素）
toggle（用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。）
$(".show").click(function() {
$("div").show()
})
$(".hide").click(function() {
$("div").hide()
})
$(".toggle").click(function() {
$("div").toggle()
})
--------------------------------------------------
<button class="show">show</button>
<button class="hide">hide</button>
<button class="toggle">toggle</button>
<div style="width: 100px; height: 100px;background-color: darkcyan;"></div>
基本效果主要改变的是display:none
8、滑动效果
slideDown（
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
）
slideUp（
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
）
slideToggle（
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
）
$(".slideDown").click(function() {
$("div").slideDown(3000)
})
$(".slideUp").click(function() {
$("div").slideUp(3000)
})
$(".slideToggle").click(function() {
$("div").slideToggle()
})
--------------------------------------------------------
<button class="slideDown">slideDown</button>
<button class="slideUp">slideUp</button>
<button class="slideToggle">slideToggle</button>
<div style="width: 100px; height: 100px;background-color: darkcyan;"></div>
注意：3000其为展示效果为3秒
其效果只调整元素的高height
9、淡入淡出效果
fadeTo（
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
）
//时间 透明度
$("div").fadeTo(1000, 0.5)
注意：第一个参数为时间1秒，第二个为效果减少0.5
fadeIn（
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
）
fadeOut（
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
）
fadeToggle（
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
）
$(".fadeIn").click(function() {
$("div").fadeIn()
})
$(".fadeOut").click(function() {
$("div").fadeOut()
})
$(".fadeToggle").click(function() {
$("div").fadeToggle()
})
-------------------------------------------------------------
<button class="fadeIn">fadeIn</button>
<button class="fadeOut">fadeOut</button>
<button class="fadeToggle">fadeToggle</button>
<div style="width: 100px; height: 100px;background-color: darkcyan;"></div>
效果改变的为opacity
10、自定义的效果
stop（
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
）
例如：
/ 开始动画
$("#go").click(function() {
$("div").animate({
width: \'+200px\'
}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function() {
$("div").stop();
});
-----------------------------------------------------
<button id="go">Go</button>
<button id="stop">STOP!</button>
<div style="width: 50px; height: 50px; background-color: red;"></div>
delay（
设置一个延时来推迟执行队列中之后的项目
）
例如：
$("div").animate({
width: \'+200px\'
}, 5000);
//delay,我将她放在这里，效果是把一个div向上滑动并消失，但其可以改变她消失的速度
$(\'div\').slideUp(8000).delay(8000).fadeIn(8000);
------------------------------------------------------------------
<button id="go">Go</button>
<button id="stop">STOP!</button>
<div style="width: 50px; height: 50px; background-color: red;"></div>
注意：这是一个时间设置，只能改变效果的快慢，并不能改变其方式和效果
11、可以改变自定义的长宽高
$("#go").click(function() {
$("div").animate({
width: "+=50px",
height: "+=50px",
}, 1000);
});
----------------------------------
<button id="go"> Run</button>
<div style="width: 50px; height: 50px; background-color: red;"></div>
注意：红色部位是时间，在1秒的时间内将这个div的长，宽增加50px
12、finish
停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（所有动画的目标值）。所有排队的动画将被删除。
如果第一个参数提供，该字符串表示的队列中的动画将被停止。
.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
例如：
$("#complete").click(function() {
$("div").finish();
});
可对其进行修改
从零开始学习jQuery(转)
本系列文章导航
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
从零开始学习jQuery (七) jQuery动画-让页面动起来!
从零开始学习jQuery (八) 插播:jQuery实施方案
从零开始学习jQuery (十) jQueryUI常用功能实战
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
一.摘要
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.
本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.
转载请注明子秋出品!博客园首发!
二.前言
首先道个歉! "从零开始学习ASP.NET MVC"系列文章在即将介绍Filter时就没有更新了, 原因就是最近我一直在研究和学习jQuery.看到本系列的名称和文章标题, 看过我的MVC系列文章的人会感到很熟悉. 不久要给公司的人做培训, 所以特意制作了本教程.
在写作的同时我参考了网上jQuery的系列教程文章, 在博客园和Google上并没有找到让我满意的系列教程. 我喜欢将知识系统的,深入浅出的讲解.不喜欢写那种"学习笔记"式的文章. 同时本系列将很快全部写完(有工作压力就是有动力), 随后如果时间允许我会继续更新MVC系列文章.再一次对等待MVC文章的朋友们说声抱歉!
另外本系列文章的大部分知识点来源于图灵出版社的"jQuery实战"一书. 推荐大家购买此书, 是jQuery书籍中的经典之作.
下面让我们开始jQuery之旅.
三.什么是jQuery
jQuery是一套Javascript脚本库. 在我的博客中可以找到"Javascript轻量级脚本库"系列文章. Javascript脚本库类似于.NET的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用.
注意jQuery是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System程序集"是类库,而"ASP.NET MVC"是框架. jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事.
脚本库能够帮助我们完成编码逻辑,实现业务功能. 使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮. 同时网络上丰富的jQuery插件也让我们的工作变成了"有了jQuery,天天喝茶水"--因为我们已经站在巨人的肩膀上了.
创建一个ASP.NET MVC项目时, 会发现已经自动引入了jQuery类库. jQuery几乎是微软的御用脚本库了!完美的集成度和智能感知的支持,让.NET和jQuery天衣无缝结合在一起!所以用.NET就要选用jQuery而非Dojo,ExtJS等.
jQuery有如下特点:
1.提供了强大的功能函数
使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.
2.解决浏览器兼容性问题
javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦, 常常一个页面在IE7,Firefox下运行正常, 在IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有了jQuery我们将从这个噩梦中醒来, 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的, 从前要根据event获取事件触发者, 在ie下是event.srcElements 而ff等标准浏览器下下是event.target. jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象.
3.实现丰富的UI
jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我自己写了一个可以兼容ie和ff的渐变动画, 使用大量javascript代码实现, 费心费力不说, 写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还要再次费心费力. 如今使用jQuery就可以帮助我们快速完成此类应用.
4.纠正错误的脚本知识
这一条是我提出的, 原因就是大部分开发人员对于javascript存在错误的认识. 比如在页面中编写加载时即执行的操作DOM的语句, 在HTML元素或者document对象上直接添加"onclick"属性, 不知道onclick其实是一个匿名函数等等. 拥有这些错误脚本知识的技术人员也能完成所有的开发工作, 但是这样的程序是不健壮的. 比如"在页面中编写加载时即执行的操作DOM的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操作"的错误.jQuery提供了很多简便的方法帮助我们解决这些问题, 一旦使用jQuery你就将纠正这些错误的知识--因为我们都是用标准的正确的jQuery脚本编写方法!
5.太多了! 等待我们一一去发现.
四.Hello World jQuery
按照惯例, 我们来编写jQuery的Hello World程序, 来迈出使用jQuery的第一步
进入目录学习吧。。。。。。。.
以上是关于JQuery的学习的主要内容，如果未能解决你的问题，请参考以下文章