jquery 操作 DOM

一、认识JQUERY

1. jquery：用 js 封装的函数库
2. 大招：$ = jQuery
   $(selector) = 获取该选择器的 jQuery 对象数组
   $(selector).action(…) 群体操作特性
3. js 和 jquery 不可混用
   （1）js 的对象不可以访问 jquery 函数
   （2）jquery 的对象不可以访问 js 函数
   （3）但是 js 和 jquery 的对象之间是可以相互转化的
   var $obj = $(jsObj); js 对象转化为 jquery 对象
   var jsObj = $obj[0]; jquery 对象转化为 js 对象
   var jsObj = $obj.get(0);

二、jquery 操作 DOM
jquery 获取 html 标签对象
1、根据选择器获取:var $obj = $(selector);

2、根据家族关系获取：var $obj = …;
（1）获取子元素数组：var $objChilds = $obj.children(selector); 后代元素：
var $descendents = $(document).find(selector); 后代检索
（2）获取兄弟元素：
前置元素：
var $bigBros = $ref.prev(selector); 前一个(带有 selector选择器)的元素
var $bigBros = $ref.prevAll([selector]); 前所有(带有 selector选择器)的元素
var $bigBros = $ref.prevUntil([selector]); 前 n 个到selector结束之前的元素
后置元素：
var $littleBros = $ref.next(selector); 后一个(带有 selector选择器)的元素
var $littleBros = $ref.nextAll([selector]); 后所有(带有 selector选择器)的元素
var $littleBros = $ref.nextUntil([selector]); 后 n 个到selector结束之前的元素
其他兄弟：
var $otherBros = $ref.siblings([selector]); 除了自己以外的(带有selector) 的元素
（3）获取父级元素：var parentEl = re.parentElement;
varparent = $ref.parent([selector]); 父级元素
varparent = $ref.parent(selector]; 父辈元素
三、js 创建 html 标签对象
var $newEl = $(<div id="..." class="..." ...>...</div>);
四、js 操作 html 标签对象 var $el = …;
1、操作值
（1）表单元素的值：var val = $el.val(); $el.val(new_value);
（2）非表单元素的文本：var txt = $elt.text; el.text(new_txt);
（3）非表单元素的内部结构：var structor = el.html(); el.html(new_structor);
2、操作属性
（1）var attrVal = $el.attr(“attr_name”); el.attr(attr_name,new_attr);
3、操作样式
（1）具体样式：
$el.css("",“cssValue”);
$el.css({“cn1”:“cv1”,…,“cnn”:“cvn”});
（2）类选择器：
var bool = $el.hasClass(“classSelector”);
$el.addClass(“classSelector”);
$el.removeClass(“classSelector”);
$el.toggleClass("classSelector");4、操作子元素（1）添加子元素：el.append(tagEl);（2）删除元素：el.remove();五、事件、事件函数、事件绑定事件函数1.事件函数（1）click（2）keydown（3）keyup（4）keypress（5）focus（6）blur（7）mouseenteronmouseover（8）mouseleaveonmouseout（9）mousemove（10）scroll2.事件函数：就是没有参数，没有返回值的普通函数3.如何捆绑：静态绑定（1）$(selcetor).click(function);
（2）$(selcetor).hover(enterFunc,leaveFunc);动态绑定（3）$(document).on(eventName,selector,eventFunc);