笔记：Jquery学习笔记1

1.显示和隐藏切换toggle()函数

显示被隐藏的元素，并隐藏已显示的元素

toggle(speed,callback);//参数可选

• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

$("button").click(function(){
  $("p").toggle();
});

2.显示隐藏函数

• $(selector).hide(speed,callback);
• $(selector).show(speed,callback);

3.聚焦focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

4.失焦blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

5.淡入已隐藏的元素

$(selector).fadeIn(speed,callback);//参数都可选

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

6.淡出可见元素。

$(selector).fadeOut(speed,callback);

7.淡入淡出之间切换fadeToggle()

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

• 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
• 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

8.改变透明度 fadeTo()

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);//12参数必须

• 必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
• fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
• 可选的 callback 参数是该函数完成后所执行的函数名称。

9.下滑展开上滑收起函数：slideToggle()

$(selector).slideToggle(speed,callback);//都可选

• 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是滑动完成后所执行的函数名称。

10.自定义动画：animate()

$(selector).animate({params},speed,callback);//参数1必须

• 必需的 params 参数定义形成动画的 CSS 属性。
• 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是动画完成后所执行的函数名称。

举例：紧靠左边变为，举例左侧250px

$("button").click(function(){
  $("div").animate({left:'250px'});
});

其他功能https://www.runoob.com/jquery/jquery-animate.html

11.捕获：获取元素值并设置

• text() - 设置或返回所选元素的文本内容：$("#test1").text(“Hello world!”);
• html() - 设置或返回所选元素的内容（包括 HTML 标记）：$("#test2").html(“Hello world!”);
• val() - 设置或返回表单字段的值：$("#test3").val(“RUNOOB”);
• attr() - 获取属性：$("#runoob").attr(“href”)
• attr() - 设置属性：$("#runoob").attr(“href”,“http://www.runoob.com/jquery”);

12.添加元素内容append()

• append() 方法在被选元素的结尾插入内容
• prepend() 方法在被选元素的开头插入内容

13.添加元素

添加元素的三种方式：

var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本   

var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本    

var txt3=document.createElement("p");    
	txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM   

$("body").append(txt1,txt2,txt3);        // 追加新元素

14.after() 和 before() 的功能和用法与append()和prepend()的功能基本相似

15.删除元素

• remove() - 删除被选元素（及其子元素）可带参数
• empty() - 从被选元素中删除子元素

举例：删除 class=“italic” 的所有

元素：

$("p").remove(".italic");

16.添加删除类样式toggleClass()

$("h1,h2,p").toggleClass("blue");

• addClass() 添加 class 属性
• removeClass() 删除指定的 class 属性

17.设置css

$("p").css("background-color","yellow");