一、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 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。本教程将引导你快速入门jQuery,通过基础实例帮助你掌握其核心概念。 ### 1. jQuery 构造函数与 $...
**jQuery入门** jQuery是一款高效、简洁的JavaScript库,它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。"jQuery从入门到精通"这个主题将带你全面了解和掌握这一强大的工具。 首先,...
jquery、javascript、入门到精通,jquery从入门到精通
### jQuery Mobile 快速入门详解 #### 一、引言 随着移动互联网的快速发展,越来越多的应用和服务需要在各种尺寸的设备上良好运行。为了适应这种趋势,开发人员需要掌握能够跨平台使用的前端框架。jQuery Mobile ...
jQuery Mobile快速入门.pdf
作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...
jQuery经典入门教程,供学习交流,谢谢~
jQuery Mobile快速入门,美国,BRAD BROULIK著,巩亚萍姚婷翻译,人民邮电出版社出版,全书10章,234页。1jquerymobile简介,2jquerymobile入门,3使用页眉工具栏和标签来导航,4表单元素和按钮
jquery mobile快速入门 jquery mobile快速入门 jquery mobile快速入门 jquery mobile快速入门
jquery 从入门到精通 葵花宝典 ,新手必须掌握的一门技术,里面内容很全很好。
jquery mobile快速 jquery mobile快速入门入门 jquery mobile快速 jquery mobile快速入门入门
jQuery基础入门pp
本篇教程将带你快速入门 jQuery,了解其基本概念和核心功能。 首先,jQuery 的引入很简单,只需要在 HTML 页面的 `<head>` 标签内加入一个 `<script>` 标签,引用 jQuery 的 js 文件。例如: ```html ...
jQuery入门基础二.ppt
**jQuery入门基础** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个教程将引导你从零开始掌握jQuery的基本概念和使用方法。 1. **jQuery的选择器** ...
本电子书适合新手和想了解jqm的人们,只供预览,请购买正版纸质书。
第一课 jquery ajax牛刀小试 1. 准备工作 下载jquery包,我放在和本文档相同的文件夹下了,安装很简单,把下载下来的jquery文件简单命名为jquery.js,然后复制到工程文件下的js目录里,就可以在页面中导入使用了。如...