jquery学习基础使用

Jquery获取元素进行操作

一：基础方式(四种)

$(this).hide()

表示：jQuery 的hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()

表示：jQuery 的hide() 函数，隐藏id="test" 的元素。

$("p").hide()

表示：jQuery 的hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

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