jquery文档

jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件

包裹 wrap() wrapInner() wrapAll() unwrap() clone() 数据缓存机制 data 文档处理（包裹） 1.1.wrap()--将所匹配的元素用其他元素结构化标签包裹起来（实际上就是给指定的元素添加父元素）。参数可以是HTML标记代码字符串；也可以是DOM元素对象；或者是传入一个方法，方法的返回值可以是前面两种情况。 //html <div class="demo">b</div> <div class="a">a</div> //js $('.demo').wrap('<div class="b">c</div>'); 上面这个示例展示的结果可以得出一个结论就是通过wrap包裹元素，其实质就是将元素添加到指定的元素的末尾。同时我们又会思考另一个问题，就是通常我们选择的DOM不会只有一个，而是多个，如果执行了wrap()会发什么呢？ //html <div class="demo">b</div> <div class="demo">d</div> <div class="a">a</div> //js $('.demo').wrap( $('.a') ); 从上面的示例可以得到，当jQuery对象是DOM集合时，每个DOM节点上包裹一个指定元素。被指定的元素是DOM节点，相当于拷贝指定的DOM节点(节点的属性会被拷贝，但是内部节点内容不会被拷贝

　　DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。 　　DOM操作函数中后五种方法使用的依然是前面五种方法，源码 jQuery.each({ appendTo: "append", prependTo: "prepend", insertBefore: "before", insertAfter: "after", replaceAll: "replaceWith" }, function( name, original ) { jQuery.fn[ name ] = function( selector ) { var elems, i = 0, ret = [], insert = jQuery( selector ), last = insert.length - 1; for ( ; i <= last; i++ ) { elems = i === last ? this : this.clone(true); jQuery( insert[i] )[ original ]( elems ); //现代浏览器调用apply会把jQuery对象当如数组，但是老版本ie需要使用.get()

1、什么是jQuery 　　jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架 ）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 　　"$"表示对jQuery的引用。 　　jQuery中文网站： http://jquery.cuishifeng.cn/ 2、jQuery对象和DOM对象的相互转换 　　jQuery对象[0] ---> DOM对象　 　　$(DOM对象) ---> jQuery对象 3、基本查找 　　1. id选择器 　　　　$("#ID名") 　　2. class选择器 　　　　$(".类名") 　　3. 标签选择器 　　　　$("标签名") 　　4. 组合选择器 　　　　$("#ID名,.类名,标签名") 　　5. 层级选择器 　　　　$("#ID 标签名") 该方式会找到所有的标签(包含子子孙孙) 　　　　$("#ID>标签名") 该方式只找子标签(只找一个子层级) 　　6. 基本选择器 　　　　:first 获取匹配的第一个元素 　　　　:last

1.jquery是什么 一个js的框架,可以方便的使用js 2 什么是jQuery对象 是由jQuery封装后的DOM对象 注意:与DOM对象的方法不同,不可以混用,但是可以相互转换 3.基本语法: jQuery对象.方法() 4.得到jQuery对象: 1)选择器: 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div") 层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div") 基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)") 属性选择器 $('[id="div1"]') $('["alex="sb"][id]') 表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签 $("input:checked") 2)筛选器: 过滤筛选器 $("li").eq(2) $("li").first() $("ul li").hasclass("test") 查找筛选器 $("div").children(".test") $("div").find(".test") $(".test").next() $("

目录 jquery引入 标签查找 层级选择器：（同css） 基础选择器 属性选择器 表单筛选器 链式表达式 操作标签 样式操作 css操作 位置操作 尺寸 文本操作 值操作 属性操作 文档操作 事件 移除事件(不常用) 事件委托 页面载入 jquery的each bootstrap 栅格系统 列偏移col-md-offset-x 列嵌套 jquery引入 下载链接：jQuery官网 https://jquery.com/ 中文文档：jQuery AP中文文档 <script src="jquery.js"></script> <script> </script> //第二种方式,网络地址引入 <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>--> 下载 jquey方法找到的标签对象称为jquery对象 原生js找到的标签对象称之为DOM对象 dom对象只能调用dom对象的方法,jquery对象只能用jquery方法,不能互通 jquery对象和dom对象互相转换 /jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以了 jquery对象

1.1 JQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 　　 1.2 JQuery 内容 1. 选择器 2. 筛选器 3. 样式操作 4. 文本操作 5. 属性操作 6. 文档处理 7. 事件 8. 动画效果 9. 插件 10. each、data、Ajax 1.3 JQuery对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。 $("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 这相当于：document.getElementById("i1").innerHTML; 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。 约定俗成，声明一个Jquery对象变量的时候在变量名前加上$。 var

jquery笔记 1.核心函数 2.选择器 3.筛选 4.文档处理 5.属性 6.css 7.事件 8.效果 9.ajax 10.工具 为解决多框架冲突 1.$() 2.jQuery() js加载时机 当页面加载完毕时 所有元素加载完毕（包括图片） windows.onload 当DOM元素加载完毕时--到</html> $(function(){}); jquery对象访问： each()// $("h1").each(function(i) { if(i%2==0) { $(this).css("background","#ccc"); } }) $("h1:even").css("background","#ccc"); size() //个数 $("h1").size(); get() // get(index) index() //索引数 $("h1").click(function(){ alert($(this).index("h1")); }) js元素对象和jquery对象的转换 get() 1.js => jquery var obj = document.getElementById("h3id"); $(obj).css("color","blue");//前面不加双引号，js元素对象不加双引号 2. jquery => js $("#h3id").get

一. jQuery介绍 　　1. jQuery是一个轻量级的,兼容多种浏览器的JavaScript库. 　　2. jQuery可以更方便的处理HTML Document,Events,实现动画效果,更方便的进行Ajax交互,能够极大的简化JavaScript编程. 　　3. 具有丰富的DOM选择器,jQuery的选择器使用非常方便,jQuery用几行代码就可以实现JS多行代码要实现的功能. 　　4. 链式表达式,jQuery的链式操作可以把多个操作写在一行,更加简洁. 　　5. 事件,样式,动画支持.jQuery还简化了JS操作css代码,并且代码段的可读性也比JS要强. 　　6. Ajax操作支持.jQuery简化了Ajax操作,后端只需返回一个json格式的字符串就能完成与前端的通信. 　　7. 跨浏览器兼容.jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋. 　　8. 插件扩展开发.jQuery有着丰富的第三方的插件,例如: 树形菜单,日期控件,图片切换插件,弹出窗口等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用. 二. jQuery对象 　　jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的. 　

JQuery目录 1.JQuery介绍 2.JQuery内容 　　2.1 JQuery基础语法规则 　　2.2 查找标签 　　2.3 筛选器方法 　　2.4 查找 　　2.5 筛选 　　2.6 操作标签 　　2.7 事件 　　2.8 动画效果 1.JQuery介绍 　　jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。例如： $(“#i1”).html()。 $("#i1").html()的意思是： 获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 相当于： document.getElementById("i1").innerHTML; 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。 约定：我们在声明一个jQuery对象变量的时候在变量名前面加上$： 声明对象： 　　var $variable = jQuery对像 　　var variable = DOM对象 　　$variable[0]//jQuery对象转成DOM对象 拿上面那个例子举例，jQuery对象和DOM对象的使用： 　　$("#i1").html()