jquery文档 | 易学教程

用实例一步步教你写Jquery插件

阅读更多关于用实例一步步教你写Jquery插件

最近Web应用程序中越来越多地用到了JQuery等Web前端技术。这些技术框架有效地改善了用户的操作体验，同时也提高了开发人员构造丰富客户端UI的效率。JQuery本身提供了丰富的操作，但是，有时候我们需要根据我们自己的业务和系统特色（风格）构造一些我们常用的前端UI组件，而 JQuery的插件给了我们一个较好的方式来构造这些UI组件，方便我们日后反复重用这些组件。网上也有很多关于JQuery插件的文章，我也搜了一些，但是，这些文档太过离散，没有有效地组织并充分说明JQuey插件该如何编写，并且有哪几种形式，什么情况下使用哪种形式。下面，我将说明JQuery插件常用的写法，以及这些插件的常用场景。一、插件的几种写法首先，在具体说明编写插件之前，我们先假定一个使用场景：有一个HTML页面（或.aspx页面），页面上放置了一个5行3列的表格，即：<table></table>标记，具体代码如下： <table id="newTable"> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr>

JQuery（选择器、事件、DOM操作）

阅读更多关于 JQuery（选择器、事件、DOM操作）

一、jQuery简介 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。 $：jQuery标识符二、jQuery选择器 1.基本选择器 ①ID选择器:# $("#div1").css("background-color", "red") ②class选择器：. 1 $(".div2").css("background-color", "red"); ③标签选择器 $("div").css("background-color", "red"); ④并列 $("#div1,#div2").css("background-color", "red"); //并列选择，用逗号隔开 ⑤后代 $("#div1 a").css("background-color", "red"); //后代选择，用空格隔开 2、过滤选择器（1）、基本过滤 ①首个：:first $(".div:first").css("background-color", "red"); //取首个 ②尾个：:last $(".div:last").css("background-color", "red"); //取最后一个 ③任意个：:eq(索引号) $(".div:eq

jQuery学习整理-2

阅读更多关于 jQuery学习整理-2

1.1. jQuery 属性操作 jQuery 常用属性操作有三种：prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。语法获取属性:prop("属性") 设置属性:prop("属性","属性值 ") 注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。 1.1.2 元素自定义属性值 attr() 用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。语法同prop,类似原生getAttribute()和setAttribute() 注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性） 1.1.3 数据缓存 data() data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。演示代码 <body> <a href="http://www.itcast.cn" title="都挺好">都挺好</a>

jquery定位

阅读更多关于 jquery定位

