jQuery汇总

2019-10-03 18:37栏目：网络编程
TAG：

html
 <input type="button" value="A" /> <input type="button" value="B" /> <input type="button" value="C" /> <div >A</div> <div>B</div> <div>C</div>

获得内容

　　text()、html() 以及 val()

  • text()　　　设置或返回所选元素的文本内容

  • html() 　　　设置或返回所选元素的内容（包括 HTML 标记）

  • val()　　　　设置或返回表单字段的值

  txt+="Width: " + $("#div1").width() + "</br>";

滑动

sildeDown():向下滑动元素sildeUp():向上滑动元素sildeToggle():切换向上向下滑动

jQuery的使用

  $("div").animate({

选择器

获得内容和属性

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

　　DOM = Document Object Model（文档对象模型）

$("button").click(function(){

添加

append():在被选元素的结尾插入内容perpend():在被选元素的开头插入内容after():在被选元素之后插入内容before():在被选元素之前插入内容

attr() 的回调函数

　　jQuery 方法 attr()，也提供回调函数。
　　回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

     $("p#demo") 选取所有 id="demo" 的 <p> 元素。

获取和设置内容属性

text():设置或返回所选文本内容html():设置或返回所选元素的内容val():设置或返回表单字段的值

jQuery查询其他节点

  $("#w3s").attr({

效果

过滤（缩写搜索元素的范围）

  • first() 　　返回被选元素的首个元素。

  • last() 　　　方法返回被选元素的最后一个元素。

  • eq() 　　　方法返回被选元素中带有指定索引号的元素。
    索引号从 0 开始，因此首个元素的索引号是 0 而不是 1

  • filter() 　　　方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

  • 返回带有类名 "intro" 的所有 <p> 元素：

    $(document).ready(function(){
  $("p").filter(".intro");
});

  • not() 　　　　方法返回不匹配标准的所有元素。

  • not() 方法与 filter() 相反。
    返回不带有类名 "intro" 的所有 <p> 元素：

    $(document).ready(function(){
  $("p").not(".intro");
});

  var txt="";

class选择器

$

设置内容和属性

    opacity:'0.5',

css类

addClass():添加一个或多个类removeClass():删除一个或多个类

jQuery 效果

隐藏、显示、切换，滑动，淡入淡出，以及动画

  $("button").click(function(){

DOM操作

操作HTML元素和属性的方法

获取属性

　　　attr()

  • $(selector).attr( 属性)　　方法用于获取属性值

例子：如何获得链接中 href 属性的值：

$("button").click(function(){
  alert($("#w3s").attr("href"));
});
  1. jQuery删除
元素选择器

$('element')

$ 选择所有div元素中的p元素$('#div>*') 选择id为div元素的所有子元素$('div + p') 选择所有div的下一个元素p$("#div ~ div")选择id为div元素之后所有同一父级的div标签

:first 选择第一个元素:last 选取最后一个元素:not 取非元素

jQuery 事件函数

　　jQuery 代码放到

部分的事件处理方法

$("button").click(function() {..some code... } )

单独文件中的函数
　　如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

　　和导入jQuery库文件一样。

jQuery 事件

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

})

id选择器

$

jQuery ID选择器

  • $("#name") 选取 ID名字为 name的元素。

    $("#div2").fadeIn("slow");

jQuery
$(function(){ $.click(function(){ $.addClass('current').siblings().removeClass() var $i = $.index $.hide.show

jQuery的导入

　要使用jQuery首先要导入jQuery文件导入的方式分两种本地导入和网络导入（其实就上用网上的jQuery库）

$("p").remove(".italic");删除 class="italic" 的所有 <p> 元素

显示隐藏

show(speed,callback):显示hide(speed,callback): 隐藏toggle(speed,callback);切换显示和隐藏

本地导入

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

　　注意：
　　　导入文件的这对<script>标签里不能再写jquery代码，不然会出错。

before() - 在被选元素之前插入内容；$("img").before("Some text after");

文档就绪函数

$.ready(function 简化为$(function

jQuery 选择器

$(“#test1”).text(hello);

删除

remove():删除被选元素empty():删除被选元素的子元素

jQuery 简介

　　jQuery 是一个 JavaScript 库。

　　jQuery 极大地简化了 JavaScript 编程。

　　　

addClass() - 向被选元素添加一个或多个类

jQuery实例

隐藏和显示

  • hide() 隐藏HTML 元素

  • show() 显示 HTML 元素

  • toggle() 切换 hide() 和 show() 方法

  • 显示被隐藏的元素，并隐藏已显示的元素：
  • $(selector).toggle(speed,callback)
  • 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

$("button").click(function(){

css
div{ width: 200px; height: 200px; background-color: #ccc; font-size: 100px; text-align: center; line-height: 200px; display: none; } .current{ background-color: skyblue; } .show{ display: block; }

基础语法

图片 1

$(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

});

尺寸

width():设置或返回元素的宽度(不包含内边距,边框和外边距)height():设置或返回元素的高度(不包含内边距,边框和外边距)outerWidth():返回元素的宽度outerHeight():返回元素的高度offset():函数用于设置或返回当前匹配元素相对于当前文档的偏移

[toc]

$(“#btn2”).click(function(){

淡入淡出

fadeIn():淡入已隐藏的元素fadeOut():淡出可见元素fadeToggle():切换淡入和淡出效果

网络导入

　　如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
Google 的 CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

Microsoft 的 CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

使用谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

$("#btn2").click(function(){

选取HTML元素,并对它们执行操作基础语法 : $.action()原则 : Get first Set all

后代

  • children()　返回被选元素的所有直接子元素。

  • find() 返回被选元素的后代元素，一路向下直到最后一个后代。

  • find("selector") 返回属于被选元素后代的所有selector 元素
  • **find("*")** 返回被选元素的所有后代

   用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

遍历

用根据其相对于其他元素的关系来'查找'HTML元素,以某项选择器开始,并沿着这个选择移动,直到抵达期望的元素为止each:函数用于以当前jQuery对象匹配到每个元素作为上下文来遍历执行指定的函数eq:获取当前index所对应的jQuery对象find:函数用于选取每个元素匹配指定表达是expr的后代元素index():函数用于获取当前jQuery对象中指定DOM元素的索引值

next():获得匹配元素集合中每个元素紧邻的同辈元素prev():获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选:把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。filter():filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。siblings():获得匹配元素集合中所有元素的同辈元素，由选择器筛选。

滑动

  • slideDown() 方法用于向下滑动元素。

  • 语法：

  • $(selector).slideDown(speed,callback)

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

  • 可选的 callback 参数是滑动完成后所执行的函数名称。

  • slideUp() 方法用于向上滑动元素。

  • 语法：

  • $(selector).slideUp(speed,callback)

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

  • 可选的 callback 参数是滑动完成后所执行的函数名称。

  • slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

  • 如果元素向下滑动，则 slideToggle() 可向上滑动它们。

  • 如果元素向上滑动，则 slideToggle() 可向下滑动它们。

  • 语法：

  • $(selector).slideToggle(speed,callback)

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

  • 可选的 callback 参数是滑动完成后所执行的函数名称。

$(“button”).click(function(){

淡入淡出

  • fadeIn() 用于淡入已隐藏的元素。
  • 语法：
  • $(selector).fadeIn(speed,callback)
  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

  • fadeOut() 　　方法用于淡出可见元素。

  • 语法：

  • $(selector).fadeOut(speed,callback)
  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

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

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

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

  • 语法：

  • $(selector).fadeToggle(speed,callback)
  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

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

  • 语法：

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

     $("p.intro") 选取所有 class="intro" 的 <p> 元素。

jQuery CLASS选择器

  • $(".name") 选取 class名字为 name的元素。

 

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$(selector).css("属性":"值");

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

   $("#panel").slideToggle();

设置内容

  • text() 　　设置或返回所选元素的文本内容

  • html() 　　设置或返回所选元素的内容（包括 HTML 标记）

  • val() 　　设置或返回表单字段的值

　　text()、html() 以及 val() 的回调函数

　　上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。
　　回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

例子演示带有回调函数的 text() 和 html()：

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

    $("#div1").fadeIn();

删除元素/内容

  • remove() 　　删除被选元素（及其子元素）

  • empty() 　　　从被选元素中删除子元素

5. callback函数：在当前动画100%完成之后执行。$(selector).hide(speed,callback)；callback 参数是一个在 hide 操作完成后被执行的函数。若想在一个涉及动画的函数之后来执行语句，则使用 callback 函数。

动画

  • animate() 方法用于创建自定义动画。

  • 语法：

  • $(selector).animate({params},speed,callback)

  • 必需的 params 参数定义形成动画的 CSS 属性。

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

  • 可选的 callback 参数是动画完成后所执行的函数名称。

animate() - 操作多个属性
请注意，生成动画的过程中可同时使用多个属性：

  • 当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right

animate() - 使用相对值

  • 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

animate() - 使用预定义的值

  • 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

animate() - 使用队列功能

  • 默认地，jQuery 提供针对动画的队列功能。

  • 这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

           });

获取并设置 CSS 类

  • addClass() 　　　向被选元素添加一个或多个类
  • removeClass() 　从被选元素删除一个或多个类
  • toggleClass() 　对被选元素进行添加/删除类的切换操作
  • css()　　　　　　设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性
语法：　css("propertyname")

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

设置多个 CSS 属性

css({"propertyname":"value","propertyname":"value",...})

  • width()　　　　　　设置或返回元素的宽度（不包括内边距、边框或外边距）。

  • height()　　　　　设置或返回元素的高度（不包括内边距、边框或外边距）。

  • innerWidth() 　　　返回元素的宽度（包括内边距）。

  • innerHeight() 　　　返回元素的高度（包括内边距）。

  • outerWidth() 　　　返回元素的宽度（包括内边距和边框）。

  • outerHeight() 　　　返回元素的高度（包括内边距和边框）。

innerWidth()；返回元素的宽度（包括内边距）

兄弟

  • siblings() 　　返回被选元素的所有同胞元素。

  • next() 　　　　返回被选元素的下一个同胞元素。

  • nextAll() 　　　返回被选元素的所有跟随的同胞元素。

  • nextUntil("selector") 　返回介于两个给定参数之间的所有跟随的同胞元素

  • prev() 　　　　返回的是前面的同胞元素

  • prevAll() 　　返回被选元素的前面的同胞元素。

  • prevUntil("selector") 　返回介于两个给定参数之间的所有跟随的同胞元素（向前）

  $("#div1").html(txt);

jQuery 元素选择器

  • $("p") 选取 <p> 元素。

  • $("p.intro") 选取所有 class="intro" 的 <p> 元素。

  • $("p#demo") 选取所有 id="demo" 的 <p> 元素。

    $(“div”).animate({left:’260px’});

添加元素

添加新内容的四个 jQuery 方法

  • append() 　　在被选元素的结尾插入内容

  • prepend() 　　 在被选元素的开头插入内容

  • after() 　　　　在被选元素之后插入内容

  • before() 　　　在被选元素之前插入内容

　　注意：通过 append() 和 prepend() 方法添加若干新元素

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

css() - 设置或返回被选元素的一个或多个样式属性。

设置属性 - attr()

　　jQuery attr() 方法也用于设置/改变属性值

　　　$(selector).attr( 属性：属性值)

　　attr() 　　方法也允许您同时设置多个属性

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

prepend() - 在被选元素的开头插入内容；$("p").prepend("Some appended text.

jQuery HTML

　　jQuery 拥有可操作 HTML 元素和属性的强大方法。

    $("[href='#']")选取所有href值等于#的元素

祖先

  • parent() 　　返回被选元素的直接父元素。

  • parents() 　　返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

返回所有 元素的所有祖先：

$(document).ready(function(){
  $("span").parents();
});

您也可以使用可选参数来过滤对祖先元素的搜索。

例子返回所有 元素的所有祖先，并且它是

$(document).ready(function(){
  $("span").parents("ul");
});
  • parentsUntil() 　　返回介于两个给定元素之间的所有祖先元素。

返回介于 与

元素之间的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div");
});

    $("#div3").fadeOut(3000);

jQuery 语法

   });

jQuery 事件

　　jQuery 事件处理方法是 jQuery 中的核心函数。
　　事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

      });

jQuery 属性选择器

jQuery 使用** XPath 表达式**来选择带有给定属性的元素。

  • $("[href]") 选取所有带有 href 属性的元素。

  • $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

  • $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

  • (("[href)='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

  • $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

    $("#stop").click(function(){

    $("button").click(function(){

ps:

  txt+="Height: " + $("#div1").height();

height()；设置或返回元素的高度。

         <script>

    $("#div1").fadeTo("slow",0.15);

 

      $(document).ready(function(){   //为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

  .slideUp(2000)

可以使用相对值；如

append() - 在被选元素的结尾插入内容；$("p").append("Some appended text.");

val() - 设置或返回表单字段的值

alert("The paragraph is now hidden");

Ps: 把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动.

  alert("HTML: " + $("#test").html());

    width:'+=150px'

   $("#flip").click(function(){

jQuery attr() 方法用于获取属性值。

  1. Jquery设置

a. hide()用法：隐藏元素。

   jQuery库特性：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities

  1. 链接（chaining）的技术：允许在相同的元素上运行多条jQuery命令。
  1. jQuery 元素选择器

});

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

    $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

  alert($("#w3s").attr("href"));

outerHeight()；返回元素的高度（包括内边距和边框）

    height:'+=150px',

  1. jQuery获取

  $("#div1").html(txt);

    $("#div3").fadeTo("slow",0.7);

   $("#panel").slideDown();

d. fadeTo()：$(selector).fadeTo(speed,opacity,callback);允许渐变为给定的不透明度（值介于 0 与 1 之间）

2.  jQuery添加

                 $("#p1").show();

  $("div").animate({

  1. jQuery css选择器

Ps:默认所有html元素位置都是静态的，无法移动，若要对位置进行操作，必须先将css position属性设置为relative、fixed或absolute。

  var div=$("div");

   $("#panel").slideUp();

  1. 滑动函数：可以在元素上创建滑动效果。

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

});

 $(“#test3”).val(“hhh”);

a. fadeIn()函数：$(selector).fadeIn(speed,callback);用于淡入已隐藏的元素

c. fadeToggle()函数：$(selector).fadeToggle(speed,callback);切换fadeIn()和fadeOut()函数

opacity 参数（必选）将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

});

});

  $("button").click(function(){

    $("#div2").fadeTo("slow",0.4);

b. slideUp()函数：向上滑动元素。$(selector).slideUp(speed,callback);

  1. jQuery尺寸

    $("[href！='#']")选取所有href值不等于#的元素

 

$("button").click(function(){

  });

b. stop()函数：停止滑动或动画。$(selector).stop(stopAll,goToEnd); stopAll 参数（可选）规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。goToEnd 参数（可选）规定是否立即完成当前动画。默认是 false。stop()默认会清除在被选元素上指定的当前动画。

  div.animate({width:'100px',opacity:'0.8'},"slow");

$(“btn1”).click(function(){

});

$(document).ready(function(){

})
等价于
$(function(){

})

  });

removeClass() - 从被选元素删除一个或多个类

    "title" : "W3School jQuery Tutorial"

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

});

$("button").click(function(){

 

  var txt="";

       $("button").click(function(){

c. slideToggle()函数：切换slideDown()函数和slideUp()。$(selector).slideToggle(speed,callback);

 

$(“#btn3”).click(function(){

    $("#div1").fadeOut();

   $("#flip").click(function(){

    left:'250px',

    $("#div3").fadeIn(3000);

  div.animate({height:'100px',opacity:'0.4'},"slow");

   jQuery 可以选取某些元素并执行相应的操作，可以通过元素名、属性名、类名或者ID选择。 

     $("p") 选取 <p> 元素。

$(selector).mouseover(function)；将函数绑定到被选元素的鼠标悬停事件

  txt+="Inner height: " + $("#div1").innerHeight();

  1. 隐藏/显示函数

});

jQuery remove() 方法删除被选元素及其子元素。$("#div1").remove();

    $(selector).focus(function)；将函数绑定到被选元素获得焦点事件

一.    jQuery函数

          $("p").toggle();

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

等价于

after() - 在被选元素之后插入内容；$("img").after("Some text after");

    });

  .slideDown(2000);

  $("button").click(function(){

innerHeight()；返回元素的高度（包括内边距）

});

   更多可选项：$(this).hide();  $("p").hide(); $(".t").hide;  $("#t").hide()

 

  $("div").addClass("important");

 

                    $(this).hide();//隐藏当前的html元素

    $(selector).hide(speed,callback);参数可选。

  1. 动画效果函数：
  1. jQuery操作css

$("#p1").css("color","red")

  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";

$("button").click(function(){

        })

    height:'150px',

 $(“#test2”).html(“<b>heo</b>”);

toggleClass() - 对被选元素进行添加/删除类的切换操作

});

可以使用队列功能；如

});

});

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

    width:'150px'

    speed 参数规定隐藏/显示的速度，可取以下值："slow"、"fast" 或毫秒。

});

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）

    $("[href]") 选取所有带有href属性的元素

  $("button").click(function(){

    $("ul li:first")    每个 <ul> 的第一个 <li> 元素

$("#btn1").click(function(){

});

    left:'250px',

 

 

六．jQuery遍历

  1. 用于 DOM 操作的 jQuery 方法

text() - 设置或返回所选元素的文本内容

  1. jQuery属性选择器

  $("#p1").css("color","red").slideUp(2000).slideDown(2000);

});

a. slideDown()函数：向下滑动元素。$(selector).slideDown(speed,callback);

三.  jquery事件

二. jQuery选择器

 

html() - 设置或返回所选元素的内容（包括 HTML 标记）

b. show（）函数：根据对选择器的操作显示相应的元素

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

 

    $("#panel").stop();

jQuery empty() 方法删除被选元素的子元素。$("#div1").empty();

     jQuery 使用 CSS 选择器来选取 HTML 元素。

  div.animate({height:'300px',opacity:'0.4'},"slow");

  div.animate({width:'300px',opacity:'0.8'},"slow");

callback 参数（可选）是该函数完成后所执行的函数名称。

  未完待续。。。。。。

    $(selector).click(function)；将函数绑定到被选元素的点击事件

  });

         </script>

outerWidth()；返回元素的宽度（包括内边距和边框）

width()；设置或返回元素的宽度。

    $(document).ready(function);将函数绑定到文档就绪事件

  1. 淡入淡出效果函数：

$("#btn1").click(function(){

  });

           $("p").click(function(){

 

可以使用预定义的值，有show、hide或toggle；如

    $(selector).dbclick(function)；将函数绑定到被选元素的双击事件

基础语法是：$(selector).action()

        <script src="D:demojQuerytestjquery-2.2.2.min.js"></script>

});

  alert("Value: " + $("#test").val());

});

   alert("Text: " + $("#test").text());

});

   jQuery是轻量级的JavaScript库，jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。更少的代码做更多的事。

    $("#div2").fadeOut("slow");

});

    height:'toggle'

b. fadeOut()函数：$(selector).fadeOut(speed,callback);根据不同的参数元素以不同的速度淡出可见元素。

$("p").hide(1000,function(){

  $("div").animate({

         });

        $("#show").click(function(){

    callback 参数是隐藏或显示完成后所执行的函数名称。

四． jQuery HTML

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

    "href" : "",

   $("#flip").click(function(){

$("p").css({"background-color":"yellow","font-size":"200%"});

生成动画的时候可以操作多个属性；如

$("button").click(function(){

c. toggle()函数：切换hide()和show()函数.$(selector).toggle(speed,callback);

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

   });

 

a. animate()函数：用于创建自定义动画。$(selector).animate({params},speed,callback);params参数（必选）定义形成动画的css属性，speed参数（可选）规定动画效果的时长，取值有：slow，fast或毫秒数。

    $("[href$='.jpg']")选取所有href值以jpg结尾的元素

  $("button").click(function(){

});

版权声明：本文由澳门新葡亰平台游戏发布于网络编程,转载请注明出处：jQuery汇总

    随机看看

    NEW ARTICLE

    热门文章

    HOT ARTICLE