一、修改元素樣式
通過給元素新增或移除類來改變元素樣式
1、jquery物件.addclass(class/function(index,currentclassname){}):jquery物件中的每乙個dom元素都可新增相同的指定乙個或多個類
2、jquery物件.removeclass(classfunction(index,currentclassname){}):jquery物件中的每乙個dom元素都可移除相同的指定乙個或多個類
3、jquery物件.hasclass(name):判斷jquery物件是否有指定類
例:if(li.hasclass('hiden red'))else):批量設定樣式
如:element.css();
3、jquery物件.css('樣式名',function(index,value(value為name的當前值)){})
4、jquery物件.css(name):獲取name值
5、jquery物件.css(name陣列):獲取name陣列值
三、獲取元素尺寸
1、jquery物件.width():獲取jquery物件指定元素的寬
2、jquery物件.height():獲取jquery物件指定元素的高
3、jquery物件.innerwidth():獲取jquery物件指定元素的寬加上內邊距
4、jquery物件.innerheight():獲取jquery物件指定元素的高加上內邊距
5、jquery物件.outerwidth():獲取jquery物件指定元素的寬加上內邊距加上邊框
6、jquery物件.outerheight():獲取jquery物件指定元素的高加上內邊距加上邊框
說明:5、6中若有引數true,則加上外邊距,若為false,不加
四、獲取或設定元素位置(例見設定元素位置.html)
1、jquery物件.offset():獲取到的元素位置相對於文件,返回乙個物件,只對可見元素有效
2、jquery物件.position():獲取到的元素位置相對于父元素,並且忽略外邊距,獲取由position設定的位置,返回乙個物件
3、jquery物件.scrolltop():獲取豎直滾動條的位置
4、jquery物件.scrollleft():獲取水平滾動條的位置
說明:若括號裡有值,則是設定滾動條的位置
1、jquery物件,html():獲取jquery物件的第乙個dom物件的html
2、jquery物件.text():獲取jquery物件的所有dom物件的文字
3、jquery物件,html(content):設定jquery物件的所有dom物件的html為content
4、jquery物件.text(content):設定jquery物件的所有dom物件的文字為content
五、移動或插入元素(例:插入或移動元素.html)
2、jquery物件.prepend(content(可為html字串,jquery物件,陣列)):將content插入到jquery物件中每乙個dom物件的內部內容的最前
3、jquery物件.after(content(可為html字串,jquery物件,陣列)):將content插入到jquery物件中每乙個dom物件的後面
4、jquery物件.before(content(可為html字串,jquery物件,陣列)):將content插入到jquery物件中每乙個dom物件的前面
說明:三者都是前者插入到element的某個位置,並且可指定多個插入位置
六、包裹元素(例見包裹元素.html)
1、jquery物件.wrap(content/jquery物件):用content包含jquery物件的dom元素,乙個content只包含乙個dom元素,直至所有都包含為止,是複製content,而不是移動dom元素
2、jquery物件.wrapall(content/jquery物件):用乙個content包含jquery物件的所有dom元素,是複製content,而不是移動dom元素
3、jquery物件.wrapinner(content/jquery物件):用乙個content包含jquery物件dom元素的文字內容
如:element.wrapinner($('div'));
結果為:
lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt, veritatis.
4、jquery物件.unwrap():取消包裹
七、移除元素(例見移除物件.html)
1、jquery物件.remove():移除所有匹配物件,只移除事件和資料(data),html中的內容被移除
2、jquery物件.detach():移除所有匹配物件,不移除事件和資料(data),html中的內容被移除
3、jquery物件.empty():移除所有匹配物件,只移除所有文字內容和子節點
八、複製和替換元素(例見複製和替換元素.html)
1、jquery物件.clone():若引數為(true):則進行深度複製,即自己和子元素的資料和事件都會進行複製;若引數為(true,false)則只複製自己的資料和事件;若引數為(false/無):則不複製自己和子元素的資料和事件
2、jquery物件.replacewith(content):用content替換jquery物件(所有匹配的元素)
3、content.replaceall(jquery物件):用content替換jquery物件,content為jquery物件
九、處理表單元素的值(例見處理表單元素的值.html)
1、jquery物件.val():獲取表單元素的值
/*var text=$("[name='text']");
console.log(text.val());*/
/*var radio=$("[name='radio']:checked");
console.log(radio.val());*/
"[name='select']").val());
"[name='multiselect']").val());
"[name='checkbox']:checked").val());//當選擇多個時,只會顯示第乙個的值
console.log($("[name='checkbox']:checked").map(function(index,docelement)).toarray());
2、jquery物件.val(值)設定元素的值
說明:其中radio、checkbox、下拉列表多選的括號中的值要為陣列(string或數字)
通過JS修改元素樣式
語法 元素,style.樣式名 樣式值 var box1 document.getelementbyid box1 box1.syle.width 100px 注意 如果css樣式名含有 如 background color,這種名稱在js中不合法,需要將樣式名修改為駝峰命名法,background...
jQuery 基礎 修改元素樣式
修改元素樣式 一 修改元素的類 addclass names removeclass names 給元素增加類 給元素刪除類 hasclass 方法 上述 的乙個簡便方法 toggleclass 二 直接修改元素的樣式 獲取或修改樣式 css name,value 方法 三 獲取或設定元素的尺寸 w...
DOM修改元素
修改元素 1 修改內容 functionfun 通過innertext屬性可讀取或設定標籤的內部文字 functionfun 也可以通過innerhtml屬性獲取或設定內部文字。兩者的區別 innerhtml會按照html規則解析文字,而innertext只是當作普通文字內容。2 修改樣式 a.st...