Jquery获取元素进行操作
一：基础方式(四种)
表示：jQuery 的hide() 函数，隐藏当前的 HTML 元素。
表示：jQuery 的hide() 函数，隐藏id="test" 的元素。
表示：jQuery 的hide() 函数，隐藏所有 <p> 元素。
表示：jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
二：混合方式
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$(this) | 当前 HTML 元素 |
$("p") | 所有 <p> 元素 |
$("p.intro") | 所有 class="intro" 的 <p> 元素 |
$(".intro") | 所有 class="intro" 的元素 |
$("#intro") | id="intro" 的元素 |
$("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
$("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
$("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
蓝色文字属于xPath的表达式
Jquery的元素选取的原理
$(selector).action();--à $(选取元素).动作 注意$是美元符号
注意：所有jquery的全写在document ready的函数中：
$(document).ready(function(){
Jquery的具体操作写在这个俩面
});
这个函数的意思是，在文档加载完成之后进行的操作，所以当文档加载完成前进行操作会出现问题
例如1隐藏未显示的元素2操作未加载完的图片
Jquery的事件
虽然$是jquery的简介方式，及常用方式但是我们也可以通过 noConflict()进行替代
<script>
$.noConflict();
jQuery(document).ready(function () {
jQuery("button").click(function () {
jQuery("p").text("jQuery 仍在运行！");
});
});
</script>
$(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
Jquery常用事件
隐藏和显示
jQuery hide() 隐藏效果jQueryshow()显示效果 可以在括号填写东西进行显示和隐藏速度的控制
jQuery fadeIn() 用于淡入已隐藏的元素-显示。jQueryfadeOut() 方法用于淡出可见元素-隐藏
淡入和淡出
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与1 之间）。
上下滑动
jQuery slideDown() 方法用于向下滑动元素。
jQuery slideUp() 方法用于向上滑动元素。
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
元素动画效果
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
JQquery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
Jquery动画的组合
jquery允许多个动画同时进行通过 . 链接；
举例$("#p1").css("color","red").slideUp(2000).slideDown(2000);
Jquery的HTML元素的操作
文本内容进行操作
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值---返回keyvalue中的value值
html()和text()返回的文本内容的区别
html()返回的内容是元素中所有可以显示的内容样式的文本
text()返回的内容是元素中的文本在样式起作用后的文本内容
元素的文本属性进行操作
文本属性的方法attr()
$("#test").attr("href","http://www.baidu.com");
例如input的placeholder也可以当作一种属性；
属性就是不是在style里面的内容，功能属性
元素文本处理前后插入内容
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
前两个方法主要是插入文本内容的一种做法，而后两种方法可以插入相应的元素；例如p标签
删除元素/内容（而非样式）
remove() - 删除被选元素（及其子元素）例如<div><p>测试<p></div>这个方法删除div
empty() - 从被选元素中删除子元素 例如<div><p>测试<p></div>这个方法删除p标签
删除p标签中的class为test的元素：$("p").remove(".test");
文本样式的修改(css和class)
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
EG:
$("h1,h2,p").addClass("blue");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
