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事件,即在页面所有元素准备完毕之后,载入页面之前执行本方法
----------------------------------------------------------------------------------------------------------------------------------
 
 
  1. <html>

  2. <head>

  3. <script type="text/javascript" src="jquery.js"></script>

  4. <script type="text/javascript">

  5. $(document).ready(function(){

  6. $("p").click(function(){

  7. $(this).hide();

  8. });

  9. });

  10. </script>

  11. </head>

  12.  
  13. <body>

  14. <p>If you click on me, I will disappear.</p>

  15. </body>

  16.  
  17. </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");

jQuery快速入门

 

jQuery快速入门

 

jQuery快速入门

jQuery快速入门

 

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,$.ajax() 可以不带任何参数直接使用。

注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。