测试2

1．jQuery语法

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

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

示例：

$(this).hide() - 隐藏当前元素

$(".test").hide() - 隐藏所有 class="test" 的所有元素

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

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

 1.2 文档就绪函数

$(document).ready(function(){

--- jQuery function go here ---

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

    • 试图隐藏一个不存在的元素
    • 获得未完全加载的图像的大小

2．jQuery选择器

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

在 HTML DOM 术语中： 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

 

 

2.1 元素选择器

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

$("p.intro") 、$("p#demo")   选取所有 class="intro" 或id="demo"的 <p> 元素。

 

 

2.2 属性选择器

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

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

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

 

 2.3 css选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

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

 

3．jQuery效果

3.1 影藏/显示：hide/show

语法：$(selector).hide(speed,callback);     影藏

           $(selector).show(speed,callback);    显示

           $(selector).toggle(speed,callback);   切换（显示被隐藏的元素，并隐藏已显示的元素）

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

可选的 callback 参数是hide()或show()或toggle()完成后所执行的函数名称。

 

 

3.2 淡入/淡出：fade

fadeIn().............淡入已隐藏的元素

fadeOut()...........淡出可见元素

fadeToggle().......在 fadeIn() 与 fadeOut() 方法之间进行切换

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

 

语法：$(selector).fadeIn(speed,callback);   

　　　　　可选的 speed 参数规定效果的时长

          $(selector).fadeTo(speed,opacity,callback); 

必需的speed 参数规定效果的时长,

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

实例：

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

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

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

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

});

 

  

 3.3 滑动：slide

slideDown().............向下滑动元素

slideUp().................向上滑动元素

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

 

 3.4 动画：animate( )

 

语法：$(selector).animate({params},speed,callback);

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

实例：

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

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

});

............................................................................................................................

<button>开始动画</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> 

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

 

 ① 操作多个属性

$("div").animate({

left:'250px',

opacity:'0.5',

width:'150px'

});

提示：animate() 方法几乎可以操作所有CSS属性，但必须使用Camel标记法书写所有额属性名，比如，必须使用paddingLef而不是padding-left。

并且，色彩动画不包含在核心jQuery库中，如果需要生成颜色动画，需要从jQuery.com下载Color Animations插件。

② 使用相对值

该值相对于元素的当前值，需要在值的前面加上 +=或 -=

$("div").animate({

left: '250px',

height: '+=150px',

width: '+=150px'

});

③ 使用预定义的值

可以把属性的动画值设置为”show”、”hide”或”toggle”

$("div").animate({

height: 'toggle'

});

这里的效果相当于：$("div").slideToggle();

④ 使用队列功能

默认的，jQuery提供针对动画的队列功能。这意味着若果在彼此之后编写了多个animate()调用，jQuery会创建包含这些方法调用的“内部”队列。然后逐一运行这些animate调用。

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

var div=$("div");

div.animate({left:'100px'},"slow");

div.animate({fontSize:'3em'},"slow");

});

上面的例子把 <div> 元素移动到右边，然后增加文本的字号。

 3.5 停止动画：stop( )

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。stop() 方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。

语法：$(selector).stop(stopAll, goToEnd);

stopAll：可选，规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

goToEnd：可选，规定是否立即完成当前动画。默认是 false。

因此，默认地，stop()会清除在被选元素上指定的当前动画。

 3. 6 链接：Chaining( )

Chaining( )允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

例：$("#p1").css("color","red").slidUp(2000).slideDown(2000);

"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动

提示：1、这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，只需简单地把该动作追加到之前的动作上。

    2、当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。

 

 4．jQuery HTML

4.1 获取内容和属性

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

⑴ 获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

      • text()    设置或返回所选元素的文本内容
      • html()   设置或返回所选元素的内容（包括 HTML 标记）
      • val()     设置或返回表单字段的值

实例1：

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

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

});

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

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

});

............................................................................................................................

<p id="test">这是段落中的<b>粗体</b>文本。</p>

<button id="btn1">显示文本</button>

<button id="btn2">显示 HTML</button>

实例2：

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

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

});

............................................................................................................................

<p>姓名：<input type="text" id="test" value="米老鼠"></p>

<button>显示值</button>

 ⑵ 获取属性 - attr()

实例3：

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

alert($(“#w3s”).attr(“href”));

});

............................................................................................................................

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

<button>显示 href 值</button>

 4.2 设置内容和属性

⑴ 设置内容 - text()、html() 以及 val()

实例1：

$("#btn1").click(function(){ $("#test1").text("Hello world!"); });

 

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

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

实例2：

$("#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 + ")";

});

});

............................................................................................................................

<p id="test1">这是<b>粗体</b>文本1。</p>

<p id="test2">这是<b>粗体</b>文本2。</p>

<button id="btn1">显示旧/新文本</button>

<button id="btn2">显示旧/新 HTML</button>

⑵ 设置属性 - attr()

实例3：

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

