jQuery

89443062 2017-03-13

1.jQuery 库的特性

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性:

(1)HTML元素选取

(2)HTML元素操作

(3)css操作

(4)HTML事件函数

(5)JavaScript特效和动画

(6)HTML DOM遍历和修改

(7)AJAX

(8)Utilities

 2.在HTML中引入jQuery库:

<head>
<script src="/jquery/jquery-1.11.1.min.js">
</head>

 如果没有下载到公共文件中,可以直接同过地址引用它。

使用Google的CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.8.0/jquery.min.js"></script>
</head>

使用Microsoft的CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.8.0.min.js"></script>
</head>

 3.在HTML中引入外部js文件:

<script type="text/javascript" src="{% static 'pos/js/pos.js' %}"></script>

 4.js文件中函数的语法:

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

文档就绪函数

你也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){

--- jQuery functions go here ----

});

 这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

5.jQuery实例:

$(document).ready(function(){    
  $("p").click(function(){
    $(this).hide();
  });
});     演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$(document).ready(function(){    
  $("p").click(function(){
    $(#test).hide();
  });
});    演示 jQuery hide() 函数,隐藏 id="test" 的元素。
$(document).ready(function(){    
  $("p").click(function(){
    $("p").hide();
  });
});    演示 jQuery hide() 函数,隐藏所有 <p> 元素。
$(document).ready(function(){    
  $("p").click(function(){
    $(".test").hide();
  });
});    演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。

相关推荐

Web全栈笔记 / 0评论 2020-06-15