jQuery快速入门
jquery快速入门
jQuery的作用:1.取得页面中的元素;2.修改页面的外观;3.改变页面的内容;4.响应用户的页面操作;5.为页面添加动态效果;6.无须刷新页面即可从服务器获取数据;7.简化常见的js任务。
$是jquery专用的特殊符号,可以说所有jquery函数的调用都是从$开始的
$()在jquery里面表示一个选择器,括号里面填写一定的表达式就可以选中你想要的元素,jquery的选择器除了能很好地遵循css的表达式外,还额外提供了一些更个性化的选择方式,比如$("div li:nth-child(2)")选中的是div中的第2个li元素。
关于选择器的更多用法可以百度一下jquery的api
$(document)是一个选择器,选中的是整个html所有元素的集合。
$(function(){..})等于document.ready事件,即在页面所有元素准备完毕之后,载入页面之前执行本方法
$()在jquery里面表示一个选择器,括号里面填写一定的表达式就可以选中你想要的元素,jquery的选择器除了能很好地遵循css的表达式外,还额外提供了一些更个性化的选择方式,比如$("div li:nth-child(2)")选中的是div中的第2个li元素。
关于选择器的更多用法可以百度一下jquery的api
$(document)是一个选择器,选中的是整个html所有元素的集合。
$(function(){..})等于document.ready事件,即在页面所有元素准备完毕之后,载入页面之前执行本方法
----------------------------------------------------------------------------------------------------------------------------------
-
<html>
-
<head>
-
<script type="text/javascript" src="jquery.js"></script>
-
<script type="text/javascript">
-
$(document).ready(function(){
-
$("p").click(function(){
-
$(this).hide();
-
});
-
});
-
</script>
-
</head>
-
<body>
-
<p>If you click on me, I will disappear.</p>
-
</body>
-
</html>
以上案例解释:当按钮的点击事件被触发时调用相关函数。
$(document).ready(function)
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档,因此无需选择器。
----------------------------------------------------------------------------------------------------------------------------------------------
从此处开始,进入jquery代码快。
$("p").click(function(){}
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
----------------------------------------------------------------------------------------------------------------------------------
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:
实例
$("p").css("background-color","red");
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
最简单的情况下,$.ajax() 可以不带任何参数直接使用。
注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。