一 注意：
1.DOM对象：通过原生js获取的DOm对象（DOm树上的节点就是，比如
）2.jQuery对象：通过jQuery 选择器获取的
jQuery对象智能用jQuery中封装的方法，不能使用DOm对象的方法 同理 DOm也是一样
二 选择器相互更换：
1.DOM转换成JQ对象 $(“DOM对象”)
2.JQ对象转换成DOM对象 $("div")[index] 或者 $("div").get(index)三 基本选择器
1. #id > $("#id名"), 2. .class > $(".class名") 3. element标签 > $("div") 4.群组选择器 > $("div,p") 5.* > $("*")
四 后代选择器 子元素选择器 紧邻的同辈选择器
1.$("#id li"), 这个是所有的后代
2. $("#id > li"), 这个是只查到儿子为止
3. $("#id + p ") 紧挨着#id 后面的p元素
4. $("#id ~ p ") 在#id 后面的同辈兄弟p元素五.表单元素选择器
三 属性添加 1. 添加css
$(".bb").css({ color:"red", width:"100px", height:"100px", background:"orange"})
获取css
console.log($(".p2").css("width")) 在这里获取到css样式内容 要提取数字 parseInt 2.添加属性和查看属性
固有属性：id class src href title type alt value .attr支持固有和自定义 ，.prop 只支持固有（判断checkbox动态返回true和false） $('img').attr('src','1.jpg') 这种就是给img添加属性，[这个最好给固有属性添加]，
($("div").attr('class')); 获取这个对象的class属性
$("#ccc").removeAttr("class") 删除样式延伸 点击哪个按钮 下面img分别显示不同的图片 console.log($(this).css(["width","background"])) 同时查看两个属性。200px
console.log($(this).width()) 200 Number
width（）content，innerWidth（）content+padding，outerWidth() content+padding+border，outerWidth(true) content+padding+border+margin，
console.log($(this).css("left")) 350px console.log($(this).offset().left) 358 [相对窗口] console.log($(this).position().left) 350 【相对有定位的父级】
arr.join(",")拼接字符串
p2 内容
p3 内容
p4 内容
p5 内容
可以设置多个值
$("img").attr({ src: "test.jpg", alt: "Test Image" });
在原生js中 document.getElementsByTagName("INPUT")[0] . setAttribute("type","button");
五 获取屏幕尺寸 偏移相关$.offset().left 是指当前元素距离文档左边多少距离 var left=($(".p2")r.offset().left;
var top1=($(".p2").offset().top;
注意 $.position().left 这个才是获取 css中left的值
六 加载完DOM 再执行函数：
winodw.onload=function(){} 所有包含图片加载完，然后再执行 效率低 而且只能使用一次。
$(document).ready( fn) 简写 $(fn) 可以使用多次。