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");