转角羊儿
转角羊儿

juery笔记

文章目录

  • Jquery
      • 一、什么是 jQuery
      • 二、如何使用 jQuery
      • 三、如何选择 jQuery 版本
      • 四、jQuery 的运行原理
      • 实例方法
        • 1、一般通过一个字符串来标识匹配的元素
        • 2、支持多个选择器任意组合使用
        • 3、jQuery 特有的选择器，当然也可以和其他选择器任意组合使用
        • 4、元素筛选（方法多，允许函数）
        • 五、ready() 准备就绪时执行代码
        • 六、jQuery 核心
          • 1、Get and Set in One 原则
          • 2、Get first Set all 原则
          • 3、容错机制：
        • 七、参数规则：
        • 八、链式编程风格
        • 九、属性操作
        • document.ready 和 window.onload 的区别
      • 第二节课选择元素相关方法
        • .get()：获取指定原生的 dom 对象
        • .eq()
        • .find()：在什么范围下查找
        • .filter() --->根据原来的基础给出制定条件。(针原来选择的东西过滤，不能又选择又过滤)
        • .not()与.filter()反择
        • .has()筛选
        • .is() 判断是否有交集-->返回 ture/false
        • $.end()--->回退到之前的对象
      • 第三节课 取赋值相关方法：
        • .html() 函数用于设置或返回当前 jQuery 对象所匹配的 DOM 元素内的 html 内容。
        • .text() --->基于 innerText()
        • .val()(针对表单元素来操作的)获取表单相关元素的 val 值与 html 的用法相似
        • .size()
        • addClass() 方法向被选元素添加一个或多个类。
        • removeClass() 方法从被选元素移除一个或多个类。
        • .hasClass() 判断是否存在类名
        • css()函数用于设置或返回当前 jQuery 对象所匹配的元素的 css 样式属性值。
        • .attr() 方法设置或返回被选元素的属性值。
        • .prop() 基于原生 js 的 dom 对象的操作
      • 基于 jQuery 对象查改删增相关方法：
        • next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。
        • .prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
        • prevAll() 函数用于选取每个匹配元素之前的所有同辈元素，并以 jQuery 对象的形式返回。
        • $.nextAll() 函数用于选取每个匹配元素之后的所有同辈元素，并以 jQuery 对象的形式返回。
        • .nextUntil() )函数用于选取每个匹配元素之后所有的同辈元素，直到遇到符合指定表达式的元素为止，并以 jQuery 对象的形式返回。
        • .prevUntil() 函数用于选取每个匹配元素之前所有的同辈元素，直到遇到符合指定表达式的元素为止，并以 jQuery 对象的形式返回。
        • .siblings() 函数用于选取每个匹配元素的所有同辈元素(不包括自己)，并以 jQuery 对象的形式返回。
        • .parent()函数用于选取每个匹配元素的上一级父元素，并以 jQuery 对象的形式返回。
        • .parents() 函数用于选取每个匹配元素的上二级以上所有父元素，并以 jQuery 对象的形式返回。
        • .closest()函数将从当前元素本身开始，逐级向上查找第一个符合指定表达式的元素，该元素可能是当前元素自身，也可能是最靠近当前元素的一个祖先元素,并以 jQuery 对象的形式返回。
        • .offsetparent()函数用于查找离当前匹配元素最近的被定位的祖辈元素。
        • .slice()--->截取指数范围，左闭右开区间
        • .insertAfter() 函数用于将当前所有匹配元素插入到指定元素之后。
        • .before() 函数用于在每个匹配元素之前插入指定的内容。
        • .appendTo() 函数用于将当前所有匹配元素追加到指定元素内部的末尾位置。
        • .prependTo() 函数用于将当前所有匹配元素追加到指定元素内部的起始位置。
        • .append() 函数用于向每个匹配元素内部的末尾位置追加指定的内容。
        • .prepend() 函数用于向每个匹配元素内部的起始位置追加指定的内容。
        • .remove()从文档中移除匹配的元素，包括所有文本和子节点。
        • .detach()
        • .empty()
      • 第四节课
        • .wrap()函数用于在每个匹配元素外部包裹指定的 HTML 结构。
        • .wrapInner()里面加 函数用于在每个匹配元素的所有子节点外部包裹指定的 HTML 结构。
        • .unwrap()移除与.wrap()相反 函数用于移除每个匹配元素的父元素。
        • .wrapAll() 函数用于在所有匹配元素用单个元素包裹起来。
        • clone()函数用于克隆当前匹配元素集合的一个副本（clone() 方法生成被选元素的副本，包含子节点、文本和属性。），并以 jQuery 对象的形式返回。你也可以简单地理解为：克隆当前 jQuery 对象。
        • .data() 函数用于在当前 jQuery 对象所匹配的所有元素上存取数据。
        • .removeData()函数用于移除在当前 jQuery 对象所匹配的每一个元素上存储的指定键名的数据项。
      • 第五节课
        • .on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
        • .off()解绑事件
        • one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。
        • .trigger()帮你触发自定义事件
        • .hover()
      • 第六节课
        • $("selector").show()
        • $("selector").hide()
        • $("selector").toggle()
        • $("selector").fadeln() 以改变透明度来显示
        • $("selector").fadeout()以改变透明度来隐藏
        • $("selector").fadeToggle()以改变透明度来切换显示隐藏状态
        • $("selector").fadeTo() 由指定的时间将透明度改变到指定的透明度
        • $("selector").slideDown() 向下显示，slow()是水平与垂直方向同时展开，而 slideDown 是仅仅在垂直方向向下展开
        • $("selector").slideToggle() 垂直方向上切换,toggle 是水平与垂直两个方向上的，而 slideToggle 是仅仅垂直方向的。
        • .animate()
      • $("selector").stop() 停止正在执行动画
        • .finish()
        • $("selector").delay() 延迟执行动画
        • jQuery.fx.off = true 运动的开关
        • jQuery.queue() 函数详解
        • jQuery.dequeue() 函数详解
      • 第七节课
        • jQueryObject.position( )
        • $.scrollLeft()
        • $.scrollTop()
        • .height()/ .width()--->content
        • .innerWidth()/.innerHeight()--->content + padding
        • .outerWidth()/.outerWidth()--->content + padding + border
      • 第八节课
        • jQuery.each()函数用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。
        • .children()
        • .index()
      • 第九节课
        • jQuery.type()函数用于确定 JavaScript 内置对象的类型，并返回小写形式的类型名称。
        • $.isArray() $.isFunction() $.isWindow…
        • $.isWindow 判断是不是 window
        • $.trim() 消除空格
        • $.proxy() 改变 this 指向
        • list.init();
        • $.each() 循环 map...
        • $.map()
        • $.parseJSON()
        • $.makeArray() 类数组转换成数组
        • $.extend() 插件扩展（工具方法）
        • $.fn.extend() 插件扩展（实例方法）
      • jQuery 工具方法-高级方法
        • $.ajax() - 基本使用
        • $.Callbacks() 回调
        • mouseover() 方法
        • click() 方法
      • serialize()方法
      • serializeArray()方法

