dom对象与jQuery对象的区别

  		$(function() {// dom 与 jQuery对象间的转换var $txt = $(":input");// jQuery -> js// 取下标第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());});

设置css样式

	<style type="text/css">.div1 {font-size: 80px;}.color {color: pink;}</style><script src="js/jquery-3.2.1.js"></script><script>$(function() {// 同时设置多个样式$("div").css({"background":"yellow", "border":"solid 1px red"});// 取到border样式alert($("div").css("border"));// 属性设置 -- 双向方法 (可取值, 可设值)$("div").prop("id", "1");alert($("div").prop("id"));// 设置高度$("div").height(180);alert($("div").height());// 添加外部样式$("div").addClass("div1");// 移除外部样式$("div").removeClass("div1");// 有这个样式就添加 没有则移除$("#btn").click(function() {$("div").toggleClass("div1 color");});</script>

属性操作

			// 对于存在的属性 取到正确的值  如果在div上没写title 是 空值 undefinedalert($("div").prop("title") + "----" + $("div").attr("title"));// 标签自定义的属性 count在div中定义了 如果没定义 都是undefinedalert($("div").prop("count") + "----" + $("div").attr("count")); // undefined ---- 123// 获取元素内部的html内容// html/text/val// 在div1中添加一个input框 会覆盖div1中的所有内容$("#div1").html("<input/>");alert($("#div1").html());// 获取表单内的纯文本$("#div1").text(123);alert($("#div1").text());// 获取表单的值 val()alert($("#in1").val());// 为表单赋值$("#in1").val("789");

文档操作

			// 文档操作 内部插入 针对下拉框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 />");// 包裹// 移除内容// $("select option:not(:eq(2))").remove();// $("select option:eq(0)").remove();$("select").empty();});