Jquery方法大全

jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。

据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。

微软公司甚⾄把jQuery作为他们的官⽅库。

对于⽹页开发者来说，学会jQuery是必要的。

因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。

这是它区别于其他函数库的根本特点。

使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。

jquery 常见的字符串加解密方法在jQuery 中，并没有提供专门的字符串加解密方法。

字符串的加解密通常是通过JavaScript 的原生方法或者其他第三方库来实现的。

以下是一些常见的字符串加解密方法：1. Base64 编码解码:Base64 编码不是真正的加密，但它可以用于对字符串进行简单的编码和解码。

编码：```javascriptvar encodedString = btoa("Hello, World!"); // 编码```解码：```javascriptvar decodedString = atob(encodedString); // 解码```2. MD5 加密:MD5 是一种不可逆的哈希算法，用于生成字符串的固定长度散列值。

```javascriptfunction md5(string) {// 通过第三方库或实现MD5算法// 返回MD5散列值}```3. AES 加密解密:AES（Advanced Encryption Standard）是一种对称加密算法，常用于加密和解密数据。

```javascript// 使用第三方库CryptoJS 实现// https://cryptojs.gitbook.io/docs/var encrypted = CryptoJS.AES.encrypt("Hello, World!", "secretKey");var decrypted = CryptoJS.AES.decrypt(encrypted, "secretKey");var decryptedString = decrypted.toString(CryptoJS.enc.Utf8);```4. RSA 加密解密:RSA 是一种非对称加密算法，用于加密和解密数据。

```javascript// 使用第三方库jsencrypt 实现var encrypt = new JSEncrypt();encrypt.setPublicKey("-----BEGIN PUBLIC KEY-----\n ... \n-----END PUBLIC KEY-----");var encrypted = encrypt.encrypt("Hello, World!");var decrypt = new JSEncrypt();decrypt.setPrivateKey("-----BEGIN PRIVATE KEY-----\n ... \n-----END PRIVATE KEY-----");var decrypted = decrypt.decrypt(encrypted);```请注意，这些示例中使用的库（如CryptoJS、jsencrypt）需要在项目中引入并进行适当的配置。

jquery clear用法jQuery的clear方法没有直接的用法，因为clear不是jQuery的内置方法。

不过，我可以为你解释一些与清除相关的jQuery方法和技巧。

1. 清空表单字段：使用`val()`方法可以清空表单字段的值。

例如，`$('input[type="text"]').val('')`可以清空所有文本输入框的值。

2. 清除元素内容：使用`empty()`方法可以清除元素的内容。

例如，`$('.my-element').empty()`可以清除类名为"my-element"的元素的内容。

3. 移除元素：使用`remove()`方法可以从DOM中彻底移除元素及其所有相关的事件处理程序和数据。

例如，`$('.my-element').remove()`会从DOM中移除类名为"my-element"的元素。

4. 清除样式：使用`removeAttr()`方法可以移除元素的特定属性，例如清除元素的样式属性可以使用`removeAttr('style')`。

5. 清除事件处理程序：使用`off()`方法可以移除元素的特定事件处理程序。

例如，`$('.my-element').off('click')`可以移除类名为"my-element"的元素上的点击事件处理程序。

6. 清除数据：使用`removeData()`方法可以移除元素上存储的数据。

例如，`$('.my-element').removeData('key')`可以移除类名为"my-element"的元素上名为"key"的数据。

需要注意的是，上述方法都是jQuery中用于清除或移除元素、数据、事件处理程序等的常见方法。

jquery用法jQuery是一种广泛应用于网页开发的JavaScript库，它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。

下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素，如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。

以下是一些常见的选择器：•('#element')：选择具有特定ID的元素•('.class')：选择具有特定类的元素•('input[type=“text”]')：选择特定类型的表单元素•('div:first')：选择第一个div•('ul li').eq(2)：选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。

以下是一些常见的事件处理函数：•click()：单击元素时触发•dblclick()：双击元素时触发•mouseenter()：鼠标移入元素时触发•mouseleave()：鼠标移出元素时触发•keydown()：按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作，可以改变和获取元素的属性，例如：•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值，与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果，可以使网页更加动态。

以下是一些常见的动画效果：•fadeIn()：淡入元素，即从不可见到可见•fadeOut()：淡出元素，即从可见到不可见•slideDown()：向下展开元素•slideUp()：向上收缩元素•animate()：通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法，可以在不刷新网页的情况下从服务器获取数据。

jq常用方法jq是一个快速、简洁、灵活的JavaScript库，它允许我们轻松地操纵HTML文档，解析和处理JSON数据、处理表单和事件等。

在使用jq时，我们经常用到一些常用方法，那么接下来，我们就来一一讲解。

1. 选择器在jq中，选择器是最为基本的部分，它可以让我们快速地筛选元素，比如：- $("#id")：根据id选择元素。

- $(".class")：根据class选择元素。

- $("tag")：根据标签名选择元素。

- $("element").find(selector)：在指定元素中查找符合条件的元素。

2. 事件绑定在jq中，我们可以通过事件绑定来实现在指定元素上触发事件。

