jquery中常用的函数和属性详细解析

前端技术 2023/09/08 JavaScript

Dom:
Attribute:属性
$(\"p\").addClass(css中定义的样式类型); 给某个元素添加样式
$(\"img\").attr({src:\"test.jpg\",title:\"test Image\"}); 给某个元素添加属性/值,参数是map
$(\"input\").attr({\"checked\", \"checked\"});
$(\"img\").attr(\"title\", function() { return this.src }); 给某个元素添加属性/值
$(\"元素名称\").html(); 获得该元素内的内容(元素,文本等)
$(\"元素名称\").html(\"<b>new stuff</b>\"); 给某元素设置内容
$(\"元素名称\").removeAttr(\"属性名称\") 给某元素删除指定的属性以及该属性的值
$(\"元素名称\").removeClass(\"class\") 给某元素删除指定的样式
$(\"元素名称\").text(); 获得该元素的文本
$(\"元素名称\").text(value); 设置该元素的文本值为value
$(\"元素名称\").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$(\"input元素名称\").val(); 获取input元素的值
$(\"input元素名称\").val(value); 设置input元素的值为value

Manipulation:
$(\"元素名称\").after(content); 在匹配元素后面添加内容
$(\"元素名称\").append(content); 将content作为元素的内容插入到该元素的后面
$(\"元素名称\").appendTo(content); 在content后接元素
$(\"元素名称\").before(content); 与after方法相反
$(\"元素名称\").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)
$(\"元素名称\").empty() 将该元素的内容设置为空
$(\"元素名称\").insertAfter(content); 将该元素插入到content之后
$(\"元素名称\").insertBefore(content); 将该元素插入到content之前
$(\"元素\").prepend(content); 将content作为该元素的一部分,放到该元素的最前面
$(\"元素\").prependTo(content); 将该元素作为content的一部分,放content的最前面
$(\"元素\").remove(); 删除所有的指定元素
$(\"元素\").remove(\"exp\"); 删除所有含有exp的元素
$(\"元素\").wrap(\"html\"); 用html来包围该元素
$(\"元素\").wrap(element); 用element来包围该元素

Traversing:
add(expr)当前匹配元素集合增加新的匹配元素集合‘expr\',形成新的匹配元素集合;

例子:

复制代码 代码如下:

$(document).ready(function(){  
    $(\"div\").css(\"border\", \"2px solid red\")
                 .add(\"p\")//文档中的P元素会应用背景色为yellow的CSS样式;
                 .css(\"background\", \"yellow\");  
   });

children(expr)从当前匹配元素集合中得到各个元素第一层子集集合,形成新的元素集合
contains(str) 匹配集合中包含str这个变量文本的元素集合,返回匹配元素集合
end()用于返回到调用 find() 或 parents() 函数(或者其它遍历函数)之前的 jQuery 对象

例子
$(\"#div1\").find(\"p\").hide().end().hide()
第一个hide()是对于p标签的 然后用end()结束对p标签的引用而返回到#div1标签
所以第二个hide()是对于#div1起作用的
如果不加end() 则两个hide()都是对p标签起作用

filter(expression)
find(expr)
filter和find的区别:
filter将在一组已经选取的元素里面选择;
find将在一组已经选取的元素的子节点里面选择;
<html代码>
<div class=\"css\">
       <p class=\"rain\">测试1</p>
</div>
<div class=\"rain\">
       <p>测试2</p>
</div>
</html>
如果我们使用find()方法:
var $find =   $(\"div\").find(\".rain\");
alert( $find.html() ) ;
将会输出:测试1
如果使用filter()方法:
var $filter = $(\"div\").filter(\".rain\");
alert( $filter.html() );
将会输出:测试2

区别在于:
find()会在div元素内 寻找 class为rain 的元素。
而filter()则是筛选div的class为rain的元素。
一个是对它的子集操作,一个是对自身集合元素筛选。

is(expr)//判断现有集合是否属于‘expr\'集合中的一部分或是相等。如果是则返回true,否则返回false

next(expr)//取得一个包含匹配的元素集合中每一个元素紧邻的后面兄弟元素集合。
not(el)//匹配集合中没有满足过滤要求的元素集合

例子:
$(\"div\").not(\".green, #blueone\")  
$(\"input:not(:checked) + span\")
$(\'tr:not([th]):odd\')

parent(expr)取得一个包含着所有匹配元素的唯一父元素的元素集合
parents(expr)//得到匹配元素集合中各个元素的所有祖先元素集合
prev(expr)得到匹配元素集合中各个元素紧邻的前一个兄弟元素集合
siblings(expr)得到所有匹配元素集合中各个元素的所有兄弟元素集合

Core:
$(html).appendTo(\"body\") 相当于在body中写了一段html代码
$(elems) 获得DOM上的某个元素
$(function(){……..}); 执行一个函数
$(\"div > p\").css(\"border\", \"1px solid gray\"); 查找所有div的子节点p,添加样式
$(\"input:radio\", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮
jQuery为开发插件提拱了两个方法,分别是:
jQuery.extend(object) 为扩展jQuery类本身.为类添加新的方法。

举例
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
引用jQuery:

复制代码 代码如下:

$.min(3,4); //return 3
jQuery.fn.extend(object)给jQuery对象添加方法,是对jQuery.prototype进得扩展

jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {//.... 
   //......
};

本文地址:https://www.stayed.cn/item/20606

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。