jQuery总结

AI摘要
Deepseek提供支持

近来学习了jQuery,也看了阮一峰的博客,这里,简单总结一下jQuery的用法。

一、获取元素

广告
广告图片

jQuery获取元素,往往就是把一个选择表达式,放进构造函数jQuery(),然后就可以得到被选中的元素。如下例子:

  $(document) //选择整个文档对象

  $('#myId') //选择ID为myId的网页元素

  $('div.myClass') // 选择class为myClass的div元素

  $('input[name=first]') // 选择name属性等于first的input元素

二、jQuery的链式操作

链式操作,是jQuery的重要设计思想,就是最终选中元素以后,可以对它进行一些列操作,并且所有操作可以连接在一起,以链条的形式写出来。如下例子:

 $('div').find('h3').eq(2).html('Hello');

也可以这样:

      $('div') //找到div元素
   .find('h3') //选择其中的h3元素
   .eq(2) //选择第3个h3元素
   .html('Hello'); //将它的内容改为Hello

这是jQuery最方便的地方。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。

另外,jQuery还提供了了.end()方法,使得结果集可以后退一步:

     $('div')
   .find('h3')
   .eq(2)
   .html('Hello')
   .end() //退回到选中所有的h3元素的那一步
   .eq(0) //选中第一个h3元素
   .html('World'); //将它的内容改为World

三、jQuery创建元素

jQuery创建元素很简单,只要把新元素传入jQuery的构造函数就可以了。如下例子:

    $('<p>Hello</p>');
  $('<li class="new">new list item</li>');
  $('ul').append('<li>list item</li>');

四、jQuery移动元素

jQuery有两组方法,可以移动元素。分别是直接移动元素和移动其他元素。

假定我们选中了一个div元素,需要把它移动到p元素后面。

第一种方法,是使用.insertAfter(),把div元素移动到p元素后面:

$('div').insertAfter($('p'));

第二种方法,是使用.after(),把p元素加到div元素前面:

$('p').after($('div'));

两种方法效果一样,但是,实际上返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。

使用这种模式的操作方法,一共有四队:

 .insertAfter()和.after():在现存元素的外部,从后面插入元素
  .insertBefore()和.before():在现存元素的外部,从前面插入元素
  .appendTo()和.append():在现存元素的内部,从后面插入元素
  .prependTo()和.prepend():在现存元素的内部,从前面插入元素

五、jQuery修改元素的属性

jQuery修改元素的属性也很简单,使用.css()或者.style就可以了,一般使用.style更好。

广告
广告图片
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;来自:未知·未知 ,欢迎您的访问!
文章链接:https://www.lilianhua.com/jquery-summary.html
请先登录才能参与答题
距本场结束剩 00 00 00 00
轻量应用服务器 2核2G
200M峰值带宽,适用于网站搭建、Web应用、容器环境、电商独立站等
立即前往
扫码进入
扫描二维码购买
文澜千文

文澜千文

请登录以使用此功能。

思朗纤麸 木糖醇粗粮消化饼干1020g早餐饼干代餐零食礼盒  代餐饱腹 思朗纤麸 木糖醇粗粮消化饼干1020g早餐饼干代餐零食礼盒 代餐饱腹
Loading...
OpenClaw

OpenClaw 龙虾

AI AGENT GATEWAY
在您的服务器部署 OpenClaw,打造专属极速 AI 助手。
零门槛一键部署环境
支持 QQ/飞书/微信 渠道
跨平台指令分发执行
立即安装