web端 jquery的使用及详解

妖狐艹你老母 2022-06-06 12:37 423阅读 0赞

1.什么是Jquery?

jquery是一个javaScript函数库

jquery是一个轻量级的“写的少 做的多” 的javaScript库

为什么使用jquery

目前网络上有大量的开源js框架，但是jquery是目前最流行的js框架，而且提供大量的

很多大公司都在使用Jquery

jquery是否适用于所有的浏览器？

jquery团体知道js在不同浏览器中存在着大量的兼容性问题，目前jquery兼容所有浏览器，包括

interinet Explorer 6!

3.jquery语法

jquery语法是通过选取HTML元素，并对选取元素执行某些操作‘

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

实例：

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

$("p").hide() ---- 隐藏所有段落

$("p .test").hide() --- 隐藏所有 calss=“text”的段落

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

4.jquery选择器

选择器允许您对html元素组或单个元素进行操作

选择器基于元素的id 类 类型 属性 属性值等 查找html元素，它基于已经存在的css选择器，

jquery中所有选择器都以美元符号开头：$()

元素选择器

jquery元素选择器基于元素名选取元素

在页面中选取所有<p>元素：

$("p")

实例

$(document).ready(function()\{

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

$("p").hide();

\});

\#id 选择器

jquery \#id选择器通过html元素的id属性选取指定的元素

页面中元素ID应该是唯一的，所以您要在页面中选取唯一的元素需要通过 id 选择器

$("\#test")

实例

当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

实例

$(document).ready(function()\{

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

$("\#test").hide();

\});

class选择器

jquery类选择器可以通过指定的class查找元素

语法： $(".test")

实例

$(document).ready(function()\{

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

$(".test").hide();

\});

<table style="border-collapse:collapse; table-layout:fixed; white-space:nowrap; width:0px">      
 <tbody> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(189,189,189); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">语法</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(189,189,189); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">描述</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(189,189,189); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">实例</span> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$("*")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取所有元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_all2" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$(this)</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取当前 HTML 元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_this" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$("p.intro")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取 class 为 intro 的 &lt;p&gt; 元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_pclass" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$("p:first")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取第一个 &lt;p&gt; 元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_pfirst" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$("ul li:first")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取第一个 &lt;ul&gt; 元素的第一个 &lt;li&gt; 元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_ullifirst" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$("ul li:first-child")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取每个 &lt;ul&gt; 元素的第一个 &lt;li&gt; 元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_ullifirstchild" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$("[href]")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取带有 href 属性的元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_hrefattr" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$("a[target='_blank']")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取所有 target 属性值等于 "_blank" 的 &lt;a&gt; 元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_hrefattrblank" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$("a[target!='_blank']")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取所有 target 属性值不等于 "_blank" 的 &lt;a&gt; 元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_hrefattrnotblank" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$(":button")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取所有 type="button" 的 &lt;input&gt; 元素 和 &lt;button&gt; 元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_button2" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$("tr:even")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取偶数位置的 &lt;tr&gt; 元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_even" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实例</span></a> 
    </div> </td> 
  </tr> 
  <tr style="height:40px"> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">$("tr:odd")</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(0,0,0); background-color:transparent">选取奇数位置的 &lt;tr&gt; 元素</span> 
    </div> </td> 
   <td style="font-size:14px; color:rgb(57,57,57); border:1px solid rgb(167,167,167); overflow:hidden; vertical-align:top; word-wrap:break-word; background-color:rgb(239,239,239); white-space:pre-wrap"> 
    <div> 
     <a href="https://www.w3cschool.cn/tryrun/showhtml/tryjquery_sel_odd" rel="nofollow"><span style="font-family:&quot;Microsoft YaHei&quot;,STXihei; color:rgb(255,255,255); background-color:rgb(174,65,65); text-decoration:none">在线实</span></a> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

5.什么是事件

页面对不同访问者的相应叫做事件

事件处理程序指的是当html中发生某些事件时调用的方法

实例：

在元素上移动鼠标

选取单选按钮

点击元素

常用的jquery事件方法

$(document).ready()： 方法允许我们在文档完全加载完之后执行函数

click() :当按钮点击事件被触发时候回调用一个函数，该元素在用户点击

html元素时执行

实例

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

$(this).hide();

\});

dblclick()：当双击元素时，会发生dblclick事件

实例

$("p").dblclick(function()\{

$(this).hide();

\});

