JQuery的基础知识和选择器

JQUERY官方网站
  http://jquery.com/

jquery-1.4.min.js和jquery-1.4.js的区别？
jquery-1.4.min.js--》如果服务器开启GZip压缩后，大小将变为18KB，主要应用于产品和项目
jquery-1.4.js---》完整无压缩版本，主要用于测试、学习和开发


$(document).ready(function(){});和window.onload的区别？
window.onload
必须等待网页中的所有内容加载完毕后才能执行
在页面代码中不能同时编写多个，如果有两个，则只会输出最后一个
没有简写


$(document).ready
网页中的所有的DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完
可以写多个，都会执行
可以简写为： $(function(){})  $().ready

对于有些东西是需要都加载完才触发，可以用$(widow).load(function(){})等价于window.οnlοad=function(){}


书写规范：
对于链式操作，
对于同一个对象不超过3个操作的，可以直接写成一行
对于同一个对象的较多操作，建议每行写一个操作
对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当的缩进。

jquery对象
通过Jquery包装DOM后产生的的对象。
  如果一个对象是Jquery对象，那么就可以使用jquery方法
如：$("#foo").html();
等同于： document.getElementById("foo").innerHTML;

如果获取的是Jquery对象，
var $varible=Jquery对象
如果获取的是DOM对象
var varible=Jquery对象

Jquery对象和DOM对象如何进行互相转换呢？
1.jquery对象如何转换为DOM对象
(1)jquery对象是一个数组对象，可以通过INDEX的方法得到相应的DOM对象
  var $cr=$("#cr");
  var cr=$cr[0];
  alert (cr.checked);
 (2)通过jquery本身来取得
  var cr=$cr.get(0);
2.DOM对象转换成JQUERY对象
  var cr=document.getElementById("cr");
  var $cr=$(cr);

.is(":checked")方法确定函数是否被选中？
if ($cr.is(":checked"))
{
alert ("getMessage");
}


Jquery库中的插件都被限制在它的命名空间中，因此和其他的javascript库一起使用时，不会引起冲突
怎么解决JQUERY和其他JavaScript库中使用的冲突问题？
1.在代码开始处调用
  jQuery.noConflict();
底下用到Jqery的必须用Jquery代替原来写的$了；
2.重定义其他字符来代替$
  在代码开始处
   var  $j=jQuery.noConflict();
   $j("p").click();


怎么让Dreamweaver智能提示Jquery？
首先下载一个叫Jquery_API.mxp的插件-》
在Dewamweaver中依次选择命令-》扩展管理-》安装扩展-》选择到下载的插件，就会自动安装了

中间会有一个问题：可能你看到的扩展管理是灰色的怎么办？
因为你的Dreamweaver没有安装扩展管理器，去下载一个Extension Manager安装下，就OK了


如何让VS2008智能提示Jquery？
1.首先http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
下载补丁KB958502 - JScript Editor support for “-vsdoc.js” IntelliSense doc. files
安装后

安装过程中可能会出现下一步无法点击为灰色，则需要下载VS2008SP1CHSX1512981.iso，此为vs2008的sp1补丁，安装这个之后再安装上面的补丁
2
到http://docs.jquery.com/Downloading_jQuery#Download_jQuery
下载jquery-1.3.2-vsdoc2.js和jquery-1.3.2.js 如果是mini版本的，请将mini后缀取消，，并且，将jquery-1.3.2-vsdoc2.js改名为jquery-1.3.2-vsdoc.js
否则会报更新 JScript IntelliSense 时出错，并且将jquery-1.3.2.js和query-1.3.2-vsdoc.js的文件放在一个目录，这下，只要你的页面引入jquery-1.3.2.js，
界面就支持智能提示了

假如你起名为jquery.min.js，则要将vsdoc文件名修改为jquery.min-vsdoc.js才可以，注意名称的统一性

CTRL+SHIF+J 强制vs2008进行智能提示的更新

资源：
Visual Studio 2008 SP1 补丁： http://download.microsoft.com/download/1/9/d/19d22169-a4b2-455f-8c28-ed137bd91487/VS2008SP1CHSX1512981.iso ，
         jQuery相关文件（jQuery-1.3.2.js，jQuery-1.3.2-vsdoc.js）：

http://docs.jQuery.com/Downloading_jQuery#Download_jQuer y

CSS应用到网页上有三种方式
行间样式表、内部样式表、外部样式表

判断某个元素是否存在
  if ($("#demoId").length > 0) {
              $("#demoId").css("color", "red");
          }

怎么同时选中不同标识的对象呢？
$("div,span,p.myClass") --->选取所有div,span和拥有class为myClass的P标签的一组对象



层次选择器
$("div span")---> 选取div里所有的span元素，选取的是后代元素

$("div>span")--->选取div元素下元素名是span的子元素，选取的是子元素

$('.one+div')--->选取class为one的下一个div元素


$('#two~div')--->选取id为two的元素后面的所有div兄弟元素

$("body span")和$("body>div")的区别是什么？也就是后代元素和子元素的区别？