常用的事件有：- $(selector).click(function(){})：点击元素触发事件。

- $(selector).mouseover(function(){})：鼠标移上元素触发事件。

- $(selector).submit(function(){})：表单提交触发事件。

- $(selector).focus(function(){})：元素获得焦点触发事件。

3. DOM操作在jq中，我们可以通过一些方法来快速地操作DOM元素，比如：- $(selector).html()：获取或设置元素的HTML内容。

- $(selector).text()：获取或设置元素的文本内容。

- $(selector).attr()：获取或设置元素的属性。

- $(selector).addClass()：为元素添加class。

- $(selector).remove()：删除指定元素。

4. 动画效果在jq中，我们可以通过动态效果来增加网页的交互性，比如：- $(selector).show(speed,callback)：显示元素，可以设置速度和回调函数。

jq click方法当我们在使用jQuery时，click()方法是一个非常常用的方法，用于处理元素的点击事件。

以下是一些关于click()方法的常见用法和注意事项。

1. 基本用法使用click()方法非常简单，只需要选择要绑定点击事件的元素，然后调用click()方法即可。

例如：```javascript$("#myButton").click(function() {alert("按钮被点击了！");});```在这个例子中，当用户点击ID为"myButton"的按钮时，就会弹出一个警告框显示"按钮被点击了！"。

2. 事件绑定除了直接在元素上调用click()方法外，还可以在选择器选择多个元素后调用click()方法，一次性给多个元素绑定点击事件。

