移动商务系统前端设计 微优品首页动态效果的实现 Jquery语法.ppt

Jquery的语法 2017年12月6日 芜湖职业技术学院 基本语法 1 简单案例分析 2 常见函数分析 3 方法与参数 4 目录 Contents 目录 案例分析 5 结 构 1 基本语法 语法：?$(selector).action( ) 组成: $（美元符号）：定义jQuery，“$（）”方法是jQuery库中最重要、最核心的方法。 选择符（selector）查询和查找 HTML 元素 action( ): 执行对元素的操作 简单案例 $(this).hide() - 隐藏当前元素 $(p).hide() - 隐藏所有 p 元素 $(p.mn).hide() - 隐藏所有 class=“mn”的 p 元素 $(#mn).hide() - 隐藏所有 id=“mn”的元素 $() 1 常见函数分析 1.$(expr) 该函数可通过CSS选择器、Xpath或HTML代码来匹配目标元素，所有的jQuery操作以此为基础。 Expr：字符串、一个查询表达式或一般html字符串。 2.$(elem) 限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象。 elem:通过jQuery对象压缩的DOM元素。 $() 1 基本语法 3.$(elems) 限制jQuery作用于一组特定的dom元素。 elems:一组通过jQuery对象压缩的DOM元素。 4.$(fn) $(document).ready()的一个速记方式，当文档全部载入时执行函数，可以有多个$(fn）当文档载入时，同时执行所有函数。 $(function(){$(document.body).background(“yellow”);}) $() 1 基本语法 5.$(obj) 复制一个jQuery对象。 Obj（jQuery) :要复制的jQuery 对象。 4. each(fn) 将函数作用于所有匹配的对象上。 fn(function):需要执行的函数。 img src=“1.jpg”/ a href=“#”id=“test”onclick=“jq()”jQuery/a Function jq(){$(“img”).each(function(){ this.src=“2.jpg”;});} 小结 01 02 03 执行匿名方法 $（function（）{ }）; //执行一个匿名方法。 执行ID元素选择 $（‘#mn’）; //执行ID元素选择 执行功能方法 $（‘#mn’）.css(‘color’, ‘red ’); jQuery中的方法和参数 01 方 法 方法的定义： Function namad( ) { // 要执行的内容 } Function 是定义方法的关键字；name 是方法的名字，（）可带参数；{}是方法体，里面书写要执行的代码。 $(document).ready(function)( ){ //执行代码 }）； jQuery中的方法和参数 02 关键字 This关键字： $(document).ready(function( ) { // 这里调用this的话是指 window.document }); $(div).click(function( ) { // 这里调用this的话是指 div }); 案例分析 03 案例分析 案例分析： !DOCTYPE html htmlheadscript src=../jquery-3.1.1.js /script script $(document).ready(function(){ $(button).click(function(){ $(div).animate({ left:250px, opacity:0.3, height:100px, width:100px }); }); }); /script /head 案例分析 04 案例分析 案例分析： body button单击动画开始/button pdiv的大小和位置变化/p div style=background:#00ff00;height:200px;width:200px; position:absolute; /div /body /html 谢谢观看！ * * * * * *