网站360优化,房山成都网站建设,门户网站建设管理总则,深圳建筑信息平台简介#xff1a;jquery 全称 javaScript Query.是js的一个框架。本质上仍然是js。特点#xff1a;支持各种主流的浏览器、使用特别简单、拥有便捷的插件扩展机制和丰富的插件。一、JQuery内部封装原理介绍#xff1a;匿名闭包。下面这两行代码是jquery包下的已经封装的代码jquery 全称 javaScript Query.是js的一个框架。本质上仍然是js。特点支持各种主流的浏览器、使用特别简单、拥有便捷的插件扩展机制和丰富的插件。一、JQuery内部封装原理介绍匿名闭包。下面这两行代码是jquery包下的已经封装的代码因为window我们可以省略不写因此我们可以直接使用 $ 符号。// Expose jQuery to the global objectwindow.jQuery window.$ jQuery;匿名自调用即使用闭包将函数要执行的数据一次性挂载到window对象下。其推导过程如下function fn1(){console.log(函数);};// 调用函数fn1();// fn1时函数名它包含函数的代码函数的代码就是“function(){console.log(函数);}”用括号包裹替换fn1得(function (){console.log(函数);})();因此对上面函数形参传进去obj下面的实参传进去window对象即为下面的表示形式(function(obj){//var bjsxt{};obj.testfunction(){alert(工厂);}alert(匿名自调用);})(window)因此实现了由局部变量到全局变量window的一个转变。注因为window是一个全局变量而且不能够被修改和重定义。二、jquery基本选择器介绍id标签类组合注意id选择器要加#、标签选择器什么都不加、类选择器要加“ . ”、组合选择器就是直接写多个中间用逗号隔开。下面是一些子选择器层级选择器等具体哪个可以去查找对应的API//测试子选择器function testChild(){var inps$(#showdivinput);alert(inps.length);}//测试层级选择器function testCj(){var inp$(input:first);alert(inp.val());}function testCj2(){var tds$(td:not(td[width]));alert(tds.html());}三、jquery操作元素属性他封装了set/getattribute方法这里面对应的是attr 同样存在一个问题不可以获取实时的input text框中的内容这个时候要使用value 这里对应的是val 方法function testField(){//获取元素对象var uname$(#uname);//获取alert(uname.attr(type):uname.attr(value):uname.val());}function testField2(){//获取元素对象var uname$(#uname);uname.attr(type,button);}四、jquery操作元素内容和js中的是一样的也是一个innerHTML 和一个innerText只不过是名字不同。jquery 操作元素内容学习获取元素对象1、获取对象名.html()//返回当前对象的所有内容包括HTML标签。对象名.text()//返回当前对象的文本内容不包括HTML标签2、修改对象名.html(新的内容)//新的内容会将原有内容覆盖HTML标签会被解析执行对象名.text(新的内容)//新的内容会将原有内容覆盖HTML标签不会被解析五、jquery操作元素样式 cssjs中的是直接对象.style.color***;这里可以调用css()方法加上JSON来使用六、js操作文档结构将指定内容添加到对象内部、外部。等等可以看API手册操作文档结构学习获取元素对象1、内部插入append(内容) 将指定的内容追加到对象的内部appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容prepend() 将指定的内容追加到对象的内部的前面prependTo() 将制定的元素对象追加到指定的对象内容前面2、外部插入after 将指定的内容追加到指定的元素后面before 将指定的内容追加到指定的元素前面insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。3、包裹4、替换5、删除empty()七、事件机制的学习特点jquery可以对事件添加并且同一个事件可以添加多种效果而js只能添加一种添加多种的话会覆盖。注页面载入事件js中式onload在这里不是使用bind而是使用ready方法。。可以看下面代码//js动态添加事件function testThing(){//获取元素对象var btndocument.getElementById(btn2);//添加事件btn.οnclickfunction(){alert(我是js方式);}}//jquery//测试bind绑定function testBind(){$(#btn2).bind(click,function(){alert(我是bind绑定单击事件)});$(#btn2).bind(click,function(){alert(我是bind绑定单击事件2w2222)});}//测试unBind解绑function testUnfBind(){$(#btn3).unbind(click);}//测试onefunction testOne(){$(#btn3).one(click,function(){alert(我是one)});}//页面载入事件//js方式window.οnlοadfunction(){alert(我是js方式页面加载);}window.οnlοadfunction(){alert(我是js方式页面加载2222);}//jquery方式$(document).ready(function(){alert(我是jQuery);})$(document).ready(function(){alert(我是jQuery22222);})八、动画效果本质就是使用jquery的 hide show属性来修改div的显示时间同时加上css的displaynone等属性function test(){$(#showdiv).show(3000);$(#div01).hide(3000);/*$(#showdiv).hide(3000);$(#div01).show(3000);*/$(div).toggle(3000);$(#showdiv).slideDown(3000);$(#div01).slideUp(2000);$(#showdiv).fadeOut(3000);}总结jquery就是对js的封装方便我们调用在了解了js之后学起来非常块对于一个后端开发者来说了解还是必须的。在使用jquery实现一些动态效果的时候可以灵活的运用标志位比如鼠标点击事件点击一次flag改变一次。可以用来达到某种动态效果的判断条件。
