jquery学习笔记
学而时习之,不亦说乎;从头整理一遍jquery学习知识点;
一、引用:
自己下载jquery文件引用:
<srctip src="XXX/jquery.js"></script>
使用其他网站的CDN:
如google:
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>
在HTML5中 已经默认javascript是所有浏览器的脚本语言 多以不必在script标签里写 type="text/script"
二、初次使用:
在js中写jquery:
文档加载完毕后才执行的jq:注意原始必须的代码,js代码写于function函数内;
$(document).ready(function(){ //js内容 });
如果文档没有完全加载之前就执行函数,某些操作可能会失败(如选择器所选择的元素为找到);
添加事件方法(以click()方法为例):
$("div").click(function(){ //事件内容 });
三、jQuery 语法
基础语法是:$(selector).action() //$选择器选择selector 执行action()方法;
$(this).hide(); //隐藏当前元素
$("p").hide(); //隐藏所有段落
。。。。。。
四、jquery选择器:
通过jQuery选择器来精确的找到所要操作的元素(类似于css选择器);
JQuery可以通过元素的标签、属性、内容对HTMl元素进行选择;
1、元素选择器:
jQuery使用css选择器来选取HTML元素;
$("p.intro") 选取所有class=“intro”的p元素
2、属性选择器:
jQuery使用XPath表达式来选择带有给定属性的元素:
$("[href]") 选取所有带有href属性的元素;
$("[href='#']") 选取所有带有href切值为“#”的元素
$("[href!='#']") 选取所有带有href且值不等于“#”的元素
$("[href$='.jpg']") 选择所有带有href且值以.jpg结尾的元素
3、Css选择器:
$("P").css("backgeound-color","red");
4、其他选择器:
$(this) 当前HTML元素
$("p") 标签选择器
$("p.intro") calss等于intro的p元素
$("#intro") id选择器
$("ul li:first") ul 下的第一个li
$("div#intro .head") id=intro的div下所有class=head的 元素
五、jQuery事件
1、jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
Event 函数 | 绑定函数至 |
---|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
更多事件请参考jQuery手册;