概述

　　JQuery是一个JavaScript库，jQuery的核心思想是“先选中某些网页元素，然后对其进行某种处理”（find something, do something），也就是说，先选择后处理，这是jQuery的基本操作模式。所以，绝大多数jQuery操作都是从选择器开始的，返回一个选中的结果集。

JQuery选择器

　　jQuery 参考手册 - 选择器：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

JQuery构造函数

除了CSS选择器以外，JQuery还可以使用其它参数构造实例：

CSS选择器
DOM对象
HTML字符串

$('#elmentId')    //选择器

$(document.body)    //DOM对象

$('<li class="greet">test</li>')    //HTML字符串

JQuery构造函数允许第2个参数：

$('li', someElement);

//someElement可以是DOM对象 或 JQuery对象，

上面代码表示，只寻找属于someElement对象下属的li元素。someElement可以是jQuery对象的实例，也可以是DOM对象，省略第2个参数，则查找<HTML>对象下的所有元素。

JQuery构造函数返回结果集

jQuery对象返回的结果集是一个类似数组的对象，包含了所有被选中的网页元素。

属性和方法：

length 结果集数量
[index] 或 get(index) 下标运行符/get方法，返回结果索引处对象，其为DOM对象。
is(条件) 选中结果是否符合指定条件
eq(index) 同get()方法，所不同的是eq返回的是Jquery对象。
each() 和 map()方法，遍历结果集,用法基本一样，区别在于each方法没有返回值，只是对每一个元素执行某种操作，而map方法返回一个新的jQuery对象。
```
$("input").map(function (index, element){

    return $(this).val();

})

.get()

.join(", ")
```
first方法，last方法：first方法返回结果集的第一个成员，last方法返回结果集的最后一个成员。
```
$("li").first()

$("li").last()
```

next方法，prev方法：next方法返回紧邻的下一个同级元素，prev方法返回紧邻的上一个同级元素。

$("li").first().next()

$("li").last().prev()

$("li").first().next('.item')

$("li").last().prev('.item')

//链式操作：jQuery最方便的一点就是，它的大部分方法返回的都是jQuery对象，因此可以链式操作。也就是说，后一个方法可以紧跟着写在前一个方法后面。

parent方法，parents方法，children方法，依次为返回父元素，返回祖先元素直至HTML元素，返回所有子元素。
siblings方法，nextAll方法，prevAll方法，依次为返回所有同级元素，返回当无元素之后的同级元素，返回当前元素之前的同级元素。
closest方法，find方法，closest方法返回当前元素，以及当前元素的所有上级元素之中，第一个符合条件的元素。find方法返回当前元素的所有符合条件的下级元素。
```
$('li').closest('div')

$('div').find('li')
```
add方法，addBack方法，end方法：依次为结果集填加元素，其它待补充。
filter方法，not方法，has方法：依次为结果集过滤符合参数条件的元素（参数可以是选择器、函数、DOM对象、JQuery对象）、not与filter相反、has与filter类似，但过滤的是其子元素。
html(),text(): 返回元素HTML代码或文本。
addClass方法，removeClass方法，toggleClass方法：添加类、移除类，添加/移除切换开关；
css(),CSS样式属性处理；
val() 返回结果集第1个元素的值或设置结果集所有元素的值；
```
$('input[type="text"]').val()

$('input[type="text"]').val('new value')
```
prop方法，attr方法前者返回DOM元素属性，后者返回网页元素属性；
removeProp方法，removeAttr方法：移除dom 或网页属性；

data方法 data方法用于在一个DOM对象上储存数据。

// 储存数据

$("body").data("foo", 52);

// 读取数据

$("body").data("foo");

append方法，appendTo方法 append方法将参数中的元素插入当前元素的尾部，appnedTo将当前元素插入参数元素的尾部；
prepend方法，prependTo方法 prepend方法将参数中的元素，变为当前元素的第一个子元素（参数若为当前页面元素，则移动元素），prependTo方法将当前元素变为参数中的元素的第一个子元素。
after方法，insertAfter方法 after方法将参数中的元素插在当前元素后面，insertAfter方法将当前元素插在参数中的元素后面。
before方法，insertBefore方法，功能上同，只是插入目标元素前面；
wrap方法，wrapAll方法，unwrap方法，wrapInner方法为元素添加父元素，将元素包裹起来；
clone()方法克隆元素，克隆包括元素ID属性，若插入同一文档，需要考虑移聊，避免ID重复；
remove方法，detach方法，replaceWith方法移除和替换元素；

下面为动画效果相关的方法：

show：显示当前元素。
hide：隐藏当前元素。
toggle：显示或隐藏当前元素。
fadeIn：将当前元素的不透明度（opacity）逐步提升到100%。
fadeOut：将当前元素的不透明度逐步降为0%。
fadeToggle：以逐渐透明或逐渐不透明的方式，折叠显示当前元素。
slideDown：以从上向下滑入的方式显示当前元素。
slideUp：以从下向上滑出的方式隐藏当前元素。
slideToggle：以垂直滑入或滑出的方式，折叠显示当前元素。