Jquery

一、什么是 jQuery

  • 网址：https://codeplayer.vip/p/j7sua

jQuery 是一个非常流行的快速、小巧、功能强大的开源 JavaScript 库。
“Write less，do more”

它还为我们做了跨浏览器的兼容（小数无法兼的 API 官方会作特殊的说明）

二、如何使用 jQuery

1.只需要引入 jQuery 库的 js 文件(官方网站)

cdn：http://www.jq22.com/cdn/#a2

2.下载地址：http://www.jq22.com/jquery-info122（放在自己的服务器上）

运行代码：有两个版本：

1、一个是源代码：jquery-version.js（version 表示具体版本号）

2、压缩处理后的版本：jquery-version.min.j、

国内许多知名厂商都提供了 jQuery 库文件的 CDN 加速服务，你可以在页面中直接引入对应的链接，就可以直接使用其提供的 jQuery 库，而无需将 jQuery 库文件放在自己的服务器上再引入。

官方地址（下载 api 查询等）:

  • 中文：https://www.jquery123.com/

  • 英文原版： https://jquery.com/

三、如何选择 jQuery 版本

1.x 版本为 1.11.1(pc 端)
2.x 版本 不再支持 IE 6 ~ IE 8,兼容 IE 6 ~ IE 8，推荐使用 1.x（移动端）
3.x 版本(最新)

四、jQuery 的运行原理

  • 在 jQuery 库中实际上定义了一个 jQuery()方法，它是 jQuery 库的核心。我们调用该方法并传入指定的参数，就以返回一个 jQuery 实例对象，该对象中包含匹配的一个或多个 DOM 元素。接着，我们就可以使用 jQuery 对象上的方法来操作它所匹配的 DOM 元素。

  • 注意：既然获得的是 jQuery 对象，你就只能使用 jQuery 对象的方法，而不能在 jQuery 对象上调用 DOM 元素(Element 对象)自身的方法(比如 getElementById())，除非你已经通过某些方式将它转换成了 DOM 元素。

  • jQuery 定义了一个别名变量 $

  • (jQuery === $) 都是全局变量

  • console.log(jQuery, jQuery === $);

  • console.log($(‘div’));

返回值：

1、构造函数

2、类数组对象

juery笔记_第1张图片

实例方法

选择元素：

$(); 此函数可以传递多种参数，返回值是对象（jq 对象）—> 使用 jQuery 选择器选取元素，并封装为 jQuery 对象

1、一般通过一个字符串来标识匹配的元素

$('#uid') // 选取id属性为"uid"的单个元素
$('p') // 选取所有的p元素
$('.test') // 选择所有带有 CSS 类名"test"的元素
$('[name=books]') // 选择所有 name 属性"books"的元素

jQuery 获取元素就是通过类似于 CSS 选择器的字符串来匹配对应的元素，我们一般将其称作 jQuery 选择器(selector)。几乎所有的 CSS 选择器都可以当做 jQuery 选择器来使用，只要 CSS 选择器对哪些元素生效，对应的 jQuery 选择器就可以选取到哪些元素。