1、$("div").offset().left ; div到文档的左距离（offset() 方法返回或设置匹配元素相对于文档的偏移） $("div").offset().top; div到文档顶端的距离 $("div").offset().top-$(window).scrollTop; div到可视窗口顶端的距离(用总的距离-滚动的距离可得到) 2、$("div").position().left; 把div转化成类似定位的形式，即把自身的margin去掉，再计算自己到有定位的父级的距离，如果父级都没有定位，则是计算div到文档的距离，top同理。 3、$("div").width() ; div的宽度（不包括内外边距和边框） $("div").innerWidth(); div的宽度加上padding $("div").outerWidth(); div的宽度加上padding+border $("div").outerWidth(true); div的宽度加上padding+border+margin 4、$(document).height() ; 整个文档的高度，宽度同理。 $(window).height(); 可视窗口的高度 $(window).scrollTop(); 滚动条滚动的距离(即滚动条顶端到文档顶端的距离) 当滚动条滚到最低端时：$("document

前端基础JQuery

阅读更多关于前端基础JQuery

JQuery对象是通过JQquery包装DOM对象后产生的对象。JQuery对象是JQuery独有的。如果一个对象是JQuery对象，那么它就可以使用JQuery中的方法。 $("#test").html(); 获取ID为test的元素内的html代码 DOM实现代码:document.getElementById("test").innerHTML; 虽然JQuery对象是DOM对象包装后产生的，但是JQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用JQuery中的方法约定如果获取的是JQuery对象，那么要在变量前加$ var $variable=JQuery对象 var variable=DOM对象 $variable[0]:JQuery对象转为DOM对象$("#test")[0].innerHTML; 选择器　　基本选择器 $("*") 通配 $(#id") ID $(".class") 类 $("element") 标签 $(".class,p,div") 多个元素　　层级选择器 $(".outer div") .outer所有div后代 $(".outer>div") .outer所有子代div $(".outer+div") .outer毗邻div标签 $(".outer~div") .outer普通兄弟div标签　　基本选择器 $("li

前端 jQuery

阅读更多关于前端 jQuery

一、jQuery是什么？ <1>jQuery由美国人John Resig创建，至今已吸引了来自世界各地众多JavaScript高手加入其team。 <2>jQuery是继prototype之后又一个优秀的JavaScript框架。其宗旨是——WRITELESS,DO MORE! <3>它是轻量级的js库(压缩后只有21k)，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 <4>jQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTMLdocument、events、实现动画效果，并且方便地为网站提供AJAX交互。 <5>jQuery还有一个比较大的优势，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。二、什么是jQuery对象？ jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法： $(“#test”).html(); $("#test").html() //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; /

JQuery 总结（1）选择器的使用

阅读更多关于 JQuery 总结（1）选择器的使用

一注意： 1.DOM对象：通过原生js获取的DOm对象（DOm树上的节点就是，比如<li></li>） 2.jQuery对象：通过jQuery 选择器获取的 jQuery对象智能用jQuery中封装的方法，不能使用DOm对象的方法同理 DOm也是一样二选择器相互更换： 1.DOM转换成JQ对象 $(“DOM对象”) 2.JQ对象转换成DOM对象 $("div")[index] 或者 $("div").get(index) 三基本选择器 1. #id > $("#id名"), 2. .class > $(".class名") 3. element标签 > $("div") 4.群组选择器 > $("div,p") 5.* > $("*") 四后代选择器子元素选择器紧邻的同辈选择器 1.$("#id li"), 这个是所有的后代 2. $("#id > li"), 这个是只查到儿子为止 3. $("#id + p ") 紧挨着#id 后面的p元素 4. $("#id ~ p ") 在#id 后面的同辈兄弟p元素五.表单元素选择器 <form> <input type="text" /> <input type="checkbox"checked /> 复选框 <input type="radio" /> 单选框 <input type="image" />

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

阅读更多关于 jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法一丶什么是JQuery JQuery: JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: 链式编程:可以.的形式实现多个功能隐式迭代:在方法的内部进行遍历循环,而不是我们自己再进行循环,简化操作,方便调用更好的兼容性:JQuery自动做了浏览器的兼容问题 JQuery的引入: 压缩(XXX.min.js)与未压缩 // 1. 压缩过的文件更小,不占据空间,利于网络传输,可读性不高 // 2. 未压缩的文件占据空间,不利于网络传输,可读性高引入 :导入文件一定要在自定义script标签之上   <script src="jquery3.4.1.min.js"></script> <script> // 自定义JQ/js代码 </script> //在控制台输入jQuery //结果如下,则表示引入JQ成功 ƒ (e,t){return

前端学习之jQuery

阅读更多关于前端学习之jQuery

一 jQuery是什么？［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。二什么是 jQuery 对象？ jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是是jQuery独有.如果一个对象是jQuery对象,那么它就可以用jQuery里的方法: $("#test").html(); $("test").html() 意思是指:获取ID为 test的元素内的html代码。其中html()是jQuery里的方法这段代码等同于用DOM实现代码: document.getElementById("test").innerHTML;

jQuery获取文本节点之-text()/val()/html() 方法区别

阅读更多关于 jQuery获取文本节点之-text()/val()/html() 方法区别

在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明：首先，html属性中有两个方法，一个有参，一个无参 1. 无参html（）：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String 例子： html页面代码： Hello jquery代码：$("div").html(); 结果：Hello 2.有参html（val）：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象 html页面代码： jquery代码：$("div").html(" Nice to meet you "); 结果：[ Nice to meet you ] 其次，text属性中有两个方法，一个有参，一个无参 1. 无参text（）：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String 例子： html页面代码： Hello fine Thank you! jquery代码：$("p").text(); 结果：HellofineThankyou! 2.有参text（val）：设置所有匹配元素的文本内容, 与 html() 类似, 但将编码 HTML (将 "<" 和 ">"

订阅 jquery文档