XMLJavaScript高级AjaxjQuery笔记Day-9jQuery02

jQuery（2）一、杂项1、释放$jQuery为什么要释放$?实际上，自己写的代码还可以避免使用$，问题是其他js框架中可能也有$的使用，如果一个页面中用了jQuery，页用了其他js框架，就有可能产生冲突了。jQuery如何释放$?方法一：使用jQuery代替$符号方法二：使用jQuery中的noConflict()方法方法三：使用自调用函数2、ready和onload的区别ready是jQuery中的方法，规定了页面加载后要执行的函数。onload是dom中的事件，表示页面加载后要执行的内容。区别1：ready只需要页面中的dom节点加载完毕就可以执行，html标签完全加载完毕就会执行，无关图片是否已经下载。onload需要整个页面的资源加载完毕才能执行，html标签完全加载完毕，并且图片等页面中的资源也必须加载完毕也能够执行。区别2：一个页面只能执行一个onload事件一个页面可以执行多个ready事件3、ready方法的简写形式4、dom对象和jQuery对象的区别1、什么是dom对象，什么是jquery对象？dom对象就是原生js中使用document.getElement.By.()，得到的对象就是dom对象。jQuery对象指的是使用jQuery方法得到的对象，一般来说就是通过jQuery选择器得到的对象。2、dom对象和jQuery对象的区别dom对象可以使用dom方法；jQuery对象可以使用jQuery方法，而不能使用dom中的方法或属性。3、jQuery对象额dom对象互换：、将jQuery对象转化为dom对象：、将dom对象转化为jQuery对象jQuery对象 = $(dom对象);二、jQuery中的Ajax1、$.get方法和$.post方法1、使用ajax 的步骤1、创建ajax对象2、绑定监听事件(事件处理函数中，判断ajax状态为4的时候，接收服务器返回的数据)服务器返回的数据，可以能文本类型，可能是json类型，可能是xml类型3、open(type, url?id=123, true)4、send(id=123)如果让我们自己封装一个Ajax的get方法，该如何写？2、使用get方式发送ajax请求注意：对于服务器返回的json类型的数据，无需使用JSON.parsr处理，jQuery已经处理成js的对象了。3、使用post方式发送ajax请求使用方式和$.get一模一样。2、$.ajax方法$.ajax()这个方法综合$.get和$.post的一个方法，另外这个方法可以完整的体现ajax的各种情况。3、收集表单内容jQuery中封装了一个方法serialize，和FormData获取的数据一致。4、Ajax提示三、省市县三级联动1、分析省、市、县这种数据会经常变动吗？答案是不会的。像这样的数据，咱们存放到文件中比较合适。使用的文件：下面分析一下这些文件的关系：2、创建所需的文件3、页面加载完毕，获取所有的省先写ajax请求的代码：服务器返回数据的代码：浏览器端，处理服务器返回的数据：4、切换省的时候，加载市的内容5、小结这种用文件存储省、市、县的数据的方式，用起来更加简单，更加符合实际（工作中存放这种不会轻易变动的数据都使用文件存储）。四、无刷新分页1、完成基本的分页这时，只需要一个php文件即可。1、写一个通用的SQL，查询每页数据2、展示每页数据3、做页码将表示页码的str变量输出：做1/2/3/4/5页：2、无刷新的分页获取第1页数据1、将原来的11fenye.php分成两个文件一个html用于显示数据（12page.html），另一个php文件用于获取数据(12page.php)2、在12page.html中发送ajax请求（第1页的数据）3、服务器返回数据4、浏览器端处理返回的数据把10条数据处理了：把页码放到页面中：3、获取其他页数据1、分析获取完第1页数据，点击页面中的超链接，还是能够跳转，修改服务器中的页面，将a标签的href属性换掉。换完之后，因为a标签没有了href属性，所以看到的效果和文本效果一样，如下：所以，下一步，还是得需要a标签的href属性，只不过这个属性不要挂任何连接，因为我们做的是无刷新的分页。2、给未来的元素绑定事件给页面中未来的元素绑定单击事件未来的元素指的是页面中没有的，通过dom操作或ajax操作后面加载到页面中的元素。比如说案例中页码。针对未来的元素，绑定事件的话，目前统一使用on事件，低于1.7版本，使用live方法。3、完成其他页数据的获取现在，点击页面中的a，可以输出a标签的data-href属性的值，这个值中的p=xxx正好是要获取的页。只不过多了个“?”,去掉这个“?”点击页面中的a标签，继续发送ajax请求：最后，把对服务器返回的数据的处理，写成一个单独的函数。获取第一页数据以及点击a标签获取其他页数据的时候，直接使用chuli()函数即可。五、总结今天内容1、dom对象和jquery对象的区别与互换dom jquery： $(dom对象) = jquery对象jquery dom: jquery0 = dom对象； jquery.get(0) = dom对象2、jquery释放$、直接使用jQuery代替$.、var j = jQuery. noConflict();、(function($)/这里的$是该函数的局部变量，不会影响到函数外的环境。)(jQuery);3、on事件on事件可以给未来的元素绑定事件。语法：$(document).on(事件名, 给谁绑定, 事件处理函数);比