笔记: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="

文本。

"
; // 使用 HTML 标签创建文本 var txt2=$("

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

你可能感兴趣的:(web)