首页 > 代码库 > jQuery的核心思想
jQuery的核心思想
jQuery?----www.jQuery.com
jQuery的理念：write less, do more
jQuery的成就：世界排名前100的公司，46%都在使用jQuery,远远超过其他库，微软公司甚至把jQuery库 作为了他们的官方库。
what is jQuery?(这是我复制官网上的介绍，觉得说的很专业)
jQuery is a fast, small, and feature-rich(功能丰富) JavaScript library. It makes things like HTML document traversal and manipulation（循环和遍历）, event handling（事件 处理）, animation（运动）, and Ajax（异步的js与xml） much simpler with an easy-to-use API that works across a multitude of browsers(跨浏览器). With a combination（组合） of versatility and extensibility（通用性和可扩展性的）, jQuery has changed the way that millions of people write JavaScript.
jQuery的特点？
轻量级脚本语言（Lightweight footprint）
css兼容性（css compliant）
跨浏览器（cross browser）
jQuery的核心思想
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="description" content=""> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>jQuery--jQuery的设计思想1</title> 8 <link rel="author" href="humans.txt"> 9 <script src="jquery-1.4.1.min.js"></script> 10 <script type="text/javascript"> 11 12 /* 13 1.选择网页元素 14 1.1 css选择器 15 -$(document)//选择整个文档 16 -$("#myId")//选择ID为myId的网页元素 17 -$(‘div.myClass‘)//选择class为myClass的div元素 18 1.2 jQuery特有的表达式 19 -$(‘a:first‘)//选择网页中第一个a元素 20 -$(‘tr:odd‘)//选择表格的奇数行 21 -$(‘div:visible‘)//选择可见的div元 22 2.方法函数化 23 1.1 原生的 24 -window.onload 25 -innerHTML 26 -onclick 27 1.2 jquery的 28 -$() 29 -html() 30 -click() 31 3.原生与jquery的关系 32 3.1 原生、jq可以共存 33 -$("#div1").html() 34 -oDiv.innerHTML 35 3.2 原生、jq不能混用 36 -$("#div1").innerHTML 37 -ODIV.html() 38 4.改变结果集 39 4.1 强大的过滤器 40 -$(‘div‘).has(‘p‘);//选择包含p标签的div标签 41 -$(‘div‘).not(‘.myClass‘);//选择class不等于myClass的div元素 42 -$(‘div‘).filter(‘.myClass‘);//选择class等于myClass的div元素 43 4.2 相邻元素查找 44 -$(‘div‘).next(‘p‘);//选择div元素后面的第一个p元素 45 -$(‘div‘).parent();//选择div元素的父元素 46 -$(‘div‘).children();//选择div的所有子元素 47 5.链式操作 48 $(‘div‘).find(‘h3‘).eq(2).html(‘hello‘); 49 --找到div元素，选择其中的h3元素，选择第3个h3元素，将它的内容改为Hello 50 51 jQuery还提供了.end()方法，使得结果集可以后退一步 52 ------>这个就使得我们可以用一个链式操作，写完一整个效果都没有问题。 53 6.取值与赋值合体 54 $(‘h1‘).html();//html()没有参数，表示取出h1的值 55 $(‘h1‘).html(‘hello‘);//html()没有参数Hello,表示对h1进行赋值 56 57 .val() 58 .attr() 59 .width() 60 61 取值是一组中的 第一个元素，赋值是所有的元素 62 7.元素移形换位 63 7.1 直接移动该元素 64 -$(‘div‘).insertAfter($(‘p‘));//把div元素移动到 p元素后面 65 -$(‘div‘).appendTo($(‘p‘));//把div元素剪切到p元素的后面 66 7.2 移动其他元素 67 -$(‘p‘).after($(‘div‘));//把p元素加到div元素前边 68 -$(‘div‘).append($(‘p‘));//把p元素插入到div的里边 69 区别：操作的元素不同 70 8.强大的创建 71 $(‘#ul‘).append(‘<li>aaaa</li>‘); 72 === 73 var oLi = $(‘<li>‘); 74 oLi.html(‘aaaa‘); 75 $("#ul").append(oLi); 76 77 clone() 78 9.工具方法（重点） 79 9.1 构造函数上的方法 80 -$.each([],function(){}) 81 -$.trim($(‘div‘).attr(‘class‘))--去掉class属性的前后空格 82 83 解释：$.方法：添加到构造函数，静态方法 84 9.2 原型上的方法 85 -$(‘div‘).each(function(index,elements){}) 86 index--索引 87 elements--当前所有元素中正在操作的 88 89 demo: 90 function $(){ 91 $.each = function(){ 92 //构造函数下面的方法:$.each() 93 } 94 $.prototype.each = function(){ 95 //原型下面的方法：$(‘div‘).each() 96 } 97 } 98 10.事件操作 99 10.1 独立事件100 - click()101 - mouseover()102 10.2 通用事件103 - bind();//同一个对象上，可绑定多个事件104 - one();//绑定的事件只可以执行一次105 -unbind();//取消106 - e:event对象107 - pageX等;//鼠标相对于屏幕的坐标，原生中是clientX108 - 阻止默认与冒泡;//return false--既可以阻止冒泡又可以阻止默认事件109 110 demo:toggle--循环执行，后面可以接多个函数111 $(‘input‘).toggle(function(){},function(){},function(){})112 hover--$(‘div‘).hover(function(){},function(){})113 11.运动效果114 11.1 常见效果115 -.fadeIn();//淡入116 -.fadeOut();//淡出117 -.slideDown();//向下展开118 -.slideUp();//向上卷起119 11.2 复杂效果120 -.animate();//运动121 -.stop();//阻止前面的运动效果，执行当前的运动事件122 12.插件机制(plugins)--demo123 在JQ的源码上进行拓展，一个个做好的应用124 13.UI组件（jQuery UI）125 JQ官方提供的功能效果和UI样式126 14.手机、社区、论坛127 128 */129 </script>130 </head>131 <body>132 </body>133 </html>
jQuery的核心思想
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。