JQuery是一个快速、小巧且功能丰富的JavaScript库。它使得HTML文档的遍历和操作、事件处理、动画和Ajax等操作更加简单，它适用于众多的浏览器。它的口号是“Write less, do more”，即“编写更少的代码，做更多的事情”。
以下是一些学习JQuery时你可能想要记下的关键点和概念：
-
选择器（Selectors）
JQuery使用CSS选择器来选取DOM元素。例如，$('#id')选择ID为id的元素，$('.class')选择所有class类的元素，而$('element')选择所有指定的HTML元素。 -
DOM遍历（DOM Traversal）
可以使用.parent(),.children(),.find(),.siblings(),.next(),.prev()等方法来遍历DOM。 -
DOM操作（DOM Manipulation）
JQuery提供了方法来动态添加或修改HTML元素和属性，例如.html(),.text(),.attr(),.css(),.addClass(),.removeClass(),.toggleclass(),.append(),.prepend(),.remove(),.empty()等。 -
事件处理（Event Handling）
用于绑定事件处理程序到事件，如点击、悬停、键盘输入等，使用.on(),.click(),.hover(),.keydown(),.keyup()等方法。 -
效果和动画（Effects and Animations）
JQuery提供了一些简单的方法来添加动画效果，如.show(),.hide(),.toggle(),.fadeIn(),.fadeOut(),.slideUp(),.slideDown(),.animate()等。 -
Ajax（Asynchronous JavaScript and XML）
JQuery简化了Ajax的使用，可以使用.ajax(),.get(),.post(),.load()等方法来执行异步HTTP（Ajax）请求。 -
链式（Chaining）
JQuery支持方法链式调用，即可以在一个单一的语句中运行多个JQuery方法（在同一个元素上）。 -
实用工具函数（Utility Functions）
如$.each(),$.map(),$.grep(),$.extend(),$.ajaxSetup()等，提供了一个功能强大的工具集。 -
JQuery UI
一个基于JQuery的UI库，提供了一套交互式的界面和小部哦豁,我回答出错了耶~ 你重新试一试呗~
编写当当下拉列表
问题一：动画过程中注意避免动画特效的积累
解决：:not(:animated)--> $("#menu-ul:not(:animated)").slideDown(500).addClass("menu-ul-css");
问题二：两级菜单之间有边框(间隙)会影响拉伸效果
解决：将mouseover和mouseout改为mouseenter和mouseleave；
$("a").mouseenter(function(){
$("#menu-ul:not(:animated)").slideDown(500).addClass("menu-ul-css");
});
$("#menu").mouseleave(function(){
$("#menu-ul:not(:animated)").slideUp(200).removeClass("menu-ul-css");
});
使用jQuery变换网页效果
问题一：网页布局 盒子模型（定位浮动）（清除左右浮动clear: both）
DIV+CSS 普遍使用 缺点：对分辨率依赖
问题二：保留文字的原来样式
<pre></pre>
问题三：空链接
<a href="javascript:void(0);">查看全部</a>
<a href="#">查看全部</a> ->锚链接 默认返回顶部
制作轮播切换效果
问题一：css3中 nth-child 和 nth-of-type 的区别？
理解：ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素，
且比较这个元素是否为ele，若不是，则选择失败
但是如果在nth-child和 nth-of-type前不指定标签呢？
理解：如上可见，在他们之前不指定标签类型，：nth-child(2) 选中依旧是第二个元素，无论它是什么标签。
而 :nth-type-of(2) 选中了两个元素，分别是父级.demo中的第二个p标签和第二个li标签，
由此可见，不指定标签类型时，:nth-type-of(2)会选中所有类型标签的第二个。
问题二：:nth-child和:eq()的区别
理解：:eq()为第一个匹配到的父类中匹配子元素，:nth-child是为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！
HTML 代码:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:nth-child(2)")；
$("ul li:eq(2)")；
结果:
[ <li>Karl</li>, <li>Tane</li> ]
[ <li>Brandon</li> ]
问题三：dl dt dd 是什么？
理解：dl就是定义一个列表，dt说明白了就是这个列表的标题，dd就是内容,能缩进，和UL，OL性质差不多
实现Tab切换的效果
问题一：lang（口袋）属性的使用
解决：给每个Tab元素添加一个lang属性，用来方便切换效果的实现
$("#nav>li").click(function(){
var txt=$(this).attr("lang");
if(txt=="dayTask"){
$(this).css("backgroundColor","#26a6e3");
$("#nav li:last").css("backgroundColor","#ff9400");
$("#growTask").hide();
$("#dayTask").show();
}else if(txt=="growTask"){
$(this).css("backgroundColor","#26a6e3");
$("#nav li:first").css("backgroundColor","#ff9400");
$("#growTask").show();
$("#dayTask").hide();
}
});
制作QQ简易聊天
问题一：整数的处理
解决：
// 1.只保留整数部分（丢弃小数部分）
parseInt(5.1234);// 5
// 2.向下取整（<= 该数值的最大整数）和parseInt()一样
Math.floor(5.1234);// 5
// 3.向上取整（有小数，整数就+1）
Math.ceil(5.1234);
问题二：追加和插入的使用
内部插入：
$("p").append("<b>Hello</b>");向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
$("p").prepend("<b>Hello</b>");向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
外部插入：
$("p").after("<b>Hello</b>");在每个匹配的元素之后插入内容。
$("p").before("<b>Hello</b>");在每个匹配的元素之前插入内容。
$("p").insertAfter("#foo");把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
问题三：滚动条的生成、消失和改变位置
解决： 生存、消失：如在div元素中设置CSS样式，指定高度后添加overflow:auto;
改变位置：获得当前滚动条的位置：$("div").scrollTop();修改位置：$("div").scrollTop(num);
问题四：文字换行
设置CSS样式：word-wrap: break-word;
问题五：获取系统日期时间
解决： js中没有格式化工厂，只能一个个的获取和拼接格式
var myDate = new Date();
var year=myDate.getFullYear(); //获取当前年
var month=myDate.getMonth()+1; //获取当前月
var date=myDate.getDate(); //获取当前日
var h=myDate.getHours(); //获取当前小时数(0-23)
var m=myDate.getMinutes(); //获取当前分钟数(0-59)
var s=myDate.getSeconds();
var time=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
问题六：关于JavaScript中数组说明
1.静态声明
var arr = ["张三","李四","王五"]
arr[0];
2.动态声明
var arr = new Array();
arr[0] = "张三1";
arr[1] = "张三2";
arr[2] = "张三3";
3.特定用法
var arr = new Array();
//key->value
arr["s1001"]="张三1";
arr["s1002"]="张三2";
arr["s1003"]="张三3";
仿京东左侧菜单
问题一：效果，show(),hide();slideDown(),slideUp();fadeIn(),fadeOut()三种动画效果的区别
speed:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (可选):在动画完成时执行的函数，每个元素执行一次。
opacity:要调整到的不透明度值(0到1之间的数字).
对角线：
show(speed, [callback]):如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
hide(speed, [callback]):如果选择的元素是隐藏的，这个方法将不会改变任何东西。
以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。
toggle(speed, [callback]):如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
toggle(switch):如果switch设为true，则调用show()方法来显示匹配的元素，如果switch设为false则调用hide()来隐藏元素。
滑动:
slideDown(speed, [callback])：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideUp(speed, [callback])：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
slideToggle(speed, [callback])：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
淡入淡出：
fadeIn(speed, [callback]):通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
fadeOut(speed, [callback]):通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
fadeTo(speed, opacity, [callback]):把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
使用HTML5验证博客园注册页面
问题一：数据校验，正则表达式
6个基本符号
^ 从头匹配
$ 结尾匹配
| 或者（多选一）
() 一种情况
[] (一个字符)选择范围
{} 出现次数
扩展
\d [0-9]
\D 非数字
\w [0-9,A-Z,a-z,_]
\W 非法字符
+ {1,} 至少一次
? {0,1} 至多一次
* {0,} 可有可无
常用
手机号码 1[3-9]\d{9}
QQ号码 [1-9]\d{5,10}
电子邮箱 \w+@\w+.\w+
个人网站 http[s]?://\w+.\w+
中文汉字 [\u4e00-\u9fa5]
0-100 (\d|[1-9]\d|100)$
应用 IP地址验证（0.0.0.0-255.255.255.255）：
var info= $("#info").val();
var regInfo=/^((\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]).){4}$/
if(regInfo.test(info+'.')){
alert("验证通过");
}else{
alert("验证失败");
}
问题二：逻辑代码和属性验证结合实现数据校验
属性绑定
<input id=" uname " type="text" required pattern="^[a-z,A-Z]\w{3,15}$"/>
<input type="submit" value="提交"/>
提交事件 -> 注意:点击事件，非提交事件
$("input[type='submit']").click(function () {
});
表单对象 -> 注意:JS对象 并非 JQ对象
var uname = document.getElementById("uname");
条件控制
uname.validity.valueMissing 是否为空
uname.validity.patternMismatch 正则表达式是否匹配
表单控制
uname.setCustomValidity(""); //空信息 放行
uname.setCustomValidity("用户名不能为空"); //信息 阻止
616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
