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 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX 向页面添加 jQuery 库 ： <script type="text/javascript" src="jquery.js"></script> jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 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(){ ...... }); <body> <input id="btn" type="button" value="click me !" /> <input class="class_btn" type="button" value="class_btn" /> <p>我是Arry老师</p> <!--如果你要是用jquery的语法函数和方法，必须引入jquery官方类库--> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <script type="text/javascript"> /* $(document).ready(function(){ // 在js中 获取元素的对象 var btn = document.getElementById("btn"); // 在jquery中 获取元素对象 $("#btn"); // id样式 $("#btn").click(function(){ $(this).hide(); }); // 通过类样式 绑定点击事件 $(".class_btn").click(function(){ $(this).hide(); }); // 元素 $("p").click(function(){ $(this).hide(); }); }); // js 的函数，必须是当调用它的时候才会执行 function btn(){ alert(0); } */ </script> </body>
选择器允许对元素组或单个元素进行操作 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 属性<body> <div> <p>我是<p>段落</p> 1</p> <p>我是<p>段<p>落</p>1111<p>1<p>1</p>1</p>11</p> 2</p> <p></p> <p>dddd</p> </div> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> var obj = $("div > p"); $(document.body).css("background", "#669900" ); var p = $("div > p").length; // alert(p); </script> </body>
jQuery 是为事件处理特别设计的 jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用 例： <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("test").hide(); }); }); </script> 单独文件中的函数: 也可以直接把 函数添加到单独的文件中 jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数，同样使用 $ 符号 <body> <span id="test">我是Ming！</span> <input type="button" value="click me !" id="btn"/> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> /* $(document).ready(function(){ $("#btn").click(function(){ $("#test").text("那么多美女喜欢 没什么了不起的！！"); }); }); */ jQuery(document).ready(function(){ jQuery("#btn").click(function(){ jQuery("#test").text("那么多美女喜欢 没什么了不起的！！"); }); }); </script> </body>