为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery常用属性和方法有哪些

/ 猿问

jQuery常用属性和方法有哪些

慕哥9229398 2019-05-25 15:15:19

jQuery常用属性和方法有哪些


查看完整描述

2 回答

?
拉风的咖菲猫

属性:

获得标签:$("#id")获得标签内的代码:.html()获得标签内的文本:.text()修改标签内的代码:.html("内容");修改标签内的文本:.html("内容");

获得标签属性:.attr("属性");修改标签属性:attr("属性","属性值");

添加样式:addClass("样式名");动态切换样式:toggleClass("样式名");获取样式:css

添加元素:append("元素");移去元素:.remove();清空节点: .empty();

获取第二个li节点: var $li=$("ul li:eq(1)");获取第二个li节点的文本内容: var li_txt=$方法:一:插入节点:append() 向每个匹配的元素文本内部的后面追加内容eg:<p>我想说:</p>    

代码:

1

 $("p").append("<b>你好</b>");

结果为:<p>我想说:<b>你好</b></p>

appendto() 将所有的匹配的元素追加到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是B追加到A中,而是将A追加到B文本的后面中。eg:<p>我想说:</p>    

代码: 

1

$("<b>你好</b>").appendTo("p");

结果为:<p>我想说:<b>你好</b></p>

prepend() 向每个匹配的元素文本的内部前置内容。eg:<p>我想说:</p>    

代码: 

1

$("p").prepend("<b>你好</b>");

结果为:<p><b>你好</b>我想说:</p>

prependto() 将所有的匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是B前置到A中,而是将A前置到B中eg:<p>我想说:</p>    

代码: 

1

$("<b>你好</b>").prependto("p");

结果为:<p><b>你好</b>我想说:</p>

after() 向每个匹配的元素之后插入内容 。eg:<p>我想说:</p>    

代码: 

1

$("p").after("<b>你好</b>");

结果为:<p>我想说:<b>你好</b></p>

insertAfter 将所有的匹配的元素插入到指定的元素后面。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是B插入到A后面,而是将A插入到B后面。eg:<p>我想说:</p>    

代码: 

1

$("<b>你好</b>").after("p");

结果为:<p>我想说:<b>你好</b></p>before() 在每个匹配的元素之前插入内容eg:<p>我想说:</p>    

代码: 

1

$("<b>你好</b>").after("p");

结果为:<p>我想说:<b>你好</b></p>insertBefore():将A标签插入到B标签的前面

二:删除:①remove 该节点所包含的所有的后代节点将同时被删除 也可以通过参数来选择②empty 清空节点,它能清空元素中的所有后代节点

三:替换节点:①replaceWith() 作用是将所有匹配的元素都替换成指定的HTML或DOM元素②replaceAll()  

四:包裹节点:①warp() 作用是是将所有元素进行单独包裹②warpAll() 作用元素的是所有匹配的元素用一个元素来包裹③warpinner() 作用是将每一个的子内容(包括文本节点)用其他结构化的标记包裹起来

五:设置和获取HTML、文本值1、html():2、text3、val

六:遍历节点1、children(): 取得匹配元素的子元素2、next():取得匹配元素后面紧邻的同辈元素3、prev():取得匹配元素前面紧邻的同辈元素4、siblings():取得匹配元素前后所有的同辈元素5、closest():取得最近的匹配元素

七:css-domcss 获取样式的属性

offset()positionscrollscrollLeft

样式操作:1:获取样式和设置样式 attreg:<p class="myClass" title="选择你最喜欢的水果">你最喜欢的水果是?</p>获取样式: var p_class=$("p").attr("class");设置样式:$("p").attr("class","high");2:追加样式 addClass<style>.high{font-weight:bold   粗体字color:red          字体颜色}.another{font-weight:italic   斜体字color:blue           字体颜色}</style>

追加样式:

1

 $("input:eq(2)").click(function(){$("p".addClass("another"))})

☆在css中有以下规定:①如果给一个元素添加了多个class值,那么就相当于合并了他们的样式②如果不同的class设置了同一样式,则后者覆盖前者addClass                                      attr对同一个网页元素进行操作         <p>test</p>                                 <p>test</p>第一次使用                        $<"p">.addClass("high");                   $<"p">.attr("class","high");第一次结果                        <p class="high">test</p>                    <p class="high">test</p>   再次使用                          $<"p">.addClass("another");                 $<"p">.attr("class","another");最终结果                          <p class="high another">test</p>             <p class="another">test</p>

3:移除样式 removeClass<p class="high another">test</p> 移除一个:$<"p">.removeClass("high");移除二个:$<"p">.removeClass("high").removeClass("another");==$<"p">.removeClass("high another")移除全部:$<"p">.removeClass();

4:切换样式 toggle

5:判断是否含有摸个样式 hasClass可以用来判断元素中是否含有某个class,如果有返回true否则返回false


 




查看完整回答
反对 回复 2019-05-26
?
慕斯卡3215842


1、JQuery的核心的一些方法
each(callback) '就像循环
$("Element").length; ‘元素的个数,是个属性
$("Element").size(); '也是元素的个数,不过带括号是个方法
$("Element").get(); ‘某个元素在页面中的集合,以数组的形式存储
$("Element").get(index); '功能和上面的相同,index表示第几个元素,数组的下标
$("Element").get().reverse(); ‘把得到的数组方向
$("Element1").index($("Element2")); '元素2在元素1中的索引值是。

2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦,但是他俩是可以转换滴)
$("*") ‘表示获取所有对象 但是我至今没这样用过
$("#XXX") '获得 id=XXX 的元素对象(id可以是标签的id或CSS样式id) 常用

$("input[name='username']") 获得input标签中name='userName'的元素对象 常用

$(".abc") ' 获得样式class的名字是.abc的元素对象 常用
$("div") ' 标签选择器 选择所有的div元素 常用
$("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素

3、层级元素获取
$("Element1 Element2 Element3 ....") '前面父级 后面是子集
$("div > p") '获取div下面的所有的 p元素
$("div + p") 'div元素后面的第一个 p元素
$("div ~ p") 'div后面的所有的 p元素

4、简单对象获取
$("Element:first") 'HTML页面中某类元素的第一个元素
$("Element:last") 'HTML页面中某类元素的最后一个元素
$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如:$("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even") '获得偶数行
$("Element:odd“)'获得奇数行
$("Element:eq(index)") '取得一个给定的索引值
$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素
$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素

5、内容对象的获取和对象可见性
$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
$("Element:has(selector)") ‘是否包含某个元素, 如:$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素

6、其他对象获取方法
$("Element[id]") '所有带有ID属性的元素
$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
$("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素
$("Element[selector1][selector2][....]") '符合属性选择器,比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。

7、子元素的获取
$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt

8、表单对象获取
$(:input)//查找所有的Input元素,当然也包括下拉列表,文本域,单选框,复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域,例如
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素,作用与上相反
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表

9、元素属性的设置与移除
$("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src")
$("Element".attr(key,value)") '某一个元素设置属性
$("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性
$("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)//移除某一个属性


 




查看完整回答
反对 回复 2019-05-26

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信