jQuery的操作

1.jQuery 样式操作

1. 1jQuery 操作css的方法

1.1.1 添加行内样式:$('h4').css('color','red')

1.1.2 添加多个行内样式:$('h4').css({'color','red','border'})

注:添加行内样式直接获取到需要添加的标签,在后面加上css部分即可,css内样式需用''包括,用逗号隔开

1.1.3 $.each(要遍历的对象,回调函数,两个形参,第一个形参是索引,第二个形参是值) jQuery提供的遍历方法

1.2 设置类样式方法(添加,删除,切换)(add,remove,toggle)

2. jQuery 属性操作

jQuery 常用属性操作有三种:prop() / attr() / data() ;

2.1 元素固有属性值 prop()

prop():操作标签固有的属性,例如herf,src,type..。传一个参(属性名).获取该属性的属性值。传两个参(属性名.属性值)设置该属性为指定属性值

获取属性语法:prop("属性")

设置属性语法:prop("属性","属性值 " )

注:prop()相对普通属性的操作,更适合操作表单属性

2.2元素自定义属性值 attr()

attr():操作标签的自定义属性,除了操作自定义属性标签固有属性,除了(checked,disabled,selected,autofocus...这些值为布尔类型的属性)也可以操作,传参同上

获取属性语法:attr("属性")  //类似原生的getattribute()

设置属性语法:attr("属性", "属性值" )  //类似原生的setattribute() 

注:attr()相对普通属性的操作,更适合操作自定义属性

2.3 有关data

data方法,自定义属性,并不会显示在html结构里

附加数据语法:data("name","value")//向背选取的元素附加数据

获取数据语法:data("name")  //向被选取元素获取数据

注意:还可以读取 HTML5 自定义属性 data-index ,得到的是数字型

3. jQuery 文本操作

jQuery的文本属性值常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性

3.1 普通元素内容html,相当于原生innerHTML

html()  //获取元素内容

html("内容")  //设置元素内容

3.2text():获取设置文本标签内容,传值同上,相当于原生innerText

text()  //获取元素的文本内容

text("内容")  //设置元素的文本内容

3.3val():获取,设置表单标签的value属性。不传值:获取value属性值。传值,设置value属性值,相当于原生value

val()  // 获取表单的值

val("内容")  // 设置表单的值

4. jQuery 元素操作

用jQuery方法,操作标签的遍历、创建、添加、删除等操作

4.1 遍历元素

4.1.1  $(“div").each(function(index,domEle){}),each()方法遍历匹配的每一个元素,主要用DOM处理,里面的回调函数有两个参数,index是索引号,domEle是每个DOM元素对象,不是jQuery对象,要使用jQuery方法,要把这个DOM元素转化为jQuery对象$(domEle)

4.1.2  $.each(object,function(index,element{})$each()方法课用于遍历所有对象,主要用于数据处理,比如数组,对象,里面的两个参数:index是索引号,element遍历内容 

4.2 创建元素

以创建一个li为例:$("<li></li>")

4.3  添加元素

4.3.1  内部添加:最后追尾添加:element.append("内容");开头添加:emelent.prepend("内容")

4.3.2  外部添加:目标元素后添加:element.after("内容");目标元素前加:element.before("内容")

注:区别在于内部添加生成后元素为父子关系二外部添加生成后为兄弟关系

4.4 删除元素

4.4.1  element.remove():删除本身匹配的元素

4.4.2  element.empty():删除匹配的元素集合中所有的子节点,清空

4.4.3  element.html(""):清空匹配的元素内容

4.4.4  empty与html("")的区别:empty为彻底清空,html后续还可以设置内容

5. jQuery 尺寸位置操作

5.1 

 width、height 元素的宽高,只计算宽高

innerWidth、innerHeight 元素宽高 包含padding

outerWidth、outerHeight 元素宽高 包含padding border

outerWidth(true)、outerHeight(true) 元素宽高,包含padding border margin

5.2  

offset():获取目标元素相对于文档的距离,也可以用来设置

position():获取目标元素相对于父元素的距离(translate,定位left/top,不包含内外间距)只能获取

scrollLeft():获取目标元素向左卷曲的值,可以设置卷取值

clone():复制节点,如果传true值,那么复制出的节点会包含原节点事件

scrolltop():获取目标元素向上卷曲的值,可以设置卷取值

6. jQuery 节点操作

6.1  创建节点:document.createElement('li')

6.2  放置节点:

6.2.1  末尾追加:父节点.append(新节点);新节点.appendTo(父节点)

6.2.2  首位添加:父节点.prepend(新节点);新节点.prependTo(父节点)

6.2.3 指定标签前一位:节点.before(新节点)

6.2.4 指定标签后一位:节点.after(新节点)

6.2.5 使用新节点替换指定节点:旧节点.replaceWith(新节点);新节点.replaceAll(旧节点)

6.3 删除节点

6.3.1 remove():谁调用删除谁

6.3.2 empty():谁调用清空谁

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容