$('p').fadeOut(300, function() {

  $(this).remove();

});

//接受参数：动画过渡时间（毫秒）和成功后的回调函数；

上面这些方法全部基于animate方法，下面例子：点击链接，回到页面头部的写法：

$('a.top').click(function (e) {

  e.preventDefault();

  $('html, body').animate({scrollTop: 0}, 800);

});

特定元素可以使用的方法：

serialize（）和 serializeArray（） serialize方法用于将表单元素的值，转为url使用的查询字符串，serializeArray将表单值转为数组；

//转为字符串

$( "form" ).on( "submit", function( event ) {

  event.preventDefault();

  console.log( $( this ).serialize() );

});

// single=Single&multiple=Multiple&check=check2&radio=radio1

//转为数组

$("form").submit(function (event){

  console.log($(this).serializeArray());

  event.preventDefault();

});

//    [

//        {name : 'field1', value : 123},

//        {name : 'field2', value : 'hello world'}

//    ]

内置循环

jQuery默认对当前结果集进行循环处理，所以如果直接使用jQuery内置的某种方法，each和map方法是不必要的。

$("div").addClass("class1");

//结果集中所有div增加类“class1"

参考

　　【1】http://www.w3school.com.cn/jquery/jquery_reference.asp

　　【2】阮一峰，http://javascript.ruanyifeng.com/jquery/basic.html#toc4

JQuery系列（1） - 选择器、构造函数、实例方法的更多相关文章

jQuery系列：选择器
jQuery选择器通过标签名.属性名或内容对DOM元素进行选择,而不用担心浏览器的兼容性. 1. 基本选择器基本选择器是jQuery中使用最频繁的选择器,由元素ID.class.元素名.多个选择符组 ...
jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
jQuery系列第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元素的标签名.属性名.状态等进行快速准确 ...
jQuery系列（二）：jQuery的选择器
css中的选择器有:
jQuery使用（一）：jQuery对象与选择器
一.简单的一些介绍 1.jQuery是由普通的是由一些系列操作DOM节点的函数和一些其他的工具方法组成的js库. 2.为什么要使用jQuery库? jQuery面向用户良好的设计在使用过程中彻底解放了 ...
jquery系列教程6-ajax的应用全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
jQuery系列第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点使用 ...

随机推荐

Android刘海屏适配 ----- ImmersionBar
android 4.4以上沉浸式状态栏和沉浸式导航栏管理,适配横竖屏切换.刘海屏.软键盘弹出等问题,可以修改状态栏字体颜色和导航栏图标颜色,以及不可修改字体颜色手机的适配,适用于Activity.Fr ...
maven设置阿里云仓库
到maven安装目录的conf下setting.xml文件找到mirrors标签中添加 <mirror> <id>nexus-aliyun</id> <mi ...
python实践项目九：操作文件-修改文件名
描述:多个文件,文件名名包含美国风格的日期( MM-DD-YYYY),需要将它们改名为欧洲风格的日期( DD-MM-YYYY) 代码1:先创建100个文件名为美国风格日期的文件(文件路径为项目当前路径 ...
生信-使用NCBI进行目的基因的引物设计
使用NCBI进行目的基因的引物设计全文概述利用生信工具进行目的基因的引物设计,使用了NCBI进行筛选与设计引物,使用 idtdna对筛选出的DNA进行检查.本文分享了如何筛选出高质量的基因引物,帮 ...
讲解JavaScript中对闭包的理解
1.JS中变量的作用域在理解闭包之前,我们得弄清楚JS中变量的作用域原理,它分为全局作用域和局部作用域,它有一个特点就是局部可以获取全局的声明变量,而全局却不能得到局部声明的变量,我们先来看一个小例 ...
[转帖]SpringBoot集成redisson分布式锁
SpringBoot集成redisson分布式锁 https://www.cnblogs.com/yangzhilong/p/7605807.html 前几天同事刚让增加上这一块东西. 百度查一下啥 ...
函数的练习2——python编程从入门到实践
8-9 魔术师:创建一个包含魔术师名字的列表,并将其传递一个名为show_magicians()的函数,这个函数打印列表中每个魔术师的名字. def show_magicians(magicians) ...
Django框架深入了解_04(DRF之url控制、解析器、响应器、版本控制、分页)
一.url控制基本路由写法:最常用 from django.conf.urls import url from django.contrib import admin from app01 impo ...
18 IO流（十五）——RandomAccessFile随机访问文件及使用它进行大文件切割的方法
本文部分内容转自:https://blog.csdn.net/nightcurtis/article/details/51384126 1.RandomAccessFile特点 RandomAcces ...
CacheManager.Core
GitHub地址:https://github.com/MichaCo/CacheManager CacheManager的优点: 让开发人员的生活更容易处理和配资缓存,即使是非常复杂的缓存方案. C ...

JQuery系列（1） - 选择器、构造函数、实例方法

概述

JQuery选择器

JQuery构造函数

JQuery构造函数返回结果集

JQuery系列（1） - 选择器、构造函数、实例方法的更多相关文章

随机推荐

热门专题