jQuery视频(10)

 1.将常用的js方法封装.
2.主要功能
  1.访问页面框架的局部,选择某个节点或者某一类节点.
    jQuery简化了这个操作.
  2.修改页面的表现(Presentation)css3的兼容.
  3.更改页面的内容.插入,整个框架.
  4.响应事件,jQuery可以轻松实现,并且不用考虑浏览器兼容性问题.
  5.为页面添加动画.提供大量可自定义参数的动画效果.
  6.与服务器异步交互,ajax
  7.简化常用的javascript操作.数组操作,迭代运算.
3.隔行变色的表格
  1.css定义
    .class1 td {}
  2.js直接处理.
window.onload = function(){
 var oTable = document.getElementById("oTable");
 for(var i=0;i<oTable.rows.length;i++){ //js的Table类型rows.length
  if(i%2==0)  //取模
   oTable.rows[i].className = "altrow"; //rows[i].className
 }
}
  3.jQuery的方法
$(function(){ //简化的onload()事件.
 //table.datalist选择了class="datalist"的表格
 //tr:nth-child(cdd)选择了偶数行,???
 $("table.datalist tr:nth-child(cdd)").addClass
});

4.选择器$
window.onload = function(){
 var oElements = $("h2 a");
 for(var i=0;i<oElements.length;i++)
  oElements[i].innerHTML = i.toString();
}
5.trim
var sString = "    1234   ";
sString = $.trim(sString);
alert(sString.length);
6.window.onload在页面全部加载后才能执行.
$(document).ready(function(){
 //解决了冲突问题,并且可以多次使用.
});
简写$(function(){});
7.创建dom元素
$(function(){
  var oNewP = $("<p>这样子就简单创建了元素</p>");
  oNewP.insertAfter("myTarget");//找到这个元素,插入在下面.
});
8.css3选择器
//空格设置父子关系,:has(a)
$("ul li ul li:has(a)").addClass("myClass");
<ul><li>
  <ul><li> 没有a </li></ul>
  <ul><li> <a>链接</a> </li></ul>
  <ul><li> <a>链接</a> </li></ul>
</ul></li>
9.位置选择器lt(2)即第三个标记之前.
$("p:lt(2)").addClass("myClass");
<div>
 <p>1</p>
 <p>2</p>
</div>
<div>
 <p>3</p>
 <p>4</p>
</div>