例如：```javascript$("button").click(function() {alert("按钮被点击了！");});这个例子中，会给页面上所有button元素绑定点击事件，当用户点击任何一个button时，都会弹出一个警告框。

3. 事件冒泡和默认行为当用户点击一个元素时，会触发该元素的click事件，同时会触发其父元素的click事件，这就是事件冒泡。

如果父元素的click事件有默认行为（比如链接跳转），那么可以通过event.stopPropagation()方法阻止事件冒泡，从而阻止默认行为。

例如：```javascript$("#myButton").click(function(event) {event.stopPropagation();alert("按钮被点击了！");});```这个例子中，当用户点击"myButton"按钮时，会先弹出警告框，然后页面不会跳转到链接的href属性指定的URL。

1 引入JQuery的js文件<scrīpt type="text/javascrīpt" src="js/jquery.js"></scrīpt>2 jquery中的对象1 jquery对象只能使用jquery的方法2 dom对象只能使用dom的方法3 jquery对象引用方法$() 引用，通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象）4 、jQuery对象与dom对象的转换1 普通的dom对象一般可以通过$()转换成jquery对象。

如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。

所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：$("#msg").html();$("#msg")[0].innerHTML;$("#msg").eq(0)[0].innerHTML;$("#msg").get(0).innerHTML;5 如何获取jQuery集合的某一项$("div").eq(2).html(); //eq返回的jquery对象，调用jquery对象的方法$("div").get(2).innerHTML; //get(n)和索引返回的是dom元素对象，调用dom的方法属性6、同一函数实现set和getJquery中的很多方法都是如此，主要包括如下几个：$("#msg").html(); //返回id为msg的元素节点的html内容。

一、介绍jQuery的get方法jQuery是一种流行的JavaScript库，它提供了丰富的功能和方法，以简化开发者的工作。

其中，get方法是jQuery库中常用的一种方法，它可以用来发送一个GET请求到服务器，并获得返回的数据。

在实际的Web开发中，常常需要通过GET请求传递参数，因此掌握使用jQuery的get方法传递参数是十分重要的。

二、传递参数的基本方法1. 在发送GET请求时，可以通过在URL中添加参数来传递数据。

例如：```xxx张三age=20```，其中```name=张三age=20```就是传递的参数。

2. 通过jQuery的get方法发送GET请求时，可以在URL后面添加参数，也可以通过data参数传递一个对象来设置需要传递的参数。

例如：```javascript$.get('xxx {name: '张三', age: 20}, function(data) {// 处理返回的数据});```3. 通过data参数传递的参数会被自动转化为URL编码的形式，并添加到URL中，因此可以直接在请求的URL中看到传递的参数信息。

三、参数的编码处理1. 在构造URL参数时，需要对参数进行编码，以避免一些特殊字符对URL的影响。

可以使用JavaScript的encodeURIComponent方法进行编码，例如：```javascriptvar name = '张三';var encodedName = encodeURIComponent(name); //E5BCA0E4B889```2. 在使用jQuery的get方法传递参数时，jQuery会自动对参数进行编码处理，因此在传递参数时无需手动进行编码，非常方便。

3. 对于服务端来说，也需要对接收到的参数进行解码处理，以获取原始的参数值。

可以使用JavaScript的decodeURIComponent方法进行解码，例如：```javascriptvar decodedName = decodeURIComponent(encodedName); // 张三```四、参数的传递形式1. 在使用jQuery的get方法传递参数时，参数的传递形式可以有多种，可以直接在URL中添加参数，也可以通过data参数传递一个对象来设置需要传递的参数。

HTML的jQuery使用方法一、简介1.1 什么是jQuery？jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax等常见的操作。

通过jQuery，我们能够以更少的代码完成更多的功能，提高了JavaScript代码的可读性和可维护性。

1.2 为什么要使用jQuery？相比纯粹的JavaScript，jQuery提供了更丰富的API和更简洁的语法，能够大大提高开发效率。

另外，jQuery还兼容了各种浏览器，并且具有良好的扩展性，使得它成为前端开发中不可或缺的工具。

二、引入jQuery2.1 下载jQuery我们需要从官方全球信息湾下载jQuery库文件。

选择合适的版本，然后将文件保存到项目的相应目录下。

2.2 引入jQuery在HTML文件中，通过`<script>`标签将jQuery库文件引入到页面中。

通常情况下，我们会将jQuery的引入放在`<head>`标签的末尾或者`<body>`标签的开始位置。

```html<!DOCTYPE html><html><head><title>使用jQuery的HTML页面</title><script src="jquery.min.js"></script></head><body><!-- 页面内容 --></body></html>```三、基本用法3.1 文档就绪事件在使用jQuery时，为了确保DOM结构已经加载完毕，我们通常会将jQuery代码放在文档就绪事件中。

这可以通过`$(document).ready()`来实现。

```javascript$(document).ready(function(){// 在此处编写jQuery代码```3.2 选择器jQuery的选择器和CSS的选择器非常相似，我们可以使用各种选择器定位页面上的元素，然后对这些元素进行操作。

主题：jQuery 获取多表单子元素的方法随着互联网技术的不断发展，网页设计和开发也越来越受到重视。

在网页开发中，表单元素是不可或缺的一部分，它们用于收集用户输入的信息，让用户和服务器进行交互。

在开发过程中，有时会遇到需要对多个表单子元素进行操作的情况，这时就需要使用jQuery来获取多表单子元素。

本文将介绍如何使用jQuery来获取多表单子元素，希望能对大家有所帮助。

一、利用子选择器获取多表单子元素在jQuery中，可以使用子选择器来获取多个表单子元素。

子选择器使用“>”符号，表示选择所有指定元素的直接子元素。

要获取class 为form的所有直接子元素input，可以使用以下代码：```$(".form > input")```通过这样的方式，我们就可以获取到class为form的所有直接子元素input，然后对它们进行操作。

二、利用后代选择器获取多表单子元素除了子选择器，jQuery还提供了后代选择器，可以获取多个表单子元素。

后代选择器使用空格符号（空格）来选择某个元素下的所有子元素。

要获取class为form下的所有input元素，可以使用以下代码：```$(".form input")```通过这样的方式，我们同样可以获取到class为form下的所有input元素。

三、遍历多表单子元素除了选择器，我们还可以使用jQuery的each()方法来遍历多个表单子元素。

each()方法用于遍历一个jQuery对象，为每个匹配的元素执行一个函数。

要遍历class为form的所有input元素，可以使用以下代码：```$(".form input").each(function(index, element) {// 对每个input元素进行操作});```通过这样的方式，我们可以对class为form的所有input元素进行遍历，并对它们进行操作。

jquery 定义方法摘要：1.引言2.jQuery 简介3.jQuery 方法的定义4.定义方法的注意事项5.结论正文：【引言】jQuery 是一个广泛使用的JavaScript 库，它简化了HTML 文档遍历、操作、事件处理和动画等功能的实现。

在jQuery 中，我们可以通过定义方法来扩展其功能，提高开发效率。

本文将详细介绍如何在jQuery 中定义方法。

【jQuery 简介】jQuery 是一个功能强大、易于使用的JavaScript 库，它极大地简化了HTML 文档遍历、操作、事件处理和动画等功能的实现。

开发者可以通过jQuery 提供的各种方法，更加方便地处理网页元素和交互。

【jQuery 方法的定义】在jQuery 中，我们可以通过以下方式定义方法：1.使用原型链：```javascript$.fn.myMethod = function() {// 方法实现};```这将在jQuery 对象上添加一个名为"myMethod" 的新方法。

2.直接在jQuery 对象上定义方法：```javascript$(document).ready(function() {$("div").myMethod = function() {// 方法实现};});```这将在所有div 元素上添加一个名为"myMethod" 的新方法。

【定义方法的注意事项】1.方法名应遵循驼峰命名法，例如：myMethod、mySecondMethod 等。

2.方法应接受适当的参数，参数数量和类型应与方法功能相匹配。

3.方法应返回一个适当的值，以表示其执行结果或副作用。

4.方法应遵循jQuery 的链式调用规范，即方法内部应使用`this` 关键字，并在需要时返回jQuery 对象。

【结论】在jQuery 中定义方法是一种扩展其功能、提高开发效率的有效方式。

一、选择网页元素jQuery的基本设计和主要用法,就是"选择某个网页元素,然后对其进行某种操作”.这是它区别于其他函数库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式,放进构造函数jQuery（）（简写为＄），然后得到被选中的元素。

选择表达式可以是CSS选择器:$（document)//选择整个文档对象＄(’＃myId’)//选择ID为myId的网页元素$（’div。

