1.通过CDN(内容分发网络)引用jQuery
Baidu CDN:
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
2.jQuery 语法
$(selector).action()
$ 定义jQuery;selector 选择符,查找html元素;action 对元素的操作
3.$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
4.jQuery代码块
$(function(){
// jQuery 代码...
});
5.引用外部jQuery文件
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
6.常见DOM事件
鼠标事件 键盘事件 表单事件
click keypress submit
dbclick keydown change
mouseenter keyup focus
mouseleave blur
7.输入框输入内容获取焦点时变色
<script>
$(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
- hide() 和 show() 方法来隐藏和显示 HTML 元素
语法:$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
9.toggle() 方法来切换 hide() 和 show() 方法
$("button").click(function(){
$("p").toggle();
});
10..fadeTo("slow",0.15) 使颜色变淡
11.淡入淡出效果
fadeIn() fadeOut() fadeToggle fadeTo()
12.元素滑动效果
slideDown() slideUp() slideToggle()
13.jQuery 动画 - animate() 方法
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长
可选的 callback 参数是动画完成后所执行的函数名称。
14.默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
15.stop()方法停止动画,滑动
16.Callback 函数在当前动画 100% 完成之后执行。
17.Chaining方法链接:Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
18.DOM = Document Object Model（文档对象模型）
允许程序和脚本动态访问和更新文档的内容、结构以及样式。
获得内容 - text()、html() 以及 val()
text() - 返回所选元素的文本内容
html() - 返回所选元素的内容（包括 HTML 标记）
val() - 返回表单字段的值
attr() 方法用于获取属性值。
设置内容 - text("")、html("") 以及 val("")
设置所选元素的值
attr() 方法用于设置属性值: $("#test").attr("href","http://www.runoob.com/jquery");
jQuery - 添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
jQuery - 删除元素
remove() - 删除被选元素及其子元素
empty() - 从被选元素中删除子元素
jQuery - 获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
jQuery插件:参考网址:http://www.runoob.com/jquery/jquery-plugin-validate.html
19.jQuery Validate 插件为表单提供了强大的验证功能
20.jQuery Accordion 插件用于创建折叠菜单
21.jQuery Autocomplete 插件根据用户输入值进行搜索和过滤
22.jQuery Password Validation（密码验证）
23.jQuery Tooltip 插件取代了原生的工具提示框
24.jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单
网友评论