本文共 1467 字，大约阅读时间需要 4 分钟。
最近接触了一个有点历史的项目JQ，虽然挺烦的，但也学到了JQ的一些简单语法，为了记录一下学习到的内容，整理如下：
JQ操作DOM
JQuery通过使用$.action()方法来操作DOM，但在使用之前，请确保文档已经加载完成。
美元符号定义JQ的起始点，一般用于简化 jQuery 代码书写。
选择符（selector）用于查询HTML元素，JQuery支持CSS选择器。
JQ的action即为操作dom的具体命令。
文档加载后激活函数
为了避免在文档未完全加载前运行JQuery代码，需要在文档ready事件中激活函数。
JQ元素选择器
JQuery使用CSS选择器来选取HTML元素，可以使用以下方式：
- $("p") - 选取所有段落元素
- $("p.intro") - 选取所有class="intro"的段落元素
- $("p#demo") - 选取所有id="demo"的段落元素
- $("div") - 选取所有div元素
- $("[href]") - 选取所有带有href属性的元素
- $("[href='.jpg']") - 选取所有带有以“.jpg”结尾的href值的元素
JQ属性选择器
JQuery支持丰富的属性选择器，具体包括：
- $("[href]") - 查询带有href属性的元素
- $("[href='#']") - 查询带有href值等于“#”的元素
- $("[href!='#']") - 查询带有href值不等于“#”的元素
- $("[href$='.jpg']") - 查询href值以“.jpg”结尾的元素
JQ事件处理
JQuery可以通过绑定函数来处理各种事件：
- 点击按钮事件：$("button").click(function(){});
- 隐藏所有p元素：$("p").hide();
- 定义函数初始化：$.ready(function(){}
- 点击事件：$.click(function())
- 双击事件：$.dblclick(function())
- 聚焦事件：$.focus(function())
- 鼠标悬浮事件：$.mouseover(function())
JQ显示和隐藏
JQuery 提供了 hide()、show()、toggle() 等方法来控制元素的显示状态：
- $("p").hide();:$("p").show();
- $("button").click(function(){ $("p").toggle();});
JQuery淡入与淡出
JQuery 提供了 fadeIn()、fadeOut()、fadeTo() 等方法来实现淡入淡出效果：
- $("p").fadeIn(speed,callback);
- $("p").fadeOut(speed,callback);
- $("p").fadeTo(speed,opacity,callback);
JQuery滑动
- 向下滑动：$("p").slideDown(speed,callback);
- 向上滑动：$("p").slideUp(speed,callback);
- 切换滑动方向：$("p").slideToggle(speed,callback);
Jquery动画
JQuery 动画方法可以用来实现自定义动画效果：
- $("button").click(function(){ $("div").animate({left:'250px'})});
- 多个属性动画：$("button").click(function(){'
转载地址：http://xkgxz.baihongyu.com/