$("body div>选取的是body里面所有的div标签对象
$("body>div") 选取的是body里面所有的第一层标签对象里面包含了div标签的对象


使用$(".one").next("div")来代替$('.one+div')
使用$("#two").nextAll("div")来代替$('#two~div')---->选择所有在two之后的DIV对象
$("#two").siblings("div")  选择所有和two同一辈的div元素



过滤选择器
1.基本过滤器
 $("div:first") 选取所有div元素中的第一个div对象
 $("div:last") 选取所有div元素中的最后一个div对象
$("input:not(.myClass)") 选取class不为myClass的input对象
$("input:even") 选取索引是偶数的input对象
$("input:odd") 选取索引是奇数的input对象
$("input:eq(1)") 选取索引等于1的input对象
$("input:gt(1)") 选取索引大于1的input对象
$("input:lt(1)") 选取索引小于1的input对象
$(":header") 选取所有h1,h2,h3等对象
$("div:animated") 选取正在执行动画的div元素
也可以写为      $(':animated').css("background","#bfa"); 选择 当前正在执行动画的所有元素.

2.内容过滤选择器
$('div:contains(di)').css("background","#bbffaa");  //选取含有文本"di"的div元素.
 $('div:empty').css("background","#bbffaa");  //选取不包含子元素(或者文本元素)的div空元素.
 $('div:has(.mini)').css("background","#bbffaa"); //选取含有class为mini元素 的div元素
 $('div:parent').css("background","#bbffaa"); //选取含有子元素(或者文本元素)的div元素.

3.可见性过滤器

$('body :hidden') 不可见的元素有
$('div:hidden')不可见的div元素
$('input:hidden') 文本隐藏域

  $('div:visible').css("background","#FF6500");  //选取所有可见的元素.

<代表< 
>代表> 

4.属性过滤器
 $('div[title]').css("background","#bbffaa");//选取含有 属性title 的div元素.
$('div[title=test]').css("background","#bbffaa");//选取 属性title值等于 test 的div元素.
 $('div[title!=test]').css("background","#bbffaa");  //选取 属性title值不等于 test 的div元素.
  $('div[title^=te]').css("background","#bbffaa");//选取 属性title值 以 te 开始 的div元素.
$("div[title$=est]").css("background","#bbffaa"); //选取 属性title值 以 est 结束 的div元素.
  $("div[title*=es]").css("background","#bbffaa"); //选取 属性title值 含有 es  的div元素.
$("div[id][title*=es]").css("background","#bbffaa");//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.

5.子元素过滤选择器
$('div.one :nth-child(2)').css("background","#bbffaa"); //选取每个class为one的div父元素下的第2个子元素."
 $('div.one :first-child').css("background","#bbffaa");//选取每个class为one的div父元素下的第一个子元素
  $('div.one :last-child').css("background","#bbffaa");//选取每个class为one的div父元素下的最后一个子元素
$('div.one :only-child').css("background","#bbffaa"); //果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

nth-child(index)与eq(index)的区别？
eq只能代表一个对象，他的index从0开始
而nth-child可代表一个对象组，他的index是从1开始的

注意：
$('div.one :nth-child(even)')//能去每个父元素下的索引值是偶数的
$('div.one :nth-child(odd)')//能去每个父元素下的索引值是奇数的
$('div.one :nth-child(2)')
$('div.one :nth-child(3n)')//能去每个父元素下的索引值是3的倍数的 n从0开始
$('div.one :nth-child(3n+1)')//能去每个父元素下的索引值是3n+1的 n从0开始

6.表单对象属性过滤选择器
  $("#form1 input:enabled").val("这里变化了！"); //对表单内 可用input 赋值操作.
  $("#form1 input:disabled").val("这里变化了！");   //对表单内 不可用input 赋值操作.
 $("select :selected").text()//使用:selected选择器，获取下拉框选中的内容
 var n = $("input:checked")//使用:checked选择器，来操作多选框



表单选择器
        var $alltext = $("#form1 :text");
        var $allpassword= $("#form1 :password");
        var $allradio= $("#form1 :radio"); 
        var $allcheckbox= $("#form1 :checkbox"); 
    var $allsubmit= $("#form1 :submit");
    var $allimage= $("#form1 :image");
    var $allreset= $("#form1 :reset");
    var $allbutton= $("#form1 :button");  // <input type=button />  和 <button ></button>都可以匹配
    var $allfile= $("#form1 :file"); 
        var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.  
        var $allselect = $("#form1 select"); 
        var $alltextarea = $("#form1 textarea");
       var $AllInputs = $("#form1 :input");   
var $inputs = $("#form1 input");  
  $("div")      .append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")   
                .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")   
        .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")       
                .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")       
            .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")       
                .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")       
            .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")       
            .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")   
        .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")       
            .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")       
            .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")       
            .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")   
        .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")   
        .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")   
        .css("color", "red")   
 $("form").submit(function () { return false; }); // return false;不能提交.


选择器中的特殊符号问题：
假如：
<div id="id#b"></div>
<div id="id[1]"></div>

那么jquery怎么获取呢？
$("#id//#b")
$("#id//[b//]")

空格问题？
var $t_a=$(".test :hidden")//选取class为test的元素里面的隐藏元素
var $t_a=$(".test:hidden")//选取隐藏的class为test的元素