使用工具jquery pad；

1 jquery 隐藏

单击p，p隐藏；

jquery ui使用教程 jquery示例_css

 

2 jquery 滑动

一开始，div中的内容是不显示的，因为display:none；

点击p之后，面板向下展开，因调用了slideDown；

jquery ui使用教程 jquery示例_html_02

 

3 带参数隐藏

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

点击按钮后，2个段落隐藏；

jquery ui使用教程 jquery示例_css_03

 

4 获取文本和html

.text()方法获取文本；.html()获取元素的html;

jquery ui使用教程 jquery示例_ide_04

 

5 设置文本和值

.text()方法设置文本；.val()方法设置值；

设置id为test1的元素的文本为"AAAA BBBB!"；

设置id为test2的元素的html为"<b>CCCC DDDD!</b>"；然后字体变为粗体；

设置输入框的值为"Mao Zhuxi Wansui!!!"；

jquery ui使用教程 jquery示例_jquery_05

 

6 获取元素的父

parents()方法获取元素的全部父；

先看没有js代码，光有html的情形；

jquery ui使用教程 jquery示例_ide_06

获取span元素的父；li 是它的直接父，ul是它的祖父，div 是它的曾祖父，body是它的增曾祖父；

获取之后设置它的父的字体颜色为蓝色，父的边框为绿色2个像素宽；

jquery ui使用教程 jquery示例_css_07

 

7 遍历

遍历每一个li；弹出其文本；

jquery ui使用教程 jquery示例_jquery_08

 

8 css() 方法

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

获取p元素的背景色，然后弹出；

jquery ui使用教程 jquery示例_jquery_09

 

9 代码

1
<body>
<p>click me, will disappear.</p>
</body>

$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});

2
<style type="text/css">
div.panel
{
height:120px;
border:solid 1px #c3c3c3;
display:none;
}
</style>

<div class="panel">
<p>AAAAAAAAAAAAA</p>
<p>CCCCCCCCCCCCCCCCCCCCCCCCCCC</p>
</div>
 
<p class="flip">点击</p>

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});

3
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>

$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000);
  });
});

4
<body>
<p id="test">AAAAAAA BBBBBBB CCCCCCCCC</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});

5
<body>
<p id="test1">段落。</p>
<p id="test2">另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="ABCD"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("AAAA BBBB!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>CCCC DDDD!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("Mao Zhuxi Wansui!!!");
  });
});


6
<body class="ancestors">body (曾曾祖父)
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span AAAA</span>
      </li>
    </ul>   
  </div>
</body>


$(document).ready(function(){
  $("span").parents().css({"color":"Blue","border":"2px solid Green"});
});

7
<body>
<button>输出每个列表项的值</button>
<ul>
<li>兔子</li>
<li>猫咪</li>
<li>奶狗</li>
</ul>
</body>

$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});

8
<body>
<h2>标题</h2>
<p style="background-color:#ff0000">一个段落。</p>
<p style="background-color:#00ff00">一个段落。</p>
<button>返回 p 元素的背景色</button>
</body>

$(document).ready(function(){
  $("button").click(function(){
    alert("Background color = " + $("p").css("background-color"));
  });
});