JQuery 简介

关键字：

JQuery       一个 JavaScript 库，兼容多浏览器的javascript框架

核心理念是write less,do more(写得更少,做得更多)同时也是免费、开源的，使用MIT许可协议

模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页

美元符号$   定义(代替)JQuery

知识点：

jQuery 库特性

HTML 元素选取,

操作,

事件函数

,

CSS 操作

,

JavaScript 特效和动画,

HTML DOM 遍历和修改,

AJAX

引入 jQuery 库

当不影响页面功能时应放在body结束之前以提升速度，一般情况放在head中

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

基础语法

   
   
$(selector).action()

选择符（selector） “查询”和“查找” HTML 元素

action()                   执行对元素的操作

   
   
$(this).hide();    隐藏当前元素
$("xxx").hide();   隐藏所有该标签下的内容
$(".xxx").hide();  隐藏所有class="xxx"的所有元素
$("#xxx").hide();  隐藏所有id="xxx"的元素

文档就绪函数

防止文档在完全加载（就绪）之前运行 jQuery 代码

   
   
$(document).ready(function(){
    xxx
});
$(function(){
    xxx
});

jQuery 选择器

选择器允许对元素组或单个元素进行操作

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素

   
   
$("[href]")            选取所有带有 href 属性的元素
$("[href='#']")       选取所有带有 href 值等于 "#" 的元素
$("[href!='#']")      选取所有带有 href 值不等于 "#" 的元素
$("[href$='.jpg']")  选取所有 href 值以 ".jpg" 结尾的元素

jQuery CSS 选择器

jQuery 使用 CSS 选择器来选取 HTML 元素

    
    
$("p")            选取 <p> 元素
$("p.intro")    选取所有 class="intro" 的 <p> 元素
$(".intro p") 选取class="intro"下的所有<p> 元素 
$("p#demo")     选取所有 id="demo" 的 <p> 元素
document.getElementById(id).attribute=new value;

jQuery 事件

jQuery 事件处理方法是 jQuery 中的核心函数

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法

   
   
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
     $("test").hide();
  });
});
</script>

jQuery 名称冲突

某些其他 JavaScript 库中的函数，同样使用 $ 符号，应注意区分

源码对应：

JQuery               JQuery库、安装

JQuery-select    JQuery选择器

JQuery-action   JQuery事件

JQuery-click      JQuery点击事件