1. 程式人生 > >jQuery操作元素屬性

jQuery操作元素屬性

元素屬性操作
  • attr(name)獲取屬性       attr(“title”)
  • attr(name,value)          attr("title","picture")
  • attr(name1:value1,name2:value2)    attr(src:"1.jpg",title:"picture")
在jQuery中,操作元素內容的方法包括html()和text()
  • html()獲取元素的html內容;
  • html(val)設定元素的html內容;
  • text()獲取元素的文字內容;
  • text(val)設定元素的文字內容;
獲取或設定元素值
  • 在jquery中 如果要獲取元素的值,通過val()方法來實現的
  • val()是獲取val的值‘
  • val(val)設定val的值為val
  • 獲取select標記的多個選項值:val().join(",")
元素樣式操作:通過css(name,value)方法設定樣式值
  • 設定元素樣式值:css(name,value) 
    • css(”color“,”red“)
  • 增加css類:addClass(class)
    •  addClass(”new“)新增new類
  • 類別切換:toggleClass(class)
    • toggleClass(”new“)
  • 刪除css類removeClass(class)
    • removeClass()刪除所有的類
    • removeClass(”new“)刪除new類
建立和新增新元素
  • $(html)完成DOM元素建立
    • var $div=$("<div>建立新元素</div>")
    • $("body").append($div);
  • 節點插入方法
    • append(content):content是追加到目標中的內容
    • append(function(index,html)):追加函式返回的內容
    • appendTo(content):content是被追加的內容,追加到另一個指定的元素集合中
    • prepend(content):content插入到被選擇元素前
    • prepend(function(index,html))
    • prependTo(content):選擇的元素插入到content前
  • 外部插入節點方法
    • after(content)
    • after(function)
    • before(content)
    • before(function)
    • insertAfter(function)
    • insertBefore(function)
複製節點
  • clone()
  • clone(true)複製所有動作
替換節點
  • replaceWith(content):content為需要替換的內容
  • replaceAll(selector):字串替換指定selector的元素,selector為需要被替換的元素
      二者是個前後操作元素相反 包裹節點
  • wrap(html):把所選擇的元素用其他字串程式碼包裹起來
  • wrap(elem):把所選擇的元素用其他DOM元素包裹起來
  • wrap(fn):把所選擇的元素用fn返回值包裹起來
  • unwrap():移除所選元素的父元素或包裹標記
  • wrapAll(html):把所選擇的元素用單個元素包裹起來
  • wrapAll(elem):把所選擇的元素用單個DOM元素包裹起來
  • wrapInner(html):把所選擇的元素的子內容用其他字串程式碼包裹起來
  • wrapInner (elem):把所選擇的元素的子元素用其他DOM元素包裹起來
  • wrapInner(fn):把所選擇的元素的子元素用fn返回值包裹起來
其中文字節點也運算元元素 刪除元素
  • remove():刪除該元素
    • $("ul li")remove 
  • empty():清空全部的節點或節點包括的所有後代元素

attr(name)函式只返回第一個匹配元素的特定元素屬性值.  attr(key, name)會設定所有包裝集 中的元素屬性:  attr( properties ) 可以一次修改多個元素屬性(多個屬性用{}) removeAttr( name ) 刪除元素屬性, 但是對應的DOM屬性是不會被刪除的, 只會刪除DOM屬性的值.  修改CSS樣式 1.修改CSS類
addClass( classes )  為每個匹配的元素新增指定的類名。 為匹配的元素加上'selected' 類:  $("p").addClass("selected");
hasClass( class )  判斷包裝集中是否至少有一個元素應用 了指定的CSS類 $("p").hasClass("selected");  
removeClass( classes )  從所有匹配的元素中刪除全部或者指定的類。 從匹配的元素中刪除'selected' 類:  $("p").removeClass("selected");  
toggleClass( class )  如果存在(不存在)就刪除(新增)一個 類。 為匹配的元素切換'selected' 類:  $("p").toggleClass("selected");  
toggleClass( class, switch)  當switch是true時新增類, 當switch是false時刪除類 每三次點選切換高亮樣式:  var count = 0; $("p").click(function(){  $(this).toggleClass("highlight", count++ % 3 ==0) }); 
addClass( class ) 和removeClass( [classes] ) 的引數可以一次傳入多個css類, 用空 格分割,比如:  $("#btnAdd").bind("click", function(event) { $("p").addClass("c olorRed borderBlue"); });  removeClass方法的引數可選, 如果不傳入引數則移除全部CSS類:

相關推薦

jQuery操作元素屬性

元素屬性操作 attr(name)獲取屬性       attr(“title”)attr(name,value)          attr("title","picture")attr(name1:value1,name2:value2)    attr(src:"

JQuery操作元素屬性與樣式及位置

空格 clas col 修改 name ava 移位 ack osi <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> <script type="te

【html、CSS、javascript-10】jquery-操作元素屬性CSS和文檔處理)

