• 1. JQuery培训(初级)
  • 2. 概述jQuery由美国人John Resig于2006年初创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaeffere ,罗马尼亚的Stefan Petre等等。 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可
  • 3. 谁在使用Jquery?
  • 4. JQUERY的特点轻量级:经GZip压缩后传输的代码文件仅14KB,未经压缩传送的代码文件仅26KB 链式语法 :$("p.surprise").addClass("ohmy").show("slow"); 强大的插件机制。 跨浏览器:支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+ 简单:较其它JS库更容易入门,中、英文档很齐全 ,学习容易,易用性高。
  • 5. 搭建JQuery开发环境http://jquery.com下载JQuery框架文件 无需安装,只需要导入导入页面即可 加入上述代码,即完成了jquery框架的引入。 单写一个标签,就可以使用jquery框架了。
  • 6. JQuery的基本语法: 1.$美元符,是JQuery程序的标志($=jQuery)。 2.可以通过$(document).ready(function(){})的方式来定义页面装载完成时,需要执行的方法。 (如果在文档没有完全加载之前就运行函数,操作可能失败。)
  • 7. JQuery的选择器(基本) 可以通过$()方法来获得页面的指定节点。 【参数】 "#idname" 根据给定的id匹配一个元素 ".classname" 根据给定的类匹配元素 "element" 根据给定的元素名匹配多有元素 "*" 匹配所有元素 select1,selectN 将每个选择器匹配的元素合并一起返回
  • 8. JQuery的选择器(层级) 也可以通过$()方法来获得页面的指定节点。 【参数】 "祖先 后代" 在给定的祖先元素下匹配所有的后代元素 "父>子" 在给定的父元素下匹配所有的子元素(只限该父元素下一级的子元素,不能超过一代) "前+后" 匹配紧跟在前元素后的一个后元素(前后为同级元素) "兄~弟" 匹配兄长元素之后的所有弟弟元素(兄弟为同级元素)
  • 9. JQuery的选择器(扩展1) :first $("p:first")第一个

    元素 :last $("p:last")最后一个

    元素 :even $("tr:even")所有偶数 元素(从 0 开始) :odd $("tr:odd")所有奇数 元素 :eq(index) $("ul li:eq(3)")列表中的第四个元素(index 从 0 开始) :gt(no) $("ul li:gt(3)")列出 index 大于 3 的元素 :lt(no) $("ul li:lt(3)")列出 index 小于 3 的元素 :not(selector) $("input:not(:empty)")所有不为空的 input 元素

  • 10. JQuery的选择器(扩展2) :header $(":header")所有标题元素

    -

    :animated $(":animated")所有进行动画效果的元素 :contains(text)$(":contains('W3School')")包含指定字符串(文本)的元素 :hidden $("p:hidden")所有隐藏的

    元素 :visible $("table:visible")所有可见的表格 :gt(no) $("ul li:gt(3)")列出index大于3的元素 :lt(no) $("ul li:lt(3)")列出index小于3的元素 :enabled $(":enabled")所有激活的元素 :disabled $(":disabled")所有禁用的元素 :selected $(":selected")选取被选择的

  • 11. JQuery的选择器(扩展3) :input $(":input")所有元素 :text $(":text")所有type="text"的元素 :password $(":password")所有type="password"的元素 :radio $(":radio")所有type="radio"的元素 :checkbox $(":checkbox")所有type="checkbox"的元素 :submit $(":submit")所有type="submit"的元素 :reset $(":reset")所有type="reset"的元素 :button $(":button")所有type="button"的元素 :image $(":image")所有type="image"的元素 :file $(":file")所有type="file"的元素
  • 12. JQuery的选择器(扩展4) [attribute] $("[href]")所有带有href属性的元素[attribute=value] $("[href='#']")所有href属性的值等于"#"的元素[attribute!=value] $("[href!='#']")所有href属性的值不等于"#"的元素[attribute$=value] $("[href$='.jpg']")所有href属性的值包含以".jpg"结尾的元素
  • 13. jquery举例
  • 14. jquery举例

    图书分类

  • 15. jquery举例
  • 16. 选择对象后,可以在$()方法返回的jquery对象上执行各种Jquery的方法来获取数据,定义事件,执行操作。 例如: $("#username").val() 获取id为username的元素的value值 $(".password").click(function(){}) 为class为password的元素绑定一个单击事件,当单击该元素的时候触发该function函数。 $("#div").text("")
  • 17. JQuery的事件(基本) 1.$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) 2.$(selector).click(function(e)) 将函数绑定到被选元素的点击事件 3.$(selector).dblclick(function) 将函数绑定到被选元素的双击事件 4.$(selector).focus(function) [ .blur(function) 失焦事件] 将函数绑定到被选元素的获得焦点事件 5.$(selector).change(function) 将函数绑定到被选元素的改变事件 6.$(selector).select(function) 当用户在文本框(包括input和textarea)中选中被选元素某段文本时触发 6.$(selector).submit(function) 将函数绑定到被选元素的提交事件(基本用于form表单提交)
  • 18. JQuery的事件(扩展) 1.mousemove(fn),mouseout(),mouseover() mousedown(),mouseup() 将函数绑定到被选元素的鼠标移动,离开,移入,点击,释放事件。 2.hover(fn1(),fn2()) 用于元素鼠标悬停(执行fn1函数)与鼠标移出(执行fn2函数)的切换。 3.one(type,fn()) 用于为所选元素绑定一个只触发一次的函数。 4.trigger(type) 页面加载完成后,触发指定元素的事件。
  • 19. jquery的循环 each(function(i)) 遍历每一个元素 每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
  • 20. jquery的常用方法 1.val() 获得节点的value属性值,val("值")可以设置元素的值。 2.text() 获得节点的text文本内容。 text("文本")可以设置元素的文本内容。 3.html() 获得节点的html文本内容,html("文本")可以设置元素的html 文本,内容可加html标签。 4.attr("属性名") 获得所选元素属性的内容。 removeAttr() attr("属性名","属性值") 设置元素各种属性的值。 5.css("css样式的属性名","css属性值") 设置元素的各种样式。 addClass(),removeClass(),toggleClass()。
  • 21. 6.append("HTML内容") 向所选择的元素内部追加HTML 内容。 appendTo(被追加元素) 将所选元素追加到另一个指定的元素中。 7.after() 在被选元素之后添加 HTML内容。 8.before() 在被选元素之前添加 HTML内容。 9.hide() 隐藏被选元素。 10.show() 显示被选元素。 11.toggle() 切换(在隐藏与显示之间)被选元素。 12.remove() 删除被选元素
  • 22. jquery举例
  • 23. jquery举例
  • 24. jquery举例
  • 选项 编号 封面 购书人 购书价
    1001 那些年我们一起追的女孩 李小明 35.60元
    1002 木偶奇遇记 刘明明 37.80元
    全选
  • 25. jquery举例