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