jQuery核心技巧-优快云博客

 
 <pre 
 class
 =
 "javascript" 
  name=
 "code"
 >$(document).ready(function () {
 //这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。

 $(
 "button"
 ).click(function () {
 
 // $("p").css("background-color", "red");
 
 // $("p").hide("slow");隐藏
 
 //$("p").toggle("slow");显示隐藏 它可以取以下值："slow"、"fast" 或毫秒。
 
 //jQuery 拥有下面四种 fade 方法： 您可以实现元素的淡入淡出效果。
 
 //fadeIn() 潜入
 
 //fadeOut() 浅出
 
 //fadeToggle() 浅出浅入
 
 //fadeTo() fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。（值介于 0 与 1 之间）。$("#div1").fadeTo("slow",0.15);  设置透明度
 
 $(
 "#div4"
 ).fadeIn();
 
 $(
 "#div5"
 ).fadeIn(
 "slow"
 );
 
 $(
 "#div6"
 ).fadeIn(
 3000
 );
 
 //jQuery 滑动方法
 
 //slideDown()方法用于向下滑动元素
 
 //slideUp()方法用于向上滑动元素。
 
 //slideToggle()方法可以在 slideDown() 与 slideUp() 方法之间进行切换

 //jQuery 动画 - animate() 方法jQuery animate() 方法用于创建自定义动画。
 
 //$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。
 
 //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
 
 //可选的 callback 参数是动画完成后所执行的函数名称。
 
 //方法一
 
 //$("button").click(function(){
 
 //    $("div").animate({left:'250px'});
 
 //});
 
 //方法2
 
 //$("button").click(function(){
 
 //    var div=$("div"); 
 
 //    div.animate({left:'100px'},"slow");
 
 //    div.animate({fontSize:'3em'},"slow");
 
 //jQuery stop() 方法
 
 //jQuery stop() 方法用于停止动画或效果，在它们完成之前。
 
 //stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
 
 $(
 "#button"
 ).click(function () {
 
 $(
 "#panel"
 ).stop();
 
 });

 // $(selector).hide(speed, callback)callback当动画 100% 完成后，即调用 Callback 函数。
 
 如：
 
 $(
 "p"
 ).hide(
 1000
 , function () {
 
 alert(
 "The paragraph is now hidden"
 );
 
 });

 //通过 jQuery，您可以把动作/方法链接起来。  Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
 
 $(
 "#p1"
 ).css(
 "color"
 , 
 "red"
 )
 
 .slideUp(
 2000
 )
 
 .slideDown(
 2000
 );

 //jQuery DOM 操作
 
 //三个简单实用的用于 DOM 操作的 jQuery 方法：
 
 //text() - 设置或返回所选元素的文本内容
 
 //html() - 设置或返回所选元素的内容（包括 HTML 标记）
 
 //val() - 设置或返回表单字段的
 
 $(
 "#btn1"
 ).click(function () {
 
 alert(
 "Text: " 
  + $(
 "#test"
 ).text());
 
 });
 
 $(
 "#btn2"
 ).click(function () {
 
 alert(
 "HTML: " 
  + $(
 "#test"
 ).html());
 
 });

 //Query attr() 方法用于获取属性值。
 
 $(
 "button"
 ).click(function () {
 
 alert($(
 "#w3s"
 ).attr(
 "href"
 ));
 
 });

 //设置内容 - text()、html() 以及 val() 给找到的点赋值
 
 $(
 "#btn1"
 ).click(function () {
 
 $(
 "#test1"
 ).text(
 "Hello world!"
 );
 
 });
 
 $(
 "#btn2"
 ).click(function () {
 
 $(
 "#test2"
 ).html(
 "<b>Hello world!</b>"
 );
 
 });
 
 $(
 "#btn3"
 ).click(function () {
 
 $(
 "#test3"
 ).val(
 "Dolly Duck"
 );
 
 });

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

 //通过 jQuery，可以很容易地添加新元素/内容。
 
 //append() - 在被选元素的结尾插入内容
 
 //prepend() - 在被选元素的开头插入内容
 
 //after() - 在被选元素之后插入内容
 
 //before() - 在被选元素之前插入内容

 //jQuery，可以很容易地删除已有的 HTML 元素。
 
 //remove() - 删除被选元素（及其子元素） $("#div1").remove();
 
 //empty() - 从被选元素中删除子元素 $("#div1").empty();
 
 //remove() - 过滤删除被选元素（及其子元素） $("p").remove(".italic");

 //jQuery 操作 CSS
 
 //addClass() - 向被选元素添加一个或多个类
 
 //removeClass() - 从被选元素删除一个或多个类
 
 //toggleClass() - 对被选元素进行添加/删除类的切换操作
 
 //css() - 设置或返回样式属性
 
 $(
 "button"
 ).click(function () {
 
 $(
 "h1,h2,p"
 ).addClass(
 "blue"
 );
 //blue,important是样式名字
 
 $(
 "div"
 ).addClass(
 "important"
 );
 
 });
 
 //您也可以在 addClass() 方法中规定多个类：
 
 $(
 "button"
 ).click(function () {
 
 $(
 "#div1"
 ).addClass(
 "important blue"
 );
 
 });
 
 $(
 "button"
 ).click(function () {
 
 $(
 "h1,h2,p"
 ).removeClass(
 "blue"
 );
 
 });
 
 $(
 "button"
 ).click(function () {
 
 $(
 "h1,h2,p"
 ).toggleClass(
 "blue"
 );
 
 });
 
 //jQuery css() 方法
 
 $(
 "p"
 ).css(
 "background-color"
 );
 //返回属性
 
 $(
 "p"
 ).css(
 "background-color"
 ,
 "yellow"
 );
 //设置属性
 
 $(
 "p"
 ).css({ 
 "background-color"
 : 
 "yellow"
 , 
 "font-size"
 : 
 "200%" 
  });
 //设置多个属性

 //通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
 
 //width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
 
 //height()  方法设置或返回元素的高度（不包括内边距、边框或外边距）。
 
 //innerWidth()方法返回元素的宽度（包括内边距）。
 
 //innerHeight()方法返回元素的高度（包括内边距）。
 
 //outerWidth()方法返回元素的宽度（包括内边距、边框和外边距）。
 
 //outerHeight()方法返回元素的高度（包括内边距、边框和外边距）。
 
 $(
 "button"
 ).click(function () {
 
 var txt = 
 ""
 ;
 
 txt += 
 "Width: " 
  + $(
 "#div1"
 ).width() + 
 "</br>"
 ;
 
 txt += 
 "Height: " 
  + $(
 "#div1"
 ).height();
 
 $(
 "#div1"
 ).html(txt);
 
 });

 });

 });</pre>