mouseenter()： 当鼠标指针穿过元素时 ，会发生mouseenter()事件

$("\#p1").mouseenter(function()\{

alert("You entered p1!");

\});

mouseleave（）：当鼠标指针离开元素时，会发生mouseleave事件

实例

$("\#p1").mouseleave(function()\{

alert("Bye! You now leave p1!");

\});

mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

实例

$("\#p1").mousedown(function()\{

alert("Mouse down over p1!");

\});

mouseup() ：当元素在松开鼠标按钮时，会发生mouseup事件

实例

$("\#p1").mouseup(function()\{

alert("Mouse up over p1!");

\});

hover(): 用于模拟光标悬停事件

当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter）

当鼠标移出这个元素时，会触发指定的第二个函数（mouseleave）

实例

$("\#p1").hover(function()\{

alert("You entered p1!");

\},

function()\{

alert("Bye! You now leave p1!");

\});

focus（）: 当元素获得焦点时，繁盛focus事件，

当鼠标点击选中元素或通过tab键定位到元素时,该元素就会获得焦点，

focus（）方法触发focus事件,

实例

$("input").focus(function()\{

$(this).css("background-color","\#cccccc");

\});

blur()：当元素失去焦点时，发生blur事件

实例

$("input").blur(function()\{

$(this).css("background-color","\#ffffff");

\});

6.jquery效果

1） 隐藏显示

jquery hide(） 和 show()

通过jquery，您可以使用hide()和show()方法来隐藏显示html元素

实例

$("\#hide").click(function()\{

$("p").hide();

\});

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

$("p").show();

\});

语法:

$(selector).hide(speed,callback);

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

jquery toggle()

通过jquery 您可以使用 toggle()方法来切换hide()和show()方法

显示被隐藏元素 并隐藏显示元素

实例

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

$("p").toggle();

\});

7.jquery获取

获得内容

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

html()：设置或返回所选

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

实例

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

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

\});

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

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

\});

实例

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

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

\});

获取属性 attr()

attr() 方法是用于获取属性值的

实例

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

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

\});

设置内容和属性

*  text() - 设置或返回所选元素的文本内容
 *  html() - 设置或返回所选元素的内容（包括 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");

\});

设置属性attr（）

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

实例

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

$("\#w3s").attr("href","//www.w3cschool.cn/jquery");

\});

8.jquery 添加元素

添加新的html内容

我们将学习用于添加新内容的四个 jQuery 方法：

*  append() - 在被选元素内部的结尾插入指定内容
 *  prepend() - 在被选元素内部的开头插入指定内容
 *  after() - 在被选元素之后插入内容
 *  before() - 在被选元素之前插入内容

append()方法： 在被选中的元素结尾插入内容

实例

$("p").append("Some appended text.");

jquery prepend()方法 ： 在被选中元素的开头插入内容

实例

$("p").prepend("Some prepended text.");

jquery after(）和 before（)方法

jquery alter（）方法在被选元素后插入内容

juqery before()方法在被选元素之前插入内容

实例

$("img").after("在后面添加文本");

$("img").before("在前面添加文本");

9.jquery删除元素

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

*  remove() - 删除被选元素（及其子元素）
 *  empty() - 从被选元素中删除子元素

jquery remove(）方法： 删除被选元素及其子元素

实例

$("\#div1").remove();

jquery empty（）方法

juqery empty()方法删除被选元素的子元素

实例

$("\#div1").empty();

过滤被删除的元素

remove()方法可以接受一个参数，允许你对被删元素进行过滤

实例

$("p").remove(".italic");

10.jquery css类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

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

addclass(）方法

如何向不同的元素添加class属性， 当然在添加类时。你也可以选取多个元素

实例

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

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

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

\});

removeClass(）方法

如何在不同的元素中删除指定得class的属性

实例

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

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

\});

toggleClass（）方法

如何使用jquery toggleClass()方法，该方法对被选元素进行添加/删除类的切换

实例

$("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%"\});

web端 jquery的使用及详解

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery简介及使用

相关 DataX 及 DataX-Web 安装使用详解

相关 C# web端 NPOI导出Excel详解

相关 jQuery web存储详解

相关移动端web开发---Touch事件详解

相关自己总结的web前端的jquery面试题

相关 web端 jquery的使用及详解

相关 Jquery each的使用及demo

相关 jQuery.extend 函数使用详解

相关关于jq及jquery的使用