myClass')//选择class为myClass的div元素$（’input[name=first］')//选择name属性等于first的input元素也可以是jQuery特有的表达式：＄（'a：first’)//选择网页中第一个a元素$（'tr：odd’)//选择表格的奇数行$(’＃myForm ：input'）//选择表单中的input元素＄('div:visible’) //选择可见的div元素$（'div：gt(2)’)//选择所有的div元素，除了前三个＄（'div:animated'）//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery提供过滤器,可以缩小结果集：* $（’div')。

has（'p’); //选择包含p元素的div元素* $（’div’）。

not（’.myClass’）；//选择class不等于myClass的div元素* $(’div'）。

filter（’.myClass’）；//选择class等于myClass的div元素* ＄(’div’).first(）; //选择第1个div元素＊$('div’)。

eq（5）; //选择第6个div元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法:$('div’)。

一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。

这是它区别于其他函数库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为＄），然后得到被选中的元素。

选择表达式可以是CSS选择器:＄（document)//选择整个文档对象$（'#myId'）//选择ID为myId的网页元素$('div。

m yClass’)//选择class为myClass的div元素＄('input[name=first]’）//选择name属性等于first的input元素也可以是jQuery特有的表达式:＄('a：first’)//选择网页中第一个a元素$（’tr：odd’）//选择表格的奇数行＄(’#myForm ：input'）//选择表单中的input元素$（’div：visible’) //选择可见的div元素$（'div:gt（2)')//选择所有的div元素,除了前三个＄(’div:animated’)//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩小结果集：* $（'div').has（’p’）; //选择包含p元素的div元素＊$（’div'）.not('。

myClass'）；//选择class不等于myClass的div元素＊$(’div’）.filter（'.myClass'）; //选择class等于myClass的div元素＊$（’div’).first（); //选择第1个div元素＊$（’div')。

eq(5); //选择第6个div元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：$（'div’)。

