`

jQuery快速入门避免少走弯路

阅读更多
一、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>nly-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/

分享到:
评论

相关推荐

    jquery快速入门实例

    【jQuery 快速入门实例】 jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。本教程将引导你快速入门jQuery,通过基础实例帮助你掌握其核心概念。 ### 1. jQuery 构造函数与 $...

    Jquery从入门到精通

    **jQuery入门** jQuery是一款高效、简洁的JavaScript库,它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。"jQuery从入门到精通"这个主题将带你全面了解和掌握这一强大的工具。 首先,...

    jquery从入门到精通

    jquery、javascript、入门到精通,jquery从入门到精通

    jQuery Mobile 快速入门

    ### jQuery Mobile 快速入门详解 #### 一、引言 随着移动互联网的快速发展,越来越多的应用和服务需要在各种尺寸的设备上良好运行。为了适应这种趋势,开发人员需要掌握能够跨平台使用的前端框架。jQuery Mobile ...

    jQuery Mobile快速入门.pdf

    jQuery Mobile快速入门.pdf

    jQuery Mobile快速入门完整版.pdf + 所有源码

    作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...

    jQuery经典入门教程

    jQuery经典入门教程,供学习交流,谢谢~

    jQuery Mobile快速入门,PDF书籍,源码

    jQuery Mobile快速入门,美国,BRAD BROULIK著,巩亚萍姚婷翻译,人民邮电出版社出版,全书10章,234页。1jquerymobile简介,2jquerymobile入门,3使用页眉工具栏和标签来导航,4表单元素和按钮

    jquery mobile快速入门

    jquery mobile快速入门 jquery mobile快速入门 jquery mobile快速入门 jquery mobile快速入门

    jquery 从入门到精通 葵花宝典

    jquery 从入门到精通 葵花宝典 ,新手必须掌握的一门技术,里面内容很全很好。

    jquer jquery mobile快速入门

    jquery mobile快速 jquery mobile快速入门入门 jquery mobile快速 jquery mobile快速入门入门

    jQuery基础入门pp

    jQuery基础入门pp

    jquery快速入门

    本篇教程将带你快速入门 jQuery,了解其基本概念和核心功能。 首先,jQuery 的引入很简单,只需要在 HTML 页面的 `&lt;head&gt;` 标签内加入一个 `&lt;script&gt;` 标签,引用 jQuery 的 js 文件。例如: ```html ...

    jQuery入门基础二.ppt

    jQuery入门基础二.ppt

    Jquery从入门到精通及附件下载(一)

    **jQuery入门基础** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个教程将引导你从零开始掌握jQuery的基本概念和使用方法。 1. **jQuery的选择器** ...

    JQUERY MOBILE快速入门 高清pdf

    本电子书适合新手和想了解jqm的人们,只供预览,请购买正版纸质书。

    JQUERY快速入门文档

    第一课 jquery ajax牛刀小试 1. 准备工作 下载jquery包,我放在和本文档相同的文件夹下了,安装很简单,把下载下来的jquery文件简单命名为jquery.js,然后复制到工程文件下的js目录里,就可以在页面中导入使用了。如...

Global site tag (gtag.js) - Google Analytics