jQuery快速入门避免少走弯路

分类:Javascript| 发布:camnprbubuol| 查看: | 发表时间:2012/8/2

一、JQuery的环境配置

1、JQuery分为压缩版和非压缩版

2、$=JQuery

3、$(document).ready(funtion(){});  相当于 $(function(){});

4、注释用//

5、DOM对象与JQuery对象的相互转换

    var $variable (jquery对象) =$(variable)(Dom对象);

    var variable(Dom对象)=$variable[0]或$variable.get(0)  (JQuery对象)

6、与其他JS库冲突的解决(主要是$符号谁生效的问题)

   [1]、在其他库之后导入

          使用前:先调用jQuery.noconflict(); ————$会被释放给jQuery库, 就是说在使用jquery库之前先声明一下 "我下面要用的是jquery的用法,$符号代表jquery了"

   [2]、在其他库之后导入

         不必调用jQuery.noconflict(); ,直接用就行了

 

 

二、JQuery选择器

 

1、CSS是找到元素后添加样式,jQuery是找到元素后添加行为

2、jQuery选择器的优势:

     [1]简洁的写法

     [2]支持CSS1到CSS3的选择器

     [3]完善的处理机制,即使元素不存在也不会像JS一样报错

3、判断某元素是否存在的方法

     if($("#tt").length>0)或者 if($("#tt")[0])            而不要用if($("#tt")!=null),因为永远不为空。

4、原生js中查找或获取元素的方法

     getElementById("id")  如 id="one"

     getElementByName("name") 如多选按钮的 name="check"

     getElementByTag("tagname")  如<a>、<span>等html标签

5、选择器的分类

基本选择器

层次选择器

过滤选择器

表单选择器

6、基本选择器

<1> $("#test")  id选择器

<2> $(".test")  类选择器

<3> $("p") 标签选择器

<4>$("*") 选择所有元素

<5>$("div,span,.myclass") 组合

 

7、层次选择器

<1>$("div span")  选择div中  span后代元素

<2>$(“div >span”) 选择div中span的子元素

<3>$(“.one + div”)选one的下一个div元素————相当于$(“.one”).next("div")

<4>$("#two ~ div") 选id为two的后面所有<div>兄弟元素————相当于$(“#two”).nextAll("div");

 

8、过滤选择器

 

 

<1>$(" div:first") 所有div元素中第一个div 
<2>$(" div:last") 所有div元素中最后一个div
<3>$(" input:not(.myclass)") 不是 class为myclass 的<input>元素
<4>$(" input:even") 索引为偶数的input
<5>$(" input:odd")索引为奇数的input
<6>$("input:eq(1)") 索引为1的input——————index从0开始
<7>$("input:gt(1)")  索引大于1的input
<8>$("input :lt(1)") 索引小于1的input
<9>$(":header")  所有的<h1> <h2> <h3>......
<10>$("div:animated") 正在执行动画的<div>
<11>$("div:contains('我')")   含有文本‘我’的div
<12>$("div:empty")  空的div
<13>$(" div :has(p)")   含有<p>的<div>
<14>$("div:parent")       含有子元素的<div>
<15> $(":hidden")    所有不可见元素
<16>$("div:visible")   所有的可见的<div>
<17>$(" div[id]")      拥有id属性的<div>
<18>$(" div[title=test]")    title为test的<div>
<19> $ ("div [title!=test]") title不为test的<div>
<20> $(" div[title^=test]")    title以“test”开头的div
<21>$ ("div [title$=test]")    title以“test”结束的div
<22>$(" div[title*=test]")          title含有test的div
<23>$("div[id][title$=test]")     组合多条件选择

<24>:nth-child(index/even/odd/equation)  ————————index从1开始
<25>:first-child
<26>:last-child
<27> :only-child
<28> $("#form1 :enabled")            id为“form1”的表单内所有可用的元素
<29>$("#form2:disable")
<30>$("input:checked")         所有被选中的<input>元素
<31>$("select:selected")       所有被选中的<select>元素
<32>$(":input")                   所有<input> <textarea><select><button> 元素
<33>$(":text")                    所有单行文本框
<34>$(":password")           所有密码框
<35>$(":radio")                   所有单选框 
<36>$(":checkbox")             所有复选框
<37>$(":submit")               所有的提交按钮
<38>$(":image")          所有图像按钮
<39>$(":reset")              所有重置按钮
<40>$(":button")    所有按钮
<41>$(":file")            所有上传域
<42>$(":hidden")            所有不可见元素

 

 

 9、.click()事件中添加return false 可以使链接不跳转

10、添加与去除样式

       removeClass()

       addClass()

       这两个可以用一个toggleClass()来代替

 

11、要时刻记住,如果用户禁用了javascript后,你的页面是不能正常处理

12、toggle()方法交替一组鼠标点击的动作

      hover()方法交替一组鼠标滑过的动作

13、end() 方法可以返回到上一个可以操作的元素

 

《锋利的JQuery》是一本国内非常不错的JQuery入门书,基本上通读本书后对JQuery的精髓都能掌握了,稍后再通过多加实践应该能对Jquery有比较好的理解了。下面是笔者对整本书的读书笔记,也算是对全书主要内容的一个总结吧。

以上来源:http://www.cnblogs.com/ytaozhao/archive/2012/06/28/2567629.html

jQuery官方API地址http://api.jquery.com/

引用jQuery文件方法

方法一:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> (红色部分是版本号,比如改成早期的版本:1.4.3)

方法二:<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>

方法三:<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>(不用担心版本号了,随时是最新版本,^_^,速度相当没有google的CDN快点)

方法四:博客园:<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 等(例如网易,QQ等,毕竟google在天朝有失算的时候)

在线调试jQquery方法:

方法一:地球人都知道火狐有firebug,谷歌浏览器也有自己的Dev Tool,不常用IE或其他浏览器的。

方法二:这个蛮好用的,不仅包括jQuery,还有Mootools、Prototype、YUI、Glow、No-Library、Dojo、Processing、ExtJS、Raphael、RightJS、

Three、Zepto、Enyo、Shipyard、Knockout、The X Toolkit edge、AngularJS、Ember...

(搞没搞错,这么多js库╮(╯▽╰)╭)使用地址: http://jsfiddle.net/xEpGg/

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/javascript/jquery-simple-easy-study.html