jquery的remove方法jQuery的remove(方法是用于从DOM中删除指定元素的方法。

它可以帮助我们轻松地删除一个或多个元素。

在jQuery中，通过选择器选择一个或多个元素后，可以使用.remove(方法删除它们。

以下是.remove(方法的语法：```javascript$(selector).remove(;```其中，selector是用于选择要删除的元素的CSS选择器。

.remove(方法有多种用法，包括删除所有匹配的元素、从DOM中删除元素及其子元素、从DOM中删除指定元素的子元素等。

下面是.remove(方法的一些常见用法及其详解：1.删除所有匹配的元素```javascript$("#myElement").remove(;```这个例子中，使用$("#myElement")选择器选择了一个元素，并使用.remove(方法将其删除。

2.从DOM中删除元素及其子元素```javascript$("#myElement").remove(;```这个例子中，除了删除id为myElement的元素外，还会删除其所有子元素。

3.从DOM中删除指定元素的子元素```javascript$("#myElement").empty(;```这个例子中，.empty(方法用于删除id为myElement的元素的子元素。

4.删除多个元素```javascript$(".myClass").remove(;```这个例子中，使用.myClass选择器选择所有class为myClass的元素，并使用.remove(方法将它们都删除。

5.删除匹配条件的元素```javascript$("div:contains('text')").remove(;```这个例子中，使用:contains选择器选择匹配文本内容为text的div 元素，并使用.remove(方法将它们删除。

jquery的常用操作及方法jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。

它极大地简化了HTML 文档遍历、事件处理、动画和 Ajax 交互等操作。

以下是一些常用的jQuery 操作及其方法：1. HTML 操作：`text()`：设置或获取匹配元素的文本内容。

`html()`：设置或获取匹配元素的 HTML 内容。

2. CSS 操作：`addClass()`：添加一个或多个类到匹配的元素。

`removeClass()`：从匹配的元素中移除一个或多个类。

`toggleClass()`：切换匹配的元素的类。

`css()`：设置或获取匹配元素的样式属性。

3. 属性操作：`attr()`：获取或设置匹配元素的属性。

4. 元素操作：`append()`：向匹配元素的内部末尾插入内容。

`appendTo()`：将匹配元素添加到目标元素的内部末尾。

`before()`：在匹配元素的前面插入内容。

`insertBefore()`：将匹配元素插入到目标元素的前面。

5. 事件处理：`click()`：触发或绑定点击事件。

`hover()`：绑定鼠标悬停事件。

`mouseover()`：触发或绑定 mouseover 事件。

`mouseout()`：触发或绑定 mouseout 事件。

6. AJAX 操作：`ajax()`：执行 AJAX 请求。

7. 其他常用方法：`hide()`：隐藏匹配的元素。

`show()`：显示匹配的元素。

`toggle()`：切换匹配的元素的可见状态。

`val()`：获取或设置匹配元素的 value 值。

这些是 jQuery 的基本操作及方法，涵盖了 HTML、CSS、属性和事件处理等多个方面。

通过这些方法，可以方便地操作DOM，实现丰富的交互效果。

/*获得TEXT.AREATEXT的值*/var textval = $("#text_id").attr("value");//或者var textval = $("#text_id").val();/*获取单选按钮的值*/var valradio = $("input[@type=radio][@checked]").val();/*获取一组名为(items)的radio被选中项的值*/var item = $('input[@name=items][@checked]').val();/*获取复选框的值*/var checkboxval = $("#checkbox_id").attr("value")；/*获取下拉列表的值*/var selectval = $('#select_id').val();//文本框，文本区域：$("#text_id").attr("value",'');//清空内容$("#text_id").attr("value",'test');//填充内容//多选框checkbox：$("#chk_id").attr("checked",'');//使其未勾选$("#chk_id").attr("checked",true);//勾选if($("#chk_id").attr('checked')==true) //判断是否已经选中//单选组radio：$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项//下拉框select：$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项$("<option value='test'>test</option><optionvalue='test2'>test2</option>").appendTo("#select_id")//添加下拉框的option$("#select_id").empty()；//清空下拉框获取一组名为(items)的radio被选中项的值var item = $('input[@name=items][@checked]').val();//若未被选中则val() = undefined 获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;//重置表单$("form").each(function(){.reset();});1. 选取元素$(”#myid”)效果等于document.getElementById(”myid”), 但是写的字符要少好多啊.如果需要将jQuery对象转换成html元素, 则只需要取其第0个元素即可. 例如$(”#myid”)返回的是jQuery对象, 而$(”#myid”)[0]返回的就是html元素如果选择所有的img元素, 那么这么写: $(”img”)如果选择带有class=”TextBox”的div元素(<div class=”TextBox”></div>), 那么这么写: $(”div.TextBox”)选择带有myattr属性的元素$(”div[myattr]”)选择带有myattr属性, 并且属性值等于myclass的元素$(”div[myattr=’myclass’]”)属性不等于[myattr!=’myclass’]属性以my开头[myattr^=’my’]属性以class结尾[myattr$=’class’]属性包含cla这三个字符[myattr*=’cla’]如果一个选择会返回多个元素, 并且希望每返回一个元素, 就把某些属性应用到该元素上, 可以这么写$(”div”).each(function(){$(this).css(”background-color”, “#F00″);alert($(this).html());$(this).width(”200px”);});2.事件给页面加onload事件处理方法$(function(){alert(”页面结构加载完毕, 但是可能某些图片尚未加载(一般情况下, 此事件就够用了)”);});可以给页面绑定多个onload事件处理方法$(function(){alert(”我首先被执行”);});$(function(){a lert(”我第二被执行”);});绑定特殊事件$(”#myid”).keydown(function(){alert(”触发了keydown事件”);});除了这些常用的, 不常用的事件需要通过bind方法绑定3. 元素属性/方法得到一个元素的高度, $(”#myid”).height()得到一个元素的位置, $(”#myid”).offset() 返回的是一个offset对象, 如果取元素位置的top, 则$(”#myid”).offset().top,?取left则$(”#myid”).offset().left得到一个元素的innerHTML, $(”#myid”).html()得到一个元素的innerText, $(”#myid”).text()得到一个文本框的值, $(”#myid”).val()得到一个元素的属性, $(”#myid”).attr(”myattribute”)以上这些方法有个基本特征, 就是不带参数表示取值, 带有参数表示设定值(除了offset), 例如$(”#myid”).height(”20″);$(”#myid”).html(”<a href=”>asdasd</a>”)$(”#myid”).val(”asdasd”)需要注意, offset是只读的.给一个元素设置属性$(”#myid”).attr(”width”, “20%”)读取一个属性$(”#myid”).attr(”width”)一次指定多个属性$(”#myid”).attr({disabled: “disabled”, width:”20%”, height: “30″})删除属性$(”#myid”).removeAttr(”disabled”)应用样式$(”#myid”).addClass(”myclass”)删除样式$(”#myid”).removeClass(”myclass”)加一个样式$(”#myid”).css(”height”, “20px”)加一组样式$(”#myid”).css({height:”20px”, width:”100px”})需要注意的是: 如果是加一个样式, 这个样式的名字是css中的名字, 比如说style=”background-color:#FF0000″, 对应的jQuery写法是$(”#myid”).css(”background-color”, “#FF0000″)但是加一组样式的时候, 样式的名字就是javascript中的css名字了, 比如:myid.style.backgroundColor = “#FF0000″, 对应的jQuery写法是$(”#myid”).css({backgroundColor:”#FF0000″})4. 根据关系查找元素找和自己同级的下一个元素$(”#myid”).next()找和自己同级的所有位于自己之下的元素$(”#myid”).nextAll()找和自己同级的上一个元素$(”#myid”).prev()找和自己同级的所有位于自己之上的所有元素$(”#myid”).prevAll()找自己的第一代子元素$(”#myid”).children()找自己的第一个父元素$(”#myid”).parent()找自己的所有父元素$(”#myid”).parents()例子:$(”div.l4″).parents().each(function() {alert($(this).html());});会把class=l4的div的所有父元素都得到, 并且alert出他们的html例子:$(”div.l4″).parents(”div.l2″).each(function() { alert($(this).html()); });会得到class=l4的父元素, 该父元素必须是div, 而且其class=l2这里说的所有方法, 都可以带表达式, 表达式的写法参考第一部分5. 维护元素在body中增加一个元素$(”body”).append(”<input type=’text’ value=’asd’ />”)该语句会把这段html插入到body结束标签之前, 结果是<input type=’text’ value=’asd’ /></body>$(”body”).prepend(”<input type=’text’ value=’asd’ />”)该语句会把这段html插入到body开始标签之后, 结果是<body><input type=’text’ value=’asd’ />6.AJAX用get方法请求一个页面$.get(””,“q=jquery”, function(data, status){alert(data)})表示请求, 参数是q, 参数的值是jquery, 请求结束后(不管成功还是失败)执行后面的function, 该function有两个固定参数, data和status, data是返回的数据, status是本次请求的状态用post方法请求一个页面$.post(……..) 参数同get方法7.其他方法$.trim(str) 将str前后空格去掉$.browser 返回当前用户浏览器的类型$.browser.version返回当前浏览器的版本8. 插件jQuery支持插件, /plugins/上面有很多现成的插件, 也可以自己写自己写插件, 请参考/Core/jQ.....end#object和/Core/jQuery.extend#object1,下拉框:var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID 属性值$("#select").empty();//清空下拉框//$("#select").html('');$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option稍微解释一下:1.select[@name='country'] option[@selected] 表示具有name 属性，并且该属性值为'country' 的select元素里面的具有selected 属性的option 元素；可以看出有@开头的就表示后面跟的是属性。

jquery项⽬中⼀些常⽤⽅法1、获取url中的参数function getUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //构造⼀个含有⽬标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配⽬标参数以及解析中⽂乱码问题if (r != null) return decodeURI(r[2]); return null; //返回参数值}调⽤：getUrlParam(参数名称) 注意：参数名称是⼀个字符串2、封装ajax加移动端当数据没出现出现加载图标//封装ajax请求、function ajax_datatypeByXml(type, url, Xml_data, func) {//data数据可以为空$.ajax({type: type,url: url,async: false,dataType: "json",timeout: 30000, //超时时间：30秒data: Xml_data,beforeSend: function () {mui.showLoading("正在加载..", "div"); //加载⽂字和类型，plus环境中类型为div时强制以div⽅式显⽰ },complete: function () {mui.hideLoading(function () {});//隐藏后的回调函数},success: function (data) {if (data) {func(data);} else {mui.alert("数据加载失败");}},error: function() {mui.alert('服务器连接超时，请稍后再试');}});}//扩展mui.showLoading(function ($, window) {//显⽰加载框$.showLoading = function (message, type) {if ($.os.plus && type !== 'div') {$.plusReady(function () {plus.nativeUI.showWaiting(message);});} else {var html = '';html += '<i class="mui-spinner mui-spinner-white"></i>';html += '<p class="text">' + (message || "数据加载中") + '</p>';//遮罩层var mask = document.getElementsByClassName("mui-show-loading-mask");if (mask.length == 0) {mask = document.createElement('div');mask.classList.add("mui-show-loading-mask");document.body.appendChild(mask);mask.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });} else {mask[0].classList.remove("mui-show-loading-mask-hidden");}//加载框var toast = document.getElementsByClassName("mui-show-loading");if (toast.length == 0) {toast = document.createElement('div');toast.classList.add("mui-show-loading");toast.classList.add('loading-visible');document.body.appendChild(toast);toast.innerHTML = html;toast.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); }); } else {toast[0].innerHTML = html;toast[0].classList.add("loading-visible");}}};//隐藏加载框$.hideLoading = function (callback) {if ($.os.plus) {$.plusReady(function () {plus.nativeUI.closeWaiting();});}var mask = document.getElementsByClassName("mui-show-loading-mask");var toast = document.getElementsByClassName("mui-show-loading");if (mask.length > 0) {mask[0].classList.add("mui-show-loading-mask-hidden");}if (toast.length > 0) {toast[0].classList.remove("loading-visible");callback && callback();}}})(mui, window);3、初始化移动端根节点字体⼤⼩⽤作rem值window.addEventListener("resize", setSize, false);window.addEventListener("orientationchange", setSize, false);function setSize() {var oHtml = document.getElementsByTagName("html")[0];var iWidth = oHtml.getBoundingClientRect().width;$("html").css("fontSize", iWidth / 15)}4、根据年⽉获得当⽉天数的实现代码function getDaysInMonth(year, month) {month = parseInt(month, 10);var temp = new Date(year, month, 0);return temp.getDate();}5、屏蔽打印consoleconsole.log=function(){}6、当动态⽣成li时点击事件有时可能会触发两次解决办法$('body').off('click').on('click','selector',function(){});使⽤之前要清理掉body上绑定的click事件，利⽤了jQuery⾥⾯off()⽅法7、选择input框的选中状态操作<div class="desc"><input type="checkbox" id="selectAll" onclick="checkAll()">全选</div><script>function checkAll(){var checkedOfAll=$("#selectAll").prop("checked");$("input[name='procheck']").prop("checked", checkedOfAll);alert(checkedOfAll);}</script>8、⿏标移⼊移出事件并在移⼊时操作$(".contactus-wrap").mouseover( function () {clearTimeout(time);$(".contactus").css({"opacity": 1,"left":"12px"})});$(".contactus-wrap").mouseout(function () {time = setTimeout(function () {$(".contactus").css({"opacity": 0,"left": "-206px"})}, 500)});$(".contactus").mouseover(function () {clearTimeout(time); $(".contactus").css({"opacity": 1,"left": "12px"})});$(".contactus").mouseout(function () {time = setTimeout(function () {$(".contactus").css({"opacity": 0,"left": "-206px"})}, 500);});9、jquery中获取⽗级iframe中的dom元素$(parent.window.document).find("iframe").contents().find("#F_HTNO")；10、textarea⾃动换⾏，且⽂本框根据输⼊内容⾃适应⾼度<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>输⼊框⾃适应</title><script src="jquery.min.js"></script><script>// textare⾃动换⾏/*** ⽂本框根据输⼊内容⾃适应⾼度* @param {HTMLElement} 输⼊框元素* @param {Number} 设置光标与输⼊框保持的距离(默认0)* @param {Number} 设置最⼤⾼度(可选)*/var autoTextarea = function (elem, extra, maxHeight) {extra = extra || 0;var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),addEvent = function (type, callback) {elem.addEventListener ?elem.addEventListener(type, callback, false) :elem.attachEvent('on' + type, callback);},getStyle = elem.currentStyle ? function (name) {var val = elem.currentStyle[name];if (name === 'height' && val.search(/px/i) !== 1) {var rect = elem.getBoundingClientRect();return rect.bottom - rect.top -parseFloat(getStyle('paddingTop')) -parseFloat(getStyle('paddingBottom')) + 'px';};return val;} : function (name) {return getComputedStyle(elem, null)[name];},minHeight = parseFloat(getStyle('height'));elem.style.resize = 'none';var change = function () {var scrollTop, height,padding = 0,style = elem.style;if (elem._length === elem.value.length) return;elem._length = elem.value.length;if (!isFirefox && !isOpera) {padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));};scrollTop = document.body.scrollTop || document.documentElement.scrollTop;elem.style.height = minHeight + 'px';if (elem.scrollHeight > minHeight) {if (maxHeight && elem.scrollHeight > maxHeight) {height = maxHeight;style.overflowY = 'auto';} else {height = elem.scrollHeight;style.overflowY = 'hidden';};style.height = height + extra + 'px';// scrollTop += parseInt(style.height) - elem.currHeight;// document.body.scrollTop = scrollTop;// document.documentElement.scrollTop = scrollTop;elem.currHeight = parseInt(style.height);};};addEvent('propertychange', change);addEvent('input', change);addEvent('focus', change);change();};$(document).ready(function() {$("table td").each(function() {if ($(this).find("[datatype='required']").length > 0||$(this).find("[datatype='number']").length > 0) {$(this).css("position", "relative");}})})</script></head><body><table><tr><td><textarea datatype="required" id="grxygzjh"isheightauto="true" maxlength="1000"msg="必填项" name="grxygzjh" onfocus="autoTextarea(this)"placeholder="*请输⼊个⼈下⽉⼯作计划"style="width:99%; font-size: 15px; border-style: none none solid; border-color: rgb(255,255, 255) rgb(255, 255, 255) rgb(119, 119, 119); border-bottom-width: 1px;height: 39px; background: transparent; text-align:left"type="text"></textarea></td></tr></table></body></html>11、移动端悬浮按钮可拖动touchImg: function () {var flag = 0; //标记是拖曳还是点击var oDiv = document.getElementsByClassName('add-btn')[0];var disX,moveX,L,T,starX,starY,starXEnd,starYEnd;oDiv.addEventListener('touchstart',function(e){flag = 0;e.preventDefault();//阻⽌触摸时页⾯的滚动，缩放disX = e.touches[0].clientX - this.offsetLeft;disY = e.touches[0].clientY - this.offsetTop;//⼿指按下时的坐标starX = e.touches[0].clientX;starY = e.touches[0].clientY;//console.log(disX);});oDiv.addEventListener('touchmove',function(e){flag = 1;L = e.touches[0].clientX - disX ;T = e.touches[0].clientY - disY ;//移动时当前位置与起始位置之间的差值starXEnd = e.touches[0].clientX - starX;starYEnd = e.touches[0].clientY - starY;//console.log(L);if(L<0){//限制拖拽的X范围，不能拖出屏幕L = 0;}else if(L > document.documentElement.clientWidth - this.offsetWidth){L=document.documentElement.clientWidth - this.offsetWidth;}if(T<0){//限制拖拽的Y范围，不能拖出屏幕T=0;}else if(T>document.documentElement.clientHeight - this.offsetHeight){T = document.documentElement.clientHeight - this.offsetHeight;console.log(T)}moveX = L + 'px';moveY = T + 'px';//console.log(moveX);this.style.left = moveX;this.style.top = moveY;});window.addEventListener('touchend',function(e){//alert(parseInt(moveX))//判断滑动⽅向if(flag === 0) {//点击}});}}12、监听input中value改变//监听input中value改变var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;//浏览器兼容var config = { attributes: true, childList: true }//配置对象$("input").each(function () {var _this = $(this);var observer = new MutationObserver(function (mutations) {//构造函数回调mutations.forEach(function (record) {if (record.type == "attributes") {//监听属性window.location.reload();}if (record.type == 'childList') {//监听结构发⽣变化//do any code}});});observer.observe(_this[0], config);});13、监听多张图⽚加载完成$.when.apply(null, $(".ccc").map(function(i, e) {var dfd = $.Deferred();if (plete) {console.log(`${i}`)dfd.resolve()} else {e.onload = function() {console.log(`${i}`)dfd.resolve()}}return dfd;}).toArray()).done(function() {console.log("图⽚加载完成");//要执⾏的⽅法loop();});console.log("图⽚开始加载");14、在不屏蔽F12的情况下禁⽌⽤户修改⽹页var submitBtn = parent.document.getElementById("lbtnPrint");var blackLbtnPrint = parent.document.getElementById("blacklbtnPrint"); if ($(submitBtn).length > 0 || $(blackLbtnPrint).length > 0) {var ConsoleManager = {onOpen() {$(submitBtn).hide();$(blackLbtnPrint).hide();// alert("Console is opened")},onClose() {window.parent.location.reload();$(submitBtn).show();$(blackLbtnPrint).show();// alert("Console is closed")},init() {var self = this;var x = document.createElement('div');var isOpening = false, isOpened = false;Object.defineProperty(x, 'id', {get() {if (!isOpening) {self.onOpen();isOpening = true;}isOpened = true;}});setInterval(function () {isOpened = false;(x);console.clear();if (!isOpened && isOpening) {self.onClose();isOpening = false;}}, 200)}}////如果f12打开就隐藏打印按钮ConsoleManager.onOpen = function () {$(submitBtn).hide();$(blackLbtnPrint).hide();// alert("Console is opened")}ConsoleManager.onClose = function () {window.parent.location.reload();$(submitBtn).show();$(blackLbtnPrint).show();// alert("Console is closed")}ConsoleManager.init();}15、iframe在移动端的缩放的⽰例代码//缩放ifrmae页⾯var Width = document.body.scrollWidth;var Height = document.body.scrollHeight;var zoomScale = Width / 640;setTimeout(function () {console.log($("#ifr"))$("#ifr").css({"transform": "scale(" + zoomScale + ")","width": (Width / zoomScale),"height": (Height / zoomScale),"transform-origin": "0 top 0"});}, 1000)。

jQuery -JQ方法大全－jQueryJQuery:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值$("img").attr("title", function() { return this.src }); 给某个元素添加属性/值$("元素名称").html(); 获得该元素内的内容（元素，文本等）$("元素名称").html("new stuff"); 给某元素设置内容$("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值$("元素名称").removeClass("class") 给某元素删除指定的样式$("元素名称").text(); 获得该元素的文本$("元素名称").text(value); 设置该元素的文本值为value$("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式$("input元素名称").val(); 获取input元素的值$("input元素名称").val(value); 设置input元素的值为valueManipulation：$("元素名称").after(content); 在匹配元素后面添加内容$("元素名称").append(content); 将content作为元素的内容插入到该元素的后面$("元素名称").appendTo(content); 在content后接元素$("元素名称").before(content); 与after方法相反$("元素名称").clone(布尔表达式) 当布尔表达式为真时，克隆元素（无参时，当作true处理）$("元素名称").empty() 将该元素的内容设置为空$("元素名称").insertAfter(content); 将该元素插入到content之后$("元素名称").insertBefore(content); 将该元素插入到content之前$("元素").prepend(content); 将content作为该元素的一部分，放到该元素的最前面$("元素").prependTo(content); 将该元素作为content的一部分，放content的最前面$("元素").remove(); 删除所有的指定元素$("元素").remove("exp"); 删除所有含有exp的元素$("元素").wrap("html"); 用html来包围该元素$("元素").wrap(element); 用element来包围该元素Traversing：add(expr)add(html)add(elements)children(expr)contains(str)end()filter(expression)filter(filter)find(expr)is(expr)next(expr)not(el)not(expr)not(elems)parent(expr)parents(expr)prev(expr)siblings(expr)Core：$(html).appendTo("body") 相当于在body中写了一段html代码$(elems) 获得DOM上的某个元素$(function(){……..}); 执行一个函数$("div > p").css("border", "1px solid gray"); 查找所有div的子节点p，添加样式$("input:radio", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮$.extend(prop) prop是一个jQuery对象，举例：jQuery.extend({min: function(a, b) { return a b ? a : b; }});jQuery( expression, [context] ) ---$( expression, [context]); 在默认情况下，$()查询的是当前HTML文档中的DOM元素。