dom javascrip fun 實用 code color () 進行 java 一、獲得內容-text、html、val() 三個簡單實用的用於 DOM 操作的 jQuery 方法: text() - 設置或返回所選元素的文本內容 html() - 設置或返回所選元

jQuery初學基礎常用內容——操作元素屬性

//在HTML中相關程式碼 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co

從零開始學習jQuery (四) 使用jQuery操作元素屬性與樣式

本系列文章導航 一.摘要 本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區分值得大家學習. 二.前言 通過前面幾章我們已經能夠完全控制jQuery包裝集了,  無論是通過選擇器選取物件,

JQuery操作元素的style屬性

//同時設定字型大小和背景色 $("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"}); 如果值是數字,將會被自動轉化為畫素值。在css()方法中,如果屬性中帶有“-”符號,例如font-size和background-color屬性,如果在設定這

selenium用jquery改變元素屬性

改變 exce per static func app 當前頁 期待 catch 軟件測試交流QQ群:631646987,期待你的加入!! 思路: 引用jQuery類庫 用jQuery代碼改變元素屬性 現以改變百度頁面屬性為例,刪除id屬性,將百度輸入框及按鈕背景

jquery----更改元素屬性attr()方法

jquery中用attr()方法來獲取和設定元素屬性,attr是attribute(屬性)的縮寫, 是js中setAttribute()和getAttribute()的簡化 最基本常用的用法: $("img").attr("src","img/a.jpg"); $("img").attr

JQuery入門(三)JQuery操作元素

前言        本章學習使用JQuery來操作元素的內容、屬性、樣式以及相關的文件結構 方法 1.概念 通過前面的講解,我們瞭解了使用JQuery來獲取html元素物件。那麼獲取了物件之後將會對其中的內容進行操作,也就是我們馬上要開始講

jQuery根據元素屬性獲取div

在編碼過程中有時候需要根據div的一些屬性去找到符合屬性的div,此時可以提前給div自定義一個屬性並賦值,根據此屬性來查詢div。 例如,給div一個自定義的屬性:tip 。 <div class="myclass" tip = "thistip"></div&g

使用jquery操作元素的css樣式(獲取、修改等等)

//1、獲取和設定樣式 $("#tow").attr("class")獲取ID為tow的class屬性 $("#two").attr("class","divClass")設定Id為two的class屬性。 //2、追加樣式 $("#two").addClass(

jQuery操作元素內容

之前發現val()函式可以取得元素內容,但是是加上jQuery之中,也可以利用val設定元素內容 示例設定元素value <html> <head> <meta charset="UTF-8"> <title>jqu

jquery 操作 class 屬性

class屬性修改   類屬性即class屬性,規定類名.   用類選擇器規定樣式的時候,需要為元素指定類名,即class屬性的值.   注意每個HTML元素只有一個class屬性.但是class屬性的值可以是多個名稱,即可能包含一個詞的列表,中間用空格分隔.   用j

JQuery 中this和$(this)獲取對象、操作DOM對象的元素屬性

class 獲取對象 clas details 對象 query 操作 active html $(‘.button‘).click(function () { var active = $(‘.buttons-tab a‘).children(‘input‘).at

JQuery快速入門-操作元素屬性和樣式

dcl 顯示 實現 節點 ali 文本 屬性。 另一個 增加 我們在學習JavaScript時,詳細介紹了DOM對象。從DOM樹可以得知,對DOM的操作,主要包括:元素的屬性、內容、值、CSS。 一、元素屬性的操作 在 jQuery 中,可以對元素的屬性執行獲取、設置、

從零開始學 Web 之 jQuery(二)獲取和操作元素屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔

JQuery元素屬性和樣式操作、以及設置元素和內容

ava 例如 term wid 集合 遍歷 內容 ssd each 一、JQury元素屬性操作通過JQuery可以對元素本身的屬性進行操作,包括獲取屬性的屬性值,設置屬性的屬性值,並且可以刪除屬性值(attr()和removeAttr())。二、JQuery樣式操作元素樣式

從零開始學 Web 之 jQuery(五)操作元素其他屬性,為元素繫結事件

一、操作元素的寬和高 1、方法一 元素.css("width"); 元素.css("height"); 最後得到的是字串型別的,比如 200px。 如果我們在設定為原來寬高2倍的時候,就要先把獲取的寬高轉換成數字型別,再乘以2,這樣操作比較麻煩,有沒有簡單的方法呢? 2、方法二 元素.width(屬性

jquery 操作 select 默認選擇第一個元素

tar easy eset 思路 blog reset function 標簽 數組元素   問題:點擊按鈕設置select元素的默認選項。   首先,有個環境,並引入jquery。 <!DOCTYPE html> <html> <h

jquery 獲取及操作元素 (常用)

.com pre img htm color hello fun 文檔 wid jquery 獲取元素 參考:http://www.w3school.com.cn/jquery/jquery_selectors.asp 1.(1)$(document).ready()