2、支持多个选择器任意组合使用

多个选择器以空格或指定符号隔开，将匹配与前者具有指定关系的最后一个选择器所表示的元素

$("#uid span"); // 选择id为"uid"的元素的所有后代span元素
 $("p > span"); // 选择p元素的所有子代span元素

 $("div + p"); // 选择div元素后面紧邻的同辈p元素
 $("div p span"); // 选择div元素的所有后代p元素的后代span元素

$("li[data$="Duyi"]); // 选择 li 元素的有 dat 这个属性，并且是'Duyi'结尾的

$("li[data^="Duyi"]); // 选择li元素的有dat这个属性，并且是'Duyi'开头的

// 多个选择器之间没有空格，将匹配同时满足这些选择器条件的元素

$("p#uid"); // 选择 id 属性为"uid"的 p 元素
$("div.foo"); // 选择所有带有CSS类名"foo"的div元素

$(".foo.bar"); // 选择所有同时带有 CSS 类名"foo"和"bar"的元素
$("input[name=books][id]"); // 选择所有 name 属性为"books"并且具备 id 属性的元素

3、jQuery 特有的选择器，当然也可以和其他选择器任意组合使用

$(':checkbox') // 选取所有的 checkbox 元素
$(':text') // 选取所有 type 为 text 的 input 元素

（jQuery 选择器一览表）https://codeplayer.vip/p/j7smr

$('选择器字符串')

匹配到指定的元素后，将返回一个 jQuery 对象。该对象就包含匹配到的所有 DOM 元素。如果指定的选择器没有匹配到任何元素，将返回一个空的 jQuery 对象(不包含任何 DOM 元素)。

Query 也可以直接把一个或多个 DOM 元素直接转换成 jQuery 对象，以便于我们使用 jQuery 对象的方法对其进行操作。

var uid = document.getElementById("uid");
---> $( uid );

jQuery 还支持将 HTML 字符串转换为临时 DOM 元素，并包含在返回的 jQuery 对象中。

$('') // 包含一个临时的 span 元素
$('
Hello CodePlayer
')

// 包含一个临时的 div 元素，其内嵌一个子节点 p 元素

4、元素筛选（方法多，允许函数）

jQuery 的文档筛选方法一览表：https://codeplayer.vip/p/j7sst

// 以下方法都返回一个新的 jQuery 对象，他们包含筛选到的元素
$('ul li').eq(1) // 选取 ul li 中匹配的索引顺序为 1 的元素(也就是第 2 个 li 元素)

五、ready() 准备就绪时执行代码

如果我们在中引入 jQuery 库文件，并编写相应的 jQuery 代码来操作 DOM 元素。这很可能导致操作无法成功,因为此时内的元素可能还没有加载出来，也就获取不到对应的元素。因此，我们一般会将自己的 jQuery 代码写在

ready()事件函数中。ready()函数的作用相当于 window.onload，它用于在当前文档加载准备就绪后执行对应的函数。

$(document).ready(function(){ // 在这里编写我们希望在DOM准备就绪后执行的代码 });
// $( function ) 是 $(document).ready( function ) 的简写形式
$( function(){ // 在这里编写我们希望在 DOM 准备就绪后执行的代码 } );

jQuery 的 ready()函数可以重复调用，绑定的回调函数将在 DOM 准备就绪后按照绑定顺序依次执行。此外，ready()和 window.onload 并不兼容，因此不要混合使用。

六、jQuery 核心

1、Get and Set in One 原则

为了更加易于使用，jQuery 提供了简洁的 DOM 操作 API，其方法往往是"读写一体"的。也就是说，某个方法既可用于读取操作，也可用于设置操作。如果没有为其传入表示值的参数，则表示获取操作，将返回获取到的数据；如果为其传入了表示值的参数，则表示设置操作，它将设置 DOM 元素指定属性的值。
例子：

// 返回一个匹配 id 为"username"的元素的 jQuery 对象
var uid = $('#username')
// 没有传入value参数，返回第一个匹配元素的value属性值
var value = uid.val()
// 传入了value参数，设置所有匹配元素的value值为"CodePlayer" uid.val("CodePlayer");
2、Get first Set all 原则

jQuery 对象几乎所有的 DOM 操作方法都遵守"Get first Set all"原则。简而言之，假设当前 jQuery 对象匹配多个元素，如果使用 jQuery 对象的方法来获取数据("读"数据)，则只会获取第一个匹配元素的数据；如果使用 jQuery 对象的方法来设置元素数据("写"数据)，则会对所有匹配元素都进行设置操作。

3、容错机制：

1）下面不会报错

$(null) --->
$(undefiend) ---> 反的 jQuery.fu.init {}

2）$(null).css()也不会报错

3）获取到原生的 dom 后，可以通过$()包装过后，使用 jquery 对象上的方法

$('.wrapper .demo').each(function (index, ele) {
    console.log(ele) //ele 是原生的 dom
    $(ele) //通过 jquery 包装成为 jquery 对象
        .find('span')
        .css({ color: colorArr[index] })
})

提高页面的运转概率，

七、参数规则：

css selector：CSS 选择器

jquery unique selector：jquery 特有的选择器

eg:

$('.wrapper ul li:eq(-1)')

$('li[data^='Duyi']')
$('li[data$='Duyi']')
Null/Undefined:

Dom：原生 dom 对象

$(function(){}) $(document).ready()

两参数 css selector 和 context 执行期上下文

eg:

$('ul', 'wrapper')

（jQuery 选择器） http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

八、链式编程风格

// jQuery 的链式编程风格
$('div').find('ul').addClass('menu').children().css('margin', 0).hide()

// 以下是上述代码的分解描述

$('div') // 返回一个匹配所有 div 元素的 jQuery 对象 .
find('ul') // 返回匹配这些 div 元素中的所有后代 ul 元素的 jQuery 对象
    .addClass('menu') // 为这些 ul 元素添加 CSS 类名"menu"，并返回当前对象本身
    .children() // 返回匹配这些 ul 元素中的所有子代元素的 jQuery 对象
    .css('margin', 0) // 为这些子代元素设置 css 样式"margin: 0"，并返回当前对象本身
    .hide() // 隐藏这些子代元素，并返回当前对象本身

这种链式编程风格的实现机制，就是 jQuery 对象的所有实例方法，在没有特殊的返回需求的情况下，一般都会返回该 jQuery 对象本身(或者其它 jQuery 对象)，因此我们可以继续调用返回的 jQuery 对象上的方法。

$("#uid").val()、 $("div").attr("id")等方法在没有传入值参数时，它们将返回指定 DOM 元素的特定属性值，它们有特定的返回需求，因此无法进行链式编程。如果是$("#uid").val("CodePlayer")、 $("div").attr("id", "myId")等情况，此时它们不需要返回特定的值，将返回当前 jQuery 本身，因此可用于链式编程。

九、属性操作

jQuery 的属性操作方法一览表

$('selector').val() // 获取第一个匹配元素的value值(一般用于表单控("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"

$('selector').html() // 获取第一个匹配元素的innerHTML值
$('selector').html('Hello') // 设置所有匹配元素的 innerHTML 值为"Hello"
$('selector').text() // 获取第一个匹配元素的innerText值(jQuery已进行兼容处理) $("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"

document.ready 和 window.onload 的区别

  • 首先$(function(){}) 和 ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 是 一 个 方 法 ， (document).ready(function(){}) 是一个方法， (document).ready(function())是一个方法，(function(){})为简写（用的多）

  • document.ready 方法在 DOM 树加载完成后就会执行，而 window.onload 是在页面资源（比如图片和媒体资源，
    它们的加载速度远慢于 DOM 的加载速度）加载完成之后才执行。

  • 也就是说$(document).ready 要比 window.onload 先执行。

window.onload = function () {
    document.getElementById('bg').style.backgroundColor = '#F90'
}

第二节课选择元素相关方法

.get()：获取指定原生的 dom 对象

<img src="test1.jpg"/>

<img src="test2.jpg"/>
$("img").get(0);

//结果：
//[  ]



console.log($('.demo').get(undefined));
//[dom,  dom,  dom]
.eq()返回第几个jq对象
$('.demo:eq(0)') //只能针对某一个 dom
$('.demo').eq(0)     //方便链式调用
.not()
.is()
.has()
.add() //集中操作
.end() //回退操作

get() : //方法获得由选择器指定的 DOM 元素。

语法：$(selector).get(index)

.eq()

语法：

1、:eq() 选择器选取带有指定 index 值的元素–> $(“:eq(index)”)

2、.eq() 获取指定 jq 对象–> $(“index”).eq()

.find()：在什么范围下查找

  • 语法：find()函数用于选取每个匹配元素的符合指定表达式的后代元素，并以 jQuery 对象的形式返回。

    这里的表达式包括：选择器(字符串)、DOM 元素(Element)、jQuery 对象。

.filter() —>根据原来的基础给出制定条件。(针原来选择的东西过滤，不能又选择又过滤)

  • 语法：筛选出符合指定表达式的元素，并以 jQuery 对象的形式返回。

这里的表达式包括：选择器(字符串)、DOM 元素(Element)、jQuery 对象、函数。


//jquery
$('.wrapper ul').find('li').filter(':even').css({color: 'red'});
//function
$('.rapper ul li').filter(function (index, ele) {
//ele === this
// console.log(index, ele, this)
//true 留下来 false 不要
return index % 2 = 0;
}).css({color: 'red'})

.not()与.filter()反择

  • 语法：not()函数用于从匹配元素中删除符合指定表达式的元素，并以 jQuery 对象的形式返回保留的元素。
    这里的表达式包括：选择器(字符串)、DOM 元素(Element)、jQuery 对象、函数。

// 这里的是 selector、selector1 均表示任意的选择器 $("selector").not("selector1");

// 等价于 $("selector:not(selector1)");

//排除掉 id 和 class 属性相等的元素，剩下

n1 var $result = $("div").not( function(index, element){
    // 函数内的this === element
    return this.id == this.className;
 } );

该函数相对的是 add()函数，用于向当前匹配元素中添加符合指定表达式的元素。

.has()筛选

语法：函数用于筛选出包含特定后代的元素，并以 jQuery 对象的形式返回。
特定后代是指该元素至少有一个后代元素匹配指定的表达式。


$("selector").has("selector1");
.add()--->集中操作
$('.wrapper')
.css({position: 'relative'})
.find('ul')
.css({position: 'relative'})
↓
$('.wrapper')
.add('ul')
.css({position: 'relative'})

语法：add()函数用于向当前匹配元素中添加符合指定表达式的元素，并以 jQuery 对象的形式返回。

这里的表达式包括：选择器(字符串)、HTML 内容(字符串)、DOM 元素(Element)、jQuery 对象。

与该函数相对的是 not()函数，用于从当前匹配元素中移除符合指定表达式的元素。

$('s1').add('s2')
//匹配所有的p元素，再加上所有的label元素 $("p").add("label");

//筛选出包含有ul的li元素，然后给li加样式。

$('li').has('ul').css({ backgroundColor: 'red' })

.is() 判断是否有交集–>返回 ture/false


var lang = $('.wrapper .demo').is('p'); -->指$('.wrapper .demo')对象里有 'p'吗

语法：is()函数用于判断当前 jQuery 对象所匹配的元素是否符合指定的表达式。只要其中有至少一个元素符合该表达式就返回 true，否则返回 false。

is()函数实际上是判断当前 jQuery 对象所匹配的元素与指定表达式 expr 所表示的元素是否存在交集，如果存在交集就返回 true，否则返回 false。

$('ul').click(function (e) {
    if ($(e.target).is('li')) {
        alert($(e.target).text())
    } else {
        alert($(this).text())
    }
})

$.end()—>回退到之前的对象

end()函数用于返回最近一次"破坏性"操作之前的 jQuery 对象。
当前 jQuery 对象可能是通过调用之前的 jQuery 对象的特定方法创建的，使用该函数可以返回之前的 jQuery 对象。

$('.wrapper')
.css({position: 'relative'})
.find('ul')
.css({position: 'absolute'})
.end()
.css({position: 'absolute'})
.eng()

执行完后返回到$('.wrapper')对象

第三节课 取赋值相关方法：

.html()、.text()、.val()、.size()
.addClass() 、.removeClass()、.hasClass()
.css()
.attr()、.prop()
.html()

.html() 函数用于设置或返回当前 jQuery 对象所匹配的 DOM 元素内的 html 内容。

该函数的用途相当于设置或获取 DOM 元素的 innerHTML 属性值。

//取值
//console.log(typeof  $('ul').html());

//console.log($('ul').html());

console.log($('ul  li').html()) //获取第一个的值

//赋值：基于innerHTML

$('ul').html('abc')

var arrName = ['陈思彤', '成哥', '邓哥', '吴彦祖']

$('ul li').html(function (index, ele) {
    return '
' + arrName[index] + '
'
})

$('ul li').html('9')

.text() —>基于 innerText()

定义和用法

text() 方法设置或返回被选元素的文本内容。

当该方法用于返回内容时，则返回所有匹配元素的文本内容

（会删除 HTML 标记）。

当该方法用于设置内容时，则重写所有匹配元素的内容。

提示：如需设置或返回被选元素的 innerHTML（文本 + HTML 标记），请使用 html()方法。

语法

$(selector).text()

//设置文本内容：

$(selector).text(content)

//使用函数设置文本内容：

$(selector).text(function(index,currentcontent))

    console.log($('ul').text());

    $('ul  li').text('9');

    $('ul li').text('
aa
');

    var arrName = ['陈思彤', '成哥', '邓哥', '吴彦祖'];

    $('ul  li').text(function  (index,  ele)  {
        return  arrName[index];
})

.val()(针对表单元素来操作的)获取表单相关元素的 val 值与 html 的用法相似

console.log( $(‘input[type=“checkbox”]’).val() );

.val 赋值

$('input[type="checkbox"]').val(function (index, oldValue) {
    return oldValue + index
})

//js object prop value
$('div').eq(0).val('aaaa')

$('input').eq(0).val('000')

.size()

size()函数用于返回当前 jQuery 对象封装的元素个数。

size()函数与 length 属性的作用相同。

.addClass()

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

提示：如需添加多个类，请使用空格分隔类名。

语法

$(selector).addClass(class)

使用函数向被选元素添加类。

$(selector).addClass(function(index,oldclass))

removeClass() 方法从被选元素移除一个或多个类。

removeClass()函数用于移除当前 jQuery 对象所匹配的每一个元素上指定的 css 类名。

语法

$(selector).removeClass(class)

$(selector).removeClass(function(index,oldclass))

.hasClass() 判断是否存在类名

//hasClass 返回 true 或 false

console.log($('.demo').hasClass('active'))

//e事件源对象

$('.demo').click(function (e) {
    $('.demo').removeClass('active')

    $(this).addClass('active')
})

css()函数用于设置或返回当前 jQuery 对象所匹配的元素的 css 样式属性值。

该函数属于 jQuery 对象(实例)。如果需要删除指定的 css 属性，请使用该函数将其值设为空字符串(“”)。

语法 css()函数有以下两种用法：

用法一：

jQueryObject.css( propertyName [, value ] )

设置或返回指定 css 属性 propertyName 的值。

如果指定了 value 参数，则表示设置 css 属性 propertyName 的值为 value；

如果没指定 value 参数,则表示返回 css 属性 propertyName 的值。

用法二：

jQueryObject.css(object)

以对象形式同时设置任意多个属性的值。对象 object 的每个属性对应 propertyName，属性的值对应 value。

注意：
1、如果省略了 value 参数，则表示获取属性值；如果指定了该参数，则表示设置属性值。

2、css()函数的所有"设置"操作针对的是当前 jQuery 对象所匹配的每一个元素；所有"读取"操作只针对第一个匹配的元素。

jQuery 1.4 新增支持：参数 value 可以是函数，css()将根据匹配的所有元素遍历执行该函数，函数中的 this 指针将指向对应的 DOM 元素。css()还会为函数传入两个参数：第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素 css 属性 propertyName 当前的值。函数的返回值就是为该元素的 css 属性 propertyName 设置的值。

// 更改所有 p 元素的 font-weight 属性
// 如果是粗体就还原，不是粗体就加粗
$('p').css('fontWeight', function (index, value) {
    // 不同浏览器的计算取值可能有差异
    return value == 'bold' || value == '700' ? 'normal' : 'bold'
})

.attr() 方法设置或返回被选元素的属性值。

//attr  基于  setAttribue     getAttribute

//取值
Eg: $('.demo').attr('class')

//赋值
Eg: $('.demo').attr('id', 'test1')

//语法1: 规定要获取其值的属性。

$(selector).attr(attribute)

//语法 2: 设置被选元素的属性和值。

$(selector).attr(attribute,value)

//语法3: 使用函数来设置属性值。

$(selector).attr(attribute,function(index,oldvalue))


//该函数可接收并使用选择器的 index 值和当前属性值。

//语法 4: 设置多个属性/值对。

$(selector).attr({attribute:value, attribute:value ...})

.prop() 基于原生 js 的 dom 对象的操作


//特性映射  非特性不能映射

//赋值

//dom.timer

//$('.demo').prop('log', 'duyi');

//返回属性的值：
$(selector).prop(property)

//设置属性和值：
$(selector).prop(property,value)

使用函数设置属性和值：
$(selector).prop(property,function(index,currentvalue))

//设置多个属性和值：
$(selector).prop({property:value,property:value,...})

prop()和 attr()的主要区别：prop()函数针对的是 DOM 元素(JS Element 对象)的属性，attr()函数针对的是 DOM 元素所对应的文档节点的属性。

  • prop()只能获取

  • Dom 元素的特性，

  • attr() 可以特性和属性。

基于 jQuery 对象查改删增相关方法：


.next()、.prev()、.preAll()、.nextAll()

.prevUntil() 、.nextUntil()

.siblings()

.parent()、.parents()、.offsetParent()、.closest()

.slice()

.insertAfter()、.After()

.insertBefore()、.before()

.appendTo()、.append()

.prependTo()、.prepend()

.remove()、.detach()

参数：标签字符串 创建 jQuery 对象

next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

<span class=".demo blue">duyi-cstspan>

<button>changebutton>

<p class=".demo">duyi-cstp>

<script src="jquery.js"></script>

//next()获取元素的下一个兄弟元素
$('button').click(function () {
    $(this).next('p').css({fontSize:'20px', color:'orange'});
})
</script>

.prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

prevAll() 函数用于选取每个匹配元素之前的所有同辈元素，并以 jQuery 对象的形式返回。

$.nextAll() 函数用于选取每个匹配元素之后的所有同辈元素，并以 jQuery 对象的形式返回。


<div class="wrapper">
    全选：<input type="checkbox">input>
    banana:<input type="checkbox">
    apple:<input type="checkbox">
    orange:<input type="checkbox">
    <input type="submit" value='login'>input>
div>


<script src='./jquery.js'>script>

 <script>
$('input[type="checkbox"]')
    .eq(0).click(function () {
        $(this).prevAll('input[type="checkbox"]')
    .prop('checked', true)
});

script>

.nextUntil() )函数用于选取每个匹配元素之后所有的同辈元素，直到遇到符合指定表达式的元素为止，并以 jQuery 对象的形式返回。

这里的表达式是指：选择器(字符串)、DOM 元素(Element)、jQuery 对象。

.prevUntil() 函数用于选取每个匹配元素之前所有的同辈元素，直到遇到符合指定表达式的元素为止，并以 jQuery 对象的形式返回。

这里的表达式是指：选择器(字符串)、DOM 元素(Element)、jQuery 对象。

.siblings() 函数用于选取每个匹配元素的所有同辈元素(不包括自己)，并以 jQuery 对象的形式返回。

.parent()函数用于选取每个匹配元素的上一级父元素，并以 jQuery 对象的形式返回。

省略 selector 参数，则没有过滤。

.parents() 函数用于选取每个匹配元素的上二级以上所有父元素，并以 jQuery 对象的形式返回。

.closest()函数将从当前元素本身开始，逐级向上查找第一个符合指定表达式的元素，该元素可能是当前元素自身，也可能是最靠近当前元素的一个祖先元素,并以 jQuery 对象的形式返回。

.offsetparent()函数用于查找离当前匹配元素最近的被定位的祖辈元素。

所谓"被定位的元素"，就是元素的 CSS position 属性值为 absolute、relative 或 fixed(只要不是默认的 static 即可)。

.slice()—>截取指数范围，左闭右开区间

slice()函数用于选取匹配元素中一段连续的元素，并以 jQuery 对象的形式返回。

.insertAfter() 函数用于将当前所有匹配元素插入到指定元素之后。

语法：jQueryObject.insertAfter( target )

target String/Element/jQuery 类型指定的目标元素，以便于在该目标之后插入当前匹配的元素。

注意：如果当前 jQuery 对象匹配的元素是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

↓↑

.insertBefore()函数用于将当前所有匹配元素插入到指定元素之前。

语法：jQueryObject.insertBefore( target )

target String/Element/jQuery 类型指定的目标元素，以便于在该目标之前插入当前匹配的元素。

注意：如果当前 jQuery 对象匹配的元素是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

.After()函数用于在每个匹配元素之后插入指定的内容。

语法：$(selector).after(content)


$(selector).after(function(index))

指定的内容可以是：html 字符串、DOM 元素(或数组)、jQuery 对象、函数(返回值)。

after()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部 html 内容(innerHTML)。函数的返回值就是需要插入的内容(可以是 html 字符串、DOM 元素、jQuery 对象)。

注意：只有第一个参数可以为自定义函数，用于遍历执行。如果之后的参数也为函数，则调用其toString()方法，将其转为字符串，并视为html内容。

注意：如果插入的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

↑↓

.before() 函数用于在每个匹配元素之前插入指定的内容。

语法：$(selector).after(content)

$(selector).after(function(index))

指定的内容可以是：html 字符串、DOM 元素(或数组)、jQuery 对象、函数(返回值)。

before()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部 html 内容(innerHTML)。函数的返回值就是需要插入的内容(可以是 html 字符串、DOM 元素、jQuery 对象)。

注意：只有第一个参数可以为自定义函数，用于遍历执行。如果之后的参数也为函数，则调用其 toString()方法，将其转为字符串，并视为 html 内容。

注意：如果插入的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作

.appendTo() 函数用于将当前所有匹配元素追加到指定元素内部的末尾位置。

语法：jQueryObject.appendTo( target )

target String/Element/jQuery 类型指定的目标元素，以便于向其中追加当前匹配的元素。

注意：如果当前 jQuery 对象匹配的元素是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

↑↓

.prependTo() 函数用于将当前所有匹配元素追加到指定元素内部的起始位置。

语法：jQueryObject.prependTo( target )

target String/Element/jQuery 类型指定的目标元素，以便于向其中追加当前匹配的元素。

注意：如果当前 jQuery 对象匹配的元素是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

.append() 函数用于向每个匹配元素内部的末尾位置追加指定的内容。

语法：$(selector).append(content)


$(selector).append(function(index,html))

指定的内容可以是：html 字符串、DOM 元素(或数组)、jQuery 对象、函数(返回值)。

append()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部 html 内容(innerHTML)。函数的返回值就是需要为该元素追加的内容(可以是 html 字符串、DOM 元素、jQuery 对象)。

注意：只有第一个参数可以为自定义函数，用于遍历执行。如果之后的参数也为函数，则调用其 toString()方法，将其转为字符串，并视为 html 内容。

注意：如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

↑↓

.prepend() 函数用于向每个匹配元素内部的起始位置追加指定的内容。

语法：$(selector).prepend(content)


$(selector).prepend(function(index,html))

指定的内容可以是：html 字符串、DOM 元素(或数组)、jQuery 对象、函数(返回值)。

prepend()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部 html 内容(innerHTML)。函数的返回值就是需要为该元素追加的内容(可以是 html 字符串、DOM 元素、jQuery 对象)。

注意：只有第一个参数可以为自定义函数，用于遍历执行。如果之后的参数也为函数，则调用其 toString()方法，将其转为字符串，并视为 html 内容。

注意：如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作，而不是复制操作。

.remove()从文档中移除匹配的元素，包括所有文本和子节点。

语法：jQueryObject.remove( [ selector ] )

与 detach()相比，remove()函数会同时移除与元素关联绑定的附加数据(data()函数 )和事件处理器等(detach()会保留)。

该函数属于 jQuery 对象(实例)。

该方法会保留移除元素的副本，允许它们在以后被重新插入。

↑↓

.detach()

语法：jQueryObject.detach( [ selector ] )

detach()函数用于从文档中移除匹配的元素。

detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
该方法会保留移除元素的副本，允许它们在以后被重新插入。

.empty()

语法：jQueryObject.empty( )

empty()函数用于清空每个匹配元素内的所有内容。
empty()函数将会移除每个匹配元素的所有子节点(包括文本节点、注释节点等所有类型的节点)。

注意：该方法不会移除元素本身，或它的属性。

$('
').appendTo($('body'))

第四节课

基于 jQuery 对象增删改查相关方法：


.wrap()、 wrapInner()、wrapAll、unWrap
.clone()
.data()
.removeData()
.wrap()外面加$.unwrap()相反

.wrap()函数用于在每个匹配元素外部包裹指定的 HTML 结构。

语法：jQueryObject.wrap( wrapper )

与该函数相对的是 unwrap()函数，用于当前匹配元素的父元素(只移除父元素，其内部节点全部保留)。

wrapper 可以是 String/Element/jQuery/Function 类型 用于包裹匹配元素的节点。
jQuery1.4 新增支持：参数 wrapper 可以为函数。wrap()将根据匹配的所有元素遍历执行该函数，函数中的 this 将指向对应的 DOM 元素。

wrap()还会为函数传入一个参数，即当前元素在匹配元素中的索引。函数的返回值就是用于包裹的节点内容(可以是 html 字符串、DOM 元素或 jQuery 对象)。

注意：如果 wrapper 匹配多个元素，则只将第一个元素作为包裹元素。

注意：如果 wrapper 是多层嵌套的元素(例如

)，wrap()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是 Element 节点(比如文本节点、注释 节点等)，就停止向内查找，直接在当前节点内部的末尾位置追加(append())当前匹配元素。

↓

.wrapInner()里面加 函数用于在每个匹配元素的所有子节点外部包裹指定的 HTML 结构。

这里的所有子节点包括文本节点、注释节点等任意类型的节点。

语法：jQueryObject.wrapInner( wrapper )

wrapper 可以是 String/Element/jQuery/Function 类型 用于包裹匹配元素的节点。

jQuery 1.4 新增支持：参数 wrapper 可以为函数。wrapInner()将根据匹配的所有元素遍历执行该函数，函数中的 this 将指向对应的 DOM 元素。

wrapInner()还会为函数传入一个参数，即当前元素在匹配元素中的索引。函数的返回值就是用于包裹的节点内容(可以是 html 字符串、选择器、DOM 元素或 jQuery 对象)。

注意：如果 wrapper 匹配多个元素，则只将第一个元素作为包裹元素。

注意：如果 wrapper 是多层嵌套的元素(例如"

")，wrapInner()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是 Element 节点(比如文本节点、注释节点等)，就停止向内查找，直接在当前节点内部的末尾位置追加(append())当前匹配元素。

.unwrap()移除与.wrap()相反 函数用于移除每个匹配元素的父元素。

unwrap()将移除当前匹配元素的父元素，但会保留其所有的后辈元素。你可以使用该函数快速取消通过 wrap()函数为匹配元素添加的父级包裹元素。

语法：jjQueryObject.unwrap( )

如果当前匹配元素的父元素为 body 元素，则 unwrap()函数不会移除 body 元素。

.wrapAll() 函数用于在所有匹配元素用单个元素包裹起来。

语法：jQueryObject.wrapAll( wrapper )

wrapper 可以是 String/Element/jQuery/Function 类型 用于包裹匹配元素的节点。
jQuery 1.4 新增支持：参数 wrapper 可以为函数。wrapAll()将根据匹配的所有元素遍历执行该函数，函数中的 this 将指向对应的 DOM 元素。

wrapAll()还会为函数传入一个参数，即当前元素在匹配元素中的索引。函数的返回值就是用于包裹的节点内容(可以是 html 字符串、DOM 元素或 jQuery 对象)。

注意：如果 wrapper 匹配多个元素，则只将第一个元素作为包裹元素。

注意：如果 wrapper 是多层嵌套的元素(例如"

")，wrapAll()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是 Element 节点(比如文本节点、注释节点等)，就停止向内查找，直接在当前节点内部的末尾位置追加(append())当前匹配元素。

clone()函数用于克隆当前匹配元素集合的一个副本（clone() 方法生成被选元素的副本，包含子节点、文本和属性。），并以 jQuery 对象的形式返回。你也可以简单地理解为：克隆当前 jQuery 对象。

语法：jQueryObject.clone( withDataAndEvents [, deepWithDataAndEvents ] )

参数描述

withDataAndEvents 可选/Boolean 类型是否同时复制元素的附加数据和绑定事件，默认为 false。
deepWithDataAndEvents 可选/Boolean 类型是否同时复制元素的所有子元素的附加数据和绑定事件，默认值即为参数 withDataAndEvents 的值。

你还可以指定是否复制这些匹配元素(甚至它们的子元素)的附加数据( data()函数 )和绑定事件。
clone()函数的返回值为 jQuery 类型，返回当前 jQuery 对象的一个克隆副本。

注意：出于性能原因考虑，clone()函数不会复制某些表单元素的动态，例如用户在