4011—JQuery随笔

一、DOM选择元素

          标签元素（div、a、p）写前面加空格，类名称要加点，id名称加#号。

          符号说明

•           【>】为选择直系第一代后代，而非全部后代。

         1—class选择 

/*
  div标签类型，poem-stanza为div的class类型名称
  <div class="poem">
     <div class="poem-stanza">
     </div>
  </div>      
*/
$('div.poem-stanza').addClass('highlight');

       2—标签选择

/*
  <div id="selected-play">
    <ul>
        <li>伍百里</li>
        <li>伍千里</li>
        <li>伍万里</li>
        <li>梅生</li>        
    </ul>
  </div>
*/
$('#selected-plays > li').addClass('horizoutal');
//选择未指定horizoutal class样式的li标签，指定class样式
$('#selected-plays li:not(.horizoutal)').addClass('sub-level');

       3—属性选择

/*
   <a href="mailto:wuqianli@military.cn"></a>
   <a href="ChangJinLake.pdf"></a>
   <a href="http://bettleOfLake-changjin.mov.cn"></a>
*/
//属性值，匹配开头
$('a[href^="mailto"]').addClass('mailto');
//属性值，匹配结尾
$('a[href$=".pdf"]').addClass('pdflink');
//属性值多匹配，条件1—开头，条件二—任意位置
$('a[href^="http"][href*="changjin"]').addClass('henrylink');

      4—自定义选择符

/*
   <table>
        <tr>  <td>20军</td><td>预备队</td>
        </tr>
        <tr>  <td>26军</td><td>主攻</td>
        </tr>
        <tr>  <td>27军</td><td>助攻</td>
        </tr>
   </table>     
*/
//even—为奇数，odd—偶数；会循环页面内全部tr标签
$('tr:even').addClass('alt');
//过滤用法
$('tr').filter(':even').addClass('alt');

//范围为元素的父元素下的元素集合，也是唯一索引值从1开始的选择符。
$('tr:nth-child(odd)').addClass('alt');

//上下文内容选择符
$('td:contains(27)').addClass('highlight');

//表单选择，取已点击的单选框的元素
$('input[type="radio"]:checked').addClass('highlight');

//location.hostname一般为localhost
$('a').filter(function(){
    return this.hostname && this.hostname !=location.hostname    
}).addClass('external');

//筛选的单元格的下一个兄弟元素
$('td:contains(27)').next().addClass('highlight');
//筛选的单元格后面的所有元素
$('td:contains(27)').nextAll().addClass('highlight');
//.prev()指定元素的上一个；.prevAll()指定元素的前面所有兄弟元素
//指定单元格及后面所有单元格应用样式
$('td:contains(27)').nextAll().addBack().addClass('highlight');

    5—连缀

/*
    parent—取元素集的父元素
    find('td:eq(1)')—查找第2个单元格
    end()—恢复父元素位置
    find('td:eq(2)')—查找第3个单元格        
*/
$('td:contains(27)').parent().find('td:eq(1)')
  .addClass('highlight').end().find('td:eq(2)')
  .addClass('highlight');

    6—访问DOM元素 

/*
   获取id=mynode属性的元素的标签名称
   下面2句是等价的 
*/
var myTag=$('#mynode').get(0).tagName;
var myTag=$('#mynode')[0].tagName;

   7—this与$(this)  

//this为javascript的关键字，为html指代元素
var sid=this.target.id;
//$(this)为jQuery的关键字，为jquery指代元素
$(this).css('display','none');
//典型错误和注意点
var node=$('#myapp');
node.click(function(){
   this.css('display','block');     //错误。css为jQuery的方法。html元素不能调用jQuery方法。
   $(this).css('display','block');  //正确。
   this.style.display='block';      //正确。js语法。
})

    jQuery已经封装了DOM很多方法和属性，一般使用$(this）是不错的选择。

    但不要滥用$(this）。

    11—后代选择

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a>         </li>
    <li><a href="#">配置</a></li>
    <li>
        <a href="#">信息栏<span id="badge" class="badge">11</span></a>
    </li>
</ul>

//下面三组选择命令等价
//   格式1
//   $('.nav-pills li a span').each(function(index){          
//    格式2
//    $('.nav-pill>li span').each(function(index){ 
//    格式3
//$('.nav-pills a>span').each(function(index){
      console.log(index);
      console.log($(this).text());
    })

 解释：略。

二、事件

    1—页面加载函数

//    2种方法是等价的
$(document).ready(function(){
})
$(function(){
})

/* windows.onload与$(document).ready()异同
   多个$(document).ready()执行会依次执行；而windows.onload也可以注册多个函数，不能保证按顺序执行
*/

    2—事件捕获、阻止和阻止默认操作

//阻止事件捕获和阻止默认操作是相互独立的两套机制
$('#node').click(function(event){
   //阻止事件捕获
   event.stopPropagation(); 
   //阻止默认操作，例如 <a>锚元素的，触发单击。
   event.preventDefault();
})