Jquery知识点梳理

Jquery
$代表选择器

JS
选取元素
操作内容
操作属性
操作样式

<div id="aa" style="width:100px; height:100px;">11</div>

<div class="aa">22</div>
<span class="aa">33</span>

<input type="text" name="uid" aa="bb" id="cc" />

<input type="checkbox" value="1" id="dd" />

</body>
<script type="text/javascript">

//页面加载完成
$(document).ready(function(e) {

//页面加载完成之后执行

//JS
//找元素,DOM对象
//var a = document.getElementById("aa");
//alert(a);

//var a = document.getElementsByClassName("aa");
//alert(a[1]);

//var a = document.getElementsByTagName("div");

//var a = document.getElementsByName("uid");
//alert(a[0]);

//操作内容
//a.innerHTML //操作元素里面的html代码
//a.innerTEXT //操作元素里面的文本

//a.value //操作表单元素的值

//操作属性
//a.setAttribute("",""); //设置
//a.removeAttribute(""); //移除
//a.getAttribute(""); //获取

//操作样式
//a.style.backgroudColor = "red";


//Jquery
//找元素,Jquery对象
//var b = $("#aa"); //根据ID找
//alert(b[0]);

//var b = $(".aa"); //根据class找
//alert(b[1]); //找到的是DOM对象
//alert(b.eq(1)); //找到的是Jquery对象

//var b = $("div"); //根据标签名找
//alert(b[0]);

//var b = $("[id='aa']"); //根据属性找
//alert(b[0]);

//操作内容
//非表单元素
//b.html(); //操作元素里面的HTML代码
//b.text(); //操作元素里面的文本

//表单元素
//b.val("hello");

//操作属性
//设置属性
//b.attr("bs","test");
//获取属性
//alert(b.attr("aa"));
//移除属性
//b.removeAttr("aa");

//b.prop("checked",false);

//操作样式,可以获取内嵌的样式
//b.css("background-color","red");
//alert(b.css("width"));
//alert(b.css("background-color"));