jquery学习基础使用

Jquery获取元素进行操作 一：基础方式(四种) $(this).hide() 表示：jQuery 的hide() 函数，隐藏当前的 HTML 元素。 $("#test").hide() 表示：jQuery 的hide() 函数，隐藏 id="test" 的元素。 $("p").hide() 表示：jQuery 的hide() 函数，隐藏所有

元素。 $(".test").hide() 表示：jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。 二：混合方式 $("p") 选取

元素。 $("p.intro") 选取所有 class="intro" 的

元素。 $("p#demo") 选取所有 id="demo" 的

元素。 $(this) 当前 HTML 元素 $("p") 所有

元素 $("p.intro") 所有 class="intro" 的

元素 $(".intro") 所有 class="intro" 的元素 $("#intro") id="intro" 的元素 $("ul li:first") 每个

的第一个

元素 $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 $("div#intro .head") id="intro" 的元素中的所有 class="head" 的元素 蓝色文字属于xPath的表达式 Jquery的元素选取的原理 $(selector).action();-- $(选取元素).动作 注意$是美元符号 注意：所有jquery的全写在document ready的函数中： $(document).ready(function(){ Jquery的具体操作写在这个俩面 }); 这个函数的意思是，在文档加载完成之后进行的操作，所以当文档加载完成前进行操作会出现问题 例如1隐藏未显示的元素2操作未加载完的图片 Jquery的事件 虽然$是jquery的简介方式，及常用方式但是我们也可以通过 noConflict()进行替代 $(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 Jquery常用事件 隐藏和显示 jQuery hide() 隐藏效果jQuery show()显示效果 可以在括号填写东西进行显示和隐藏速度的控制 jQuery fadeIn() 用于淡入已隐藏的元素-显示。jQuery fadeOut() 方法用于淡出可见元素-隐藏 淡入和淡出 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() - 设置或返回表单字段的值---返回key value中的value值 html()和text()返回的文本内容的区别 html()返回的内容是元素中所有可以显示的内容样式的文本 text()返回的内容是元素中的文本在样式起作用后的文本内容 元素的文本属性进行操作 文本属性的方法attr() $("#test").attr("href","http://www.baidu.com"); 例如input的placeholder也可以当作一种属性； 属性就是不是在style里面的内容，功能属性 元素文本处理前后插入内容 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 前两个方法主要是插入文本内容的一种做法，而后两种方法可以插入相应的元素；例如p标签 删除元素/内容（而非样式） remove() - 删除被选元素（及其子元素）例如 测试

这个方法删除div empty() - 从被选元素中删除子元素 例如 测试

这个方法删除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) 方法返回元素的高度（包括内边距、边框和外边距）。