jQuery 属性,css,文档操作
生活随笔
收集整理的這篇文章主要介紹了
jQuery 属性,css,文档操作
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
dom對(duì)象與jQuery對(duì)象的區(qū)別
$(function() {// dom 與 jQuery對(duì)象間的轉(zhuǎn)換var $txt = $(":input");// jQuery -> js// 取下標(biāo)第0位var txt = $txt[0];txt = $txt.get(0);console.log(txt.value);txt = document.getElementById("in1");// js -> jQuery$txt = $(txt);// val() 用來取表單的值console.log($txt.val());});設(shè)置css樣式
<style type="text/css">.div1 {font-size: 80px;}.color {color: pink;}</style><script src="js/jquery-3.2.1.js"></script><script>$(function() {// 同時(shí)設(shè)置多個(gè)樣式$("div").css({"background":"yellow", "border":"solid 1px red"});// 取到border樣式alert($("div").css("border"));// 屬性設(shè)置 -- 雙向方法 (可取值, 可設(shè)值)$("div").prop("id", "1");alert($("div").prop("id"));// 設(shè)置高度$("div").height(180);alert($("div").height());// 添加外部樣式$("div").addClass("div1");// 移除外部樣式$("div").removeClass("div1");// 有這個(gè)樣式就添加 沒有則移除$("#btn").click(function() {$("div").toggleClass("div1 color");});</script>屬性操作
// 對(duì)于存在的屬性 取到正確的值 如果在div上沒寫title 是 空值 undefinedalert($("div").prop("title") + "----" + $("div").attr("title"));// 標(biāo)簽自定義的屬性 count在div中定義了 如果沒定義 都是undefinedalert($("div").prop("count") + "----" + $("div").attr("count")); // undefined ---- 123// 獲取元素內(nèi)部的html內(nèi)容// html/text/val// 在div1中添加一個(gè)input框 會(huì)覆蓋div1中的所有內(nèi)容$("#div1").html("<input/>");alert($("#div1").html());// 獲取表單內(nèi)的純文本$("#div1").text(123);alert($("#div1").text());// 獲取表單的值 val()alert($("#in1").val());// 為表單賦值$("#in1").val("789");文檔操作
// 文檔操作 內(nèi)部插入 針對(duì)下拉框demo// 添加下拉框的尾部$("select").append("<option value=0>蘭州</option>");// $(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。$("<option value=1>常德</option>").appendTo("select");// prepend操作 插入到select的簽名$("select").prepend("<option value=2>東莞</option>");// 與prepend相反$("<option value=3>新疆</option>").prependTo("select");// 文檔外部操作 下拉框(外)后面添加了input表單/$("select").after("<input />");// 包裹// 移除內(nèi)容// $("select option:not(:eq(2))").remove();// $("select option:eq(0)").remove();$("select").empty();});總結(jié)
以上是生活随笔為你收集整理的jQuery 属性,css,文档操作的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java一个源文件供一个程序_java0
- 下一篇: 字符流读取,乱码问题