$("#w3s").attr({

"href" : "http://www.w3school.com.cn/jquery/",

"title" : "W3School jQuery 教程"

});

});

attr()的回调函数：

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

实例4：

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

$("#w3s").attr("title", function( i , origValue ){

return i + "/" + origValue; 

});

}); 

 4.3 添加元素

添加新的HTML内容：

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

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

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

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

实例1：

function appendText() {

var txt1="<p>HTML.</p>";              // 以HTML创建新元素

var txt2=$("<p></p>").html("<b>jQuery.</b>"); //以jQuery创建新元素

var txt3=document.createElement("i");

txt3.innerHTML="DOM.";               // 通过 DOM 来创建斜体文本

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

②   $("button").after(txt1,txt2,txt3);        // 追加新元素

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

}

............................................................................................................................

<p>This is a paragraph.</p>

<button onclick="appendText()">追加文本</button>

结果：

①等效于②，都是在<button></button>后追加新元素（在</body>前）；

③是在<button>后追加新元素（<在/button>前）。

 

 4.4 删除元素

一般可使用以下两个 jQuery 方法：

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

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

注：remove() 方法也可接受一个参数，对被删元素进行过滤。

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

 

 4.5 CSS类

jQuery操作CSS：

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

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

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

css()---------------设置或返回一个或多个样式属性

 

样式:

.important {

font-weight: bold;

font-size: xx-large;

}

.blue {

color: blue;

}

...................................................................................................................................

<h1>标题 1</h1>

<h2>标题 2</h2>

<p>这是一个段落。</p>

<div>这是非常重要的文本！</div>

<button>向元素添加类</button>

...................................................................................................................................

(1) addClass( )方法:

例 4.5.1：

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

$("h1, h2, p").addClass("blue");------------------// 向不同的元素添加 class 类

$("div").addClass("important blue");-----------// 给同一元素添加多个class 类

});

(2) removeClass( )方法：

例 4.5.2：

$("h1, h2, p").removeClass("blue");------------------// 从不同的元素删除 class 类

(3) toggleClass( )方法：

例 4.5.3：

$("h1, h2, p").removeClass("blue");----------// 对被选元素进行添加/删除类的切换操作

 

(4) css( )方法：

1. 返回css属性：css(“propertyname”);

2. 设置css属性：css(“propertyname”, “value”);

3. 设置多个css属性：css({“propertyname”:“value”, “propertyname”:“value”,...});

例 4.5.4：

$("p").css("background-color");-----------// 返回匹配元素的background-color值

$("p").css("background-color", “pink”);---// 为所有匹配元素设置background-color

$("p").css({"background-color":“pink”, “font-size”:”200%”});----//设置多个属性

 

注： 当要返回background-color时，若果匹配的P元素不止一个，此时返回的是第一个p的背景色。

.........................................................................................................................................

<p style="这是一个段落。</p>

<p style="这是一个段落。</p>

<p style="这是一个段落。</p>

<button>返回 p 元素的背景色</button>

此时：

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

alert("Background color = " + $("p").css("background-color"));

});

结果：返回第一个p的背景色

 4.6 尺寸

jQuery 提供多个处理尺寸的重要方法：

    • width()---------------设置或返回元素的宽度（不包括内边距、边框或外边距）
    • height()--------------设置或返回元素的高度（不包括内边距、边框或外边距）
    • innerWidth()---------返回元素的宽度（包括内边距）
    • innerHeight()--------返回元素的高度（包括内边距）
    • outerWidth()---------返回元素的宽度（包括内边距和边框）
    • outerHeight()--------返回元素的高度（包括内边距和边框）
    • outerWidth(true)----返回元素的宽度（包括内边距、边框和外边距）
    • outerHeight(true)---返回元素的高度（包括内边距、边框和外边距）

 

实例1：

<div id="div1" style="height: 100px; width: 300px;

  padding: 10px; margin: 3px; border: 1px solid blue;

font-size: 10.5000pt;" style="line-height: 1.571428em; font-family: 宋体; font-size: 10.5pt;"> lightblue;">

</div>

<button>显示div的尺寸</button>

...................................................................................................................................

 结果：        W：300                  H：100          width() 与 height()

                   iW：320                   iH：120         innerWidth()：     width + padding

                  oW：322                  oH：122        outerWidth()：     width + padding + border

          oW(true)：328          oH(true)：128      outerWidth(true)：width + padding + border + margin

...................................................................................................................................

实例2：

返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

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

var txt="";

txt+="Document width/height: " + $(document).width();

txt+="x" + $(document).height() + "n";

txt+="Window width/height: " + $(window).width();

txt+="x" + $(window).height();

alert(txt);

});

实例3：

设置指定元素的宽度和高度:  $(“#div1”).width(500).height(500);

内容来源于网络如有侵权请私信删除
标签： jQuery jQuery插件 jQuery教程
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

PHP许愿墙项目实战
4671 9.8元
jQuery精讲入门
3705 0元 限免