第九节jquery基础-简介、安装语法选择器事件arry老师.pptx

第九节：JQuery 基础 JQuery简介、安装、语法、选择器、事件 Arry老师 JQuery 简介 jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多) jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。 jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程 学习JQuery，需要具备基本的基础知识： <1> HTML <2> CSS <3> Javascript JQuery库、安装 jQuery 库可以通过一行简单的标记被添加到网页中 jQuery 库 - 特性 jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX 向页面添加 jQuery 库 ： <script type="text/javascript" src="jquery.js"></script> jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数 jQuery 语法 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions） jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作 基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作 例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class="test" 的所有元素 $("#test").hide() - 隐藏所有 id="test" 的元素 文档就绪函数 , 注： 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码 $(document).ready(function(){ ...... }); jQuery 选择器 选择器允许对元素组或单个元素进行操作 jQuery 使用 CSS 选择器来选取 HTML 元素. 　语法: document.getElementById(id).attribute=new value $("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 选择器 可用于改变 HTML 元素的 CSS 属性 jQuery 事件 jQuery 是为事件处理特别设计的 jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用 例： <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("test").hide(); }); }); </script> 单独文件中的函数: 也可以直接把 函数添加到单独的文件中 jQuery 名称冲突 jQuery 使用 $