JS-8：juery样式操作 节点 事件

一， 操作样式

1. 操作样式

1.1. css(“attr”,“value”)

为元素设置css样式，参数为css属性名和对应的属性值，如果参数只有属性名，表示读取css样式。

$('h1').css("color","red").css("background","green");

1.2. css(JSON对象)

JSON对象语法：

1. 使用{}表示对象
2. 对象由属性和值组成（css属性与值）
3. 属性与值都使用字符串表示，之间使用 : 分隔
4. 多组属性之间，使用逗号隔开。

$("p").css({
    "width":"200px",
    "height":"200px",
    "text-align":"center",
    "line-height":"200px",
    "background":"orange"
});

示例见：01-css().html

二，节点的层次方法

根据层次关系获取节点对象。

children() / children(“selector”)

获取当前节点下所有的直接子元素 / 或者获取当前节点下，满足选择器的所有直接子元素。

parent()

获取当前节点的父元素。

parents(“selector”)

获取父元素及祖先元素，或者获取指定选择器的祖先元素。

find(“selector”)

必须指定选择器参数，获取包含【直接】和】间接】的所有的后代元素。

next() / next(“selector”)

获取下一个兄弟元素 / 或获取指定选择的兄弟元素。
参考：相邻兄弟选择器(只找紧挨着的下一个，不满足的话不会往下继续)。

prev() / prev(“selector”)

获取上一个兄弟元素 / 或获取指定选择的兄弟元素。
参考：相邻兄弟选择器(只找紧挨着的下一个，不满足的话不会往下继续)。

siblings() / siblings(“selector”)

获取所有的兄弟元素 / 或获取满足选择器的所有兄弟元素。

示例：02-parent.html

三， 节点操作(创建，添加，删除)

1. 创建节点

$("标签语法")

示例：

  var $div = $('<div></div>');
  $div.html("");
  $div.attr("id","box").css();
  
  //-------------
  var $h1 = $("<h1 id='d1' class='.c1>一级标题</h1>'");
  $h1.css();

2. 添加节点

2.1 内部添加(作为子元素添加)：

1. $obj.append($new);
将$new作为$obj的最后一个子元素添加。  

2. $obj.prepend($new);
将$new作为$obj的第一个子元素添加。

2.1 外部添加(作为兄弟元素添加)

1. $obj.after($new);
将$new作为$obj的后一个兄弟元素添加。  

2. $obj.before($new);
将$new作为$obj的前一个兄弟元素添加。  

3. 删除节点

$obj.remove();
删除$obj.

示例：03-append().html

四， 事件处理。

1. 等待文档加载完毕(onload)

原生js加载方法 onload：
window.onload = function () { };

jQuery加载的三种写法， ready:

1.  $(document).ready(function(){  });
2.  $().ready(function (){  });
3.  $(function (){  });

原生与jQ中onload的区别：

1. 原生onload事件函数不能重复调用，重复书写，后面的代码会将前面的onload覆盖掉。
2. jQuery中优化了ready方法，可以重复使用，不会产生覆盖问题，所有的代码都会执行。

2. 事件绑定

原生事件处理函数不变，jQuery提供了新的绑定方式。

1.  $obj.事件函数名 (function(){ });
    事件函数名省略on 前缀。 
    如： $div.click(function(){ })

2.  $("p").bind("事件函数名",function(){ });
    如:  $("p").bind("click",function(evt){ });
    bind()方法的底层实现：  
    $div.on("click",function(){ });         

3. 事件对象

jQ获取事件对象的方式及相关的属性，同JS。
浏览器自动将事件对象以参数形式传递到函数中。