2021年10月4日
1.介绍
jQuery是什么
参见<<什么是jQuery.JPG>>
2.使用
为什么要使用jQuery （1）写少代码,做多事情【write less do more】 （2）免费，开源且轻量级的js库，容量很小 注意：项目中，提倡引用min版的js库 （3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome 注意：jQuery不是将所有JS全部封装，只是有选择的封装 （4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能 （5）文档手册很全，很详细 （6）成熟的插件可供选择 （7）提倡对主要的html标签提供一个id属性，但不是必须的 （8）出错后，有一定的提示信息 （9）不用再在html里面通过<script>标签插入一大堆js来调用命令了
3.入门
jQuery开发入门 （1）引用第三方js库文件，<script type="text/javascript" src="js/jquery-1.8.2.js"/> （2）查阅并使用api手册，$("#divID").html()/val()/text()/css("color","red")/....
4.js对象和jQuery对象相互转换
（1）什么是js对象及代码规则 就是使用js-API，即Node接口中的API或是传统JS语法定义的对象，叫做js对象 js代码规则----divElement var divElement = document.getElementById("divID"); var nameArray = new Array(3);
（2）什么是jQuery对象及代码规则 就是使用jQuery-API，返回的对象就叫做jQuery对象 jQuery代码规则----$div var $div = $("#divID") 声明：上述代码规则，只是个人规则，不代表所有企业都这样做
（3）js对象转成jQuery对象【重点】 语法：$(js对象)---->jQuery对象 例如：$(divElement)---->$div 例如：$(this)---->$this 注意：jQuery对象将js对象做了封装，js对象两边无引号
（4）jQuery对象转成js对象 语法1：jQuery对象[下标，从0开始] 语法2：jQuery对象.get(下标，从0开始) 例如：$div[0]---->divElement 注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然 $div.innerHTML（错） divElement.html(错)
5.js对象和jQuery对象的区别
（1）js对象的三种基本定位方式 （A）通过ID属性：document.getElementById() （B）通过NAME属性：document.getElementsByName() （C）通过标签名：document.getElementsByTagName()
（2）jQuery对象的三种基本定位方式 （A）通过ID属性：$("#id属性值") （B）通过标签名：$("标签名") （C）通过CLASS属性：$(".样式名")
（3）js对象出错的显示 没有合理的提示信息 例如：alert(document.getElementById("usernameIDD").value)
（4）jQuery对象出错的显示 有合理的提示信息，例如：undefined 例如：alert($("#usernameIDD").val())
6.jQuery中常用方法
目的：通过方法，能操作web页面（HTML/JSP）中的任何标签 （1）val()：获取标签的value属性值，前提是该标签有value属性 （2）html()：获取标签之间的内容，不能用运于xml文件 （3）text()：获取标签之间的内容，可以用运于html/jsp和xml文件，(提倡) （4）css()：加key-value形成的css样式 （5）size()：获取jQuery对象/数组中元素的个数，提倡 （6）length：获取jQuery对象/数组中元素的个数
注意：在写jQuery代码时，不光可以使用jQuery的API，还能使用传统JS的API
1）掌握jQuery九类选择器及应用 2）掌握jQuery常用Method-API 3）掌握jQuery常用Event-API
1.jQuery九类选择器【参见jQueryAPI.chm手册】
目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签 （1）基本选择器【参见01_selector.html】 （2）层次选择器【参见02_selector.html】 （3）增强基本选择器【参见03_selector.html】 （4）内容选择器【参见04_selector.html】 （5）可见性选择器【参见05_selector.html】 （6）属性选择器【参见06_selector.html】 （7）子元素选择器【参见07_selector.html】 （8）表单选择器【参见08_selector.html】 （9）表单对象属性选择器【参见09_selector.html】 注意：项目中，通常是多种选择器一起使用
2.jQuery常用Method-API
目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查 （1）DOM简述与分类 （A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML) （B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，跨浏览器(ie/firefox/Chrome)的标准规则 （C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程 （D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS （E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等
（2）DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用 each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象 append()：追加到父元素之后 prepend()：追加到父元素之前 after()：追加到兄弟元素之后 before()：追加到兄弟元素之前 attr(name)：获取属性值 attr(name,value)：给符合条件的标签添加key-value属性对 $("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本 remove()：删除自已及其后代节点 val()：获取value属性的值 val("")：设置value属性值为""空串，相当于清空 text()：获取HTML或XML标签之间的值 text("")：设置HTML或XML标签之间的值为""空串 clone()：只复制样式，不复制行为 clone(true)：既复制样式，又复制行为 replaceWith()：替代原来的节点 removeAttr()：删除已存在的属性 addClass()：增加已存在的样式 removeClass()：删除已存在的样式 hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式 toggleClass()：如果标签有样式就删除，否则增加样式 offset()：获取对象的left和top坐标 offset({top:100,left:200})：将对象直接定位到指定的left和top坐标 width()：获取对象的宽 width(300)：设置对象的宽 height()：获取对象的高 height(500)：设置对象的高 children()：只查询子节点，不含后代节点 next()：下一下兄弟节点 prev()：上一下兄弟节点 siblings()：上下兄弟节点 show()：显示对象 hide()：隐藏对象 fadeIn()：淡入显示对象 fadeOut()：淡出隐藏对象 slideUp()：向上滑动 slideDown()：向下滑动 slideToggle()：上下切换滑动，速度快点 find("9类选择器")：查询指定的节点和多重each()迭代
3.jQuery常用Event-API
目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理 window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者 ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化 ready和onload同时存在时，二者都会触发执行，ready快于onload change：当内容改变时触发 focus：焦点获取
###
4.作业
1）将selector目录下的所有练习题做一遍 2）将method目录下的所有练习题做一遍 3）将event目录下的所有练习题做一遍 4）将exe目录下的所有练习题做一遍
浙公网安备 33010602011771号