jquery相关

谁践踏了优雅 2022-05-29 01:29 173阅读 0赞

**jquery:**

**选择器：**

**元素选择器：**

$("p") 选取 元素。

$("p.intro") 选取所有 class="intro" 的 元素。

$("p\#demo") 选取所有 id="demo" 的 元素。

**jQuery 属性选择器**

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

$("\[href\]") 选取所有带有 href 属性的元素。

$("\[href='\#'\]") 选取所有带有 href 值等于 "\#" 的元素。

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

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

**css选择器：**

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

<table> 
 <tbody> 
 <tr> 
 <td>语法</td> 
 <td>描述</td> 
 </tr> 
 <tr> 
 <td>$(this)</td> 
 <td>当前 HTML 元素</td> 
 </tr> 
 <tr> 
 <td>$("p")</td> 
 <td>所有 &lt;p&gt; 元素</td> 
 </tr> 
 <tr> 
 <td>$("p.intro")</td> 
 <td>所有 class="intro" 的 &lt;p&gt; 元素</td> 
 </tr> 
 <tr> 
 <td>$(".intro")</td> 
 <td>所有 class="intro" 的元素</td> 
 </tr> 
 <tr> 
 <td>$("#intro")</td> 
 <td>id="intro" 的元素</td> 
 </tr> 
 <tr> 
 <td>$("ul li:first")</td> 
 <td>每个 &lt;ul&gt; 的第一个 &lt;li&gt; 元素</td> 
 </tr> 
 <tr> 
 <td>$("[href$='.jpg']")</td> 
 <td>所有带有以 ".jpg" 结尾的属性值的 href 属性</td> 
 </tr> 
 <tr> 
 <td>$("div#intro .head")</td> 
 <td>id="intro" 的 &lt;div&gt; 元素中的所有 class="head" 的元素</td> 
 </tr> 
 </tbody> 
</table>

**事件：**

<table> 
 <tbody> 
 <tr> 
 <td>Event 函数</td> 
 <td>绑定函数至</td> 
 </tr> 
 <tr> 
 <td>$(document).ready(function)</td> 
 <td>将函数绑定到文档的就绪事件（当文档完成加载时）</td> 
 </tr> 
 <tr> 
 <td>$(selector).click(function)</td> 
 <td>触发或将函数绑定到被选元素的点击事件</td> 
 </tr> 
 <tr> 
 <td>$(selector).dblclick(function)</td> 
 <td>触发或将函数绑定到被选元素的双击事件</td> 
 </tr> 
 <tr> 
 <td>$(selector).focus(function)</td> 
 <td>触发或将函数绑定到被选元素的获得焦点事件</td> 
 </tr> 
 <tr> 
 <td>$(selector).mouseover(function)</td> 
 <td>触发或将函数绑定到被选元素的鼠标悬停事件</td> 
 </tr> 
 </tbody> 
</table>

**隐藏显示：**

[jQuery hide()][jQuery hide]

演示一个简单的 jQuery hide() 方法。

[jQuery hide()][jQuery hide 1]

另一个 hide() 演示。如何隐藏部分文本。

**淡入淡出：**

[jQuery fadeIn()][jQuery fadeIn]

演示 jQuery fadeIn() 方法。

[jQuery fadeOut()][jQuery fadeOut]

演示 jQuery fadeOut() 方法。

[jQuery fadeToggle()][jQuery fadeToggle]

演示 jQuery fadeToggle() 方法。

[jQuery fadeTo()][jQuery fadeTo]

演示 jQuery fadeTo() 方法。

**滑动：**

[jQuery slideDown()][jQuery slideDown]

演示 jQuery slideDown() 方法。

[jQuery slideUp()][jQuery slideUp]

演示 jQuery slideUp() 方法。

[jQuery slideToggle()][jQuery slideToggle]

演示 jQuery slideToggle() 方法。

jQuery animate() 方法用于创建自定义动画。

**语法：**

$(selector).animate(\{params\},speed,callback);

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

**eg:**

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

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

\});

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

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

$("\#test1").text("Hello world!");

\});

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

$("\#test2").html("Hello world!");

\});

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

$("\#test3").val("Dolly Duck");

\});

**添加：**

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

**删除****：**

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

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

**操作class方法：**

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

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

**获取内容高度，屏幕高度：**

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

*  width()
 *  height()
 *  innerWidth()
 *  innerHeight()
 *  outerWidth()
 *  outerHeight()

**向上遍历dom树：**

*  parent()
 *  parents()
 *  parentsUntil()

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

*  siblings() 返回被选元素的所有同胞元素。
 *  next()   返回被选元素的下一个同胞元素。
 *  nextAll()  返回被选元素的所有跟随的同胞元素
 *  nextUntil()  返回介于两个给定参数之间的所有跟随的同胞元素。
 *  prev()  工作方式与上面的方法类似，只不过方向相反而已
 *  prevAll() 工作方式与上面的方法类似，只不过方向相反而已
 *  prevUntil() 工作方式与上面的方法类似，只不过方向相反而已

first() 方法返回被选元素的首个元素