关于javascript:jQuery学习知识总结

57次阅读

共计 26945 个字符，预计需要花费 68 分钟才能阅读完成。

jQuery 入口 **

形式一：$(document).ready(function(){})

形式二：$(function () {})

jQuery 函数

1. 选择器

jQuery(selector,context)

selector:css 选择器表达式

context：可选的选择器上下文

返回值：匹配 DOM 元素的 jQuery 对象

 <script>
    $(function () {$('div').css('background-color', 'red');// 所有 div 标签将显示为背景红色
      $('div', '.box1').css('background-color', 'red');// 只有在.box1 蕴含的子元素才会起作用
     $('div').css({
        'backgroundColor': 'blue',
         'color': '#fff'
       })// 对 div 设置多种款式
    })
</script>`
<div>1</div>
<div>2</div>
<div>3</div>
 <div class="box1">
    <div>6</div>
    <div>5</div>
  </div>

2.html 片段: 将 html 片段转换成 Element 元素，而后再封装成一个 jQuery 对象

jQuery(html,ownerDocument)

html: 单标签或多层标签之间的嵌套

ownerDocument: 创立新 DOM 元素的文档对象，不传入则默认为以后的文档对象

 $('<div>7</div>').appendTo('body');// 单标签插入
 $(`<div><span> five</span></div>`).appendTo('body');// 多标签嵌套插入

3.DOM 元素 /DOM 数组

jQuery(element or elementsArray)

element：DOM 元素

elementsArray：DOM 数组

 $('div').each(function (index, item) {console.log(this);
        $(this).css('color', 'red')
      })// 传入 DOM 元素


 var div = document.getElementsByTagName('div');
      div = [].slice.call(div);
      var $div = $(div);
      $div.html('hello');
    })// 传入 DOM 数组
    
    
    <div class="box1">
    <div>6</div>
    <div>5</div>
    <div>6</div>
  </div>

4. 对象

jQuery(object)

对象封装到 jQuery 对象中并返回

var obj = {name: 'lili'};
      var $obj = $(obj);// 封装成 jQuery 对象
      // 绑定自定义事件
      $obj.on('say', function () {console.log(this.name);
      });
      $obj.trigger('say');

5. 函数

jQuery(callback)

callback: 函数

在 document 对象上绑定一个 ready 事件监听函数，当 DOM 构造加载实现的时候执行

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

6.jQuery()

不传入任何的参数，返回一个空的 jQuery 对象，属性 length 为 0

留神：能够用来复用 jQuery 对象，能够创立一个空的 jQuery 对象，须要的时候手动批改其中的元素，在调用 jQuery 办法。从而防止反复创立 jQuery 对象。

jQuery 选择器

1. 根本选择器

id 选择器 #id –> 匹配指定 id 名称

应用任何的元字符作为名称的文本局部，它必须被两个反斜杠本义：\。

 $('#myDiv');

<div id="notMe">
    <p>id="notMe"</p>
  </div>
  <div id="myDiv">id="myDiv"</div>
// 后果：<div id="myDiv">id="myDiv"</div>

元素选择器 Element –> 匹配指定标签名

依据给定的元素标签名匹配所有元素

$('div');

<div id="notMe">
    <p>id="notMe"</p>
  </div>
  <div id="myDiv">id="myDiv"</div>
//id="notMe"   id="myDiv"

类型选择器 .class –> 匹配 class 属性的标签

依据给定的 css 类名匹配元素。

$(".myClass");

<div id="notMe"  class="myClass">
    <p>id="notMe"</p>
  </div>
  <div id="myDiv">id="myDiv"</div>

通配符选择器 –> 匹配所有的选择器

找到每一个元素

$("*")

组合选择器 selector1,selector2,selectorN –> 即可匹配多个

$("div#myDiv,p")

2. 层级选择器

ancestor descendant –> 在给定的先人元素下匹配所有的后辈元素

  $('form input');// 找到表单中所有的 input 元素


 <form>
    <label>
      Name:
    </label>
    <input name="name">
    <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter">
    </fieldset>
  </form>
  <input name="none">
       // 后果：<input name="name" /> <input name="newsletter" />

parent > child –> 在指定父元素下匹配所有的子元素

$("form > input");// 匹配表单中所有的子级 input 元素。<form>
    <label>
      Name:
    </label>
    <input name="name">
    <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter">
    </fieldset>
  </form>
  <input name="none">
      
      // 后果：<input name="name" />

prev + next –> 匹配所有紧挨着在 prev 元素后的 next 元素

$("label + input");// 匹配所有跟在 label 前面的 input 元素

<form>
    <label>
      Name:
    </label>
    <input name="name">
    <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter">
    </fieldset>
  </form>
  <input name="none">
      // 后果：<input name="name" />, <input name="newsletter" />

3. 伪类选择器

first –> 获取第一个元素

 $('div:first');// 获取匹配的第一个元素

<div>1</div>
  <div>2</div>
  <div>3</div>

//1

:last –> 获取最初一个元素

 $('div:last');// 获取匹配的最初一个元素

<div>1</div>
  <div>2</div>
  <div>3</div>

//3

:not(selector) –> 用于筛选的选择器(即取反)

 $('input:not(:checked)');// 查找所有未选中的 input 元素

<input name="apple">
  <input name="flower" checked="checked">
      //<input name="apple" />

:even –> 匹配所有索引值为偶数的元素，从 0 开始计数

 $("tr:even");

<table>
    <tr><td>Header</td></tr>
    <tr><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
  </table>
// <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr>

:odd –> 匹配所有索引值为奇数的元素，从 0 开始计数

$("tr:odd");

<table>
    <tr><td>Header</td></tr>
    <tr><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
  </table>
//<tr><td>Value 1</td></tr>

4. 属性选择器

[属性名] –> 匹配蕴含给定属性的元素

$('div[id]');

 <div>
    <p>Hello!</p>
  </div>
  <div id="test2"></div>
//<div id="test2"></div>

[属性名 = 属性值] –> 匹配给定的属性是某个特定值的元素

$('input[name="newsletter"]').attr("checked", true);

<input type="checkbox" name="newsletter" value="HotFuzz">
  <input type="checkbox" name="newsletter" value="ColdFusion">
  <input type="checkbox" name="accept" value="Evil Plans">
//<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />,
 //<input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" />

[属性名],[属性名] –> 可匹配多个

匹配属性有 code1 与 code2 的元素标签 –> $(“li[code1],li[code2]”);

属性选择器[属性选择器] –> 复合属性选择器，须要同时满足多个条件时应用

$("input[id][name$='man']");// 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
//<input id="letterman" name="new-letterman" />

4.jQuery 事件

1.jQuery 事件类型

（1）$(document).ready()：文档齐全加载完后执行函数

$(document).ready(function(){// 在这里写你的代码...});

（2）click()

当按钮点击事件被触发时会调用一个函数

$("p").click(function(){$(this).hide();});// 当点击事件在某个 <p> 元素上触发时，暗藏以后的 <p> 元素：

(3)dblclick()

当双击元素时，会产生 dblclick 事件。

$("p").dblclick(function () {alert("Hello World!"); 
});// 给页面上每个段落的双击事件绑上 "Hello World!" 正告框

<p> 双击鼠标左键的，我就隐没。</p>
<p> 双击我隐没！</p>
<p> 双击我也隐没！</p>

(4)mouseenter()

当鼠标指针穿过元素时，会产生 mouseenter 事件。

 $('#p1').mouseenter(function () {alert('您的鼠标移到了 id="p1"的元素上！');
      });

<p id="p1"> 鼠标指针进入此处，会看到弹窗 </p>

(5)mouseleave()

当鼠标指针来到元素时，会产生 mouseleave 事件。

$("#p1").mouseleave(function(){alert("再见，您的鼠标来到了该段落。");
});
<p id="p1"> 鼠标指针来到此处，会看到弹窗 </p>

（6）mousedown()

当鼠标指针挪动到元素上方，并按下鼠标按键时，会产生 mousedown 事件。

$("#p1").mousedown(function(){alert("鼠标在该段落上按下！");
});
<p id="p1"> 鼠标指针点击此处，会看到弹窗 </p>

（7）mouseup()

当在元素上松开鼠标按钮时，会产生 mouseup 事件。

$("#p1").mouseup(function(){alert("鼠标在段落上松开。");
});
<p id="p1"> 鼠标指针松开此处，会看到弹窗 </p>

（8）hover()

模仿光标悬停事件。

// 当鼠标挪动到元素上时，会触发指定的第一个函数(mouseenter); 当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。$("#p1").hover(function(){alert("你进入了 p1!");
    },
    function(){alert("拜拜! 当初你来到了 p1!");
    }
);

(9)focus()

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会取得焦点

$("input").focus(function(){$(this).css("background-color","#cccccc");
});

(10)blur()

当元素失去焦点时，产生 blur 事件

$("input").blur(function(){$(this).css("background-color","#ffffff");
});

2.jQuery 事件办法语法

（1）on(events [, selector] [, data], handler(eventObject) )

events: 一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比方 ”click”, “keydown.myPlugin”, 或者 “.myPlugin”。

selector: 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后辈元素, 选择器是 null 或疏忽该选择器，那么被选中的元素总是能触发事件。

data: 当一个事件被触发时，要传递给事件处理函数的[event.data]

在选定的元素上绑定一个或多个事件处理函数。

handler(eventObject): 事件被触发时，执行的函数。若该函数只是要执行 return false 的话，那么该参数地位能够间接简写成 false

 $('p').on('click', function () {alert($(this).text());// 当点击段落时，显示该段落中的文本
      });
// 勾销表单的提交动作，并且通过返回 false 的办法来避免事件冒泡
$('form').on('submit',false);

$("form").on("submit", function(event) {// 通过应用 .preventDefault()，仅勾销默认的动作。event.preventDefault();});

// 通过应用 .stopPropagation()，避免提交事件的冒泡行为，然而并不禁止提交行为
$("form").on("submit", function(event) {event.stopPropagation();
});

(2).off(events [, selector] [, handler(eventObject) ] )

移除用 on()定的事件处理程序, 当有多个过滤参数时，只有与这些参数齐全匹配的事件处理函数才会被移除。

function aClick() {$("div").show().fadeOut("slow");
}
$("#bind").click(function () {$("body").on("click", "#theone", aClick)
    .find("#theone").text("Can Click!");
});
$("#unbind").click(function () {$("body").off("click", "#theone", aClick)
    .find("#theone").text("Does nothing...");
});


$("#foo").on("click", function( event) {alert( "This will be displayed only once.");
  $(this).off(event);
});

(3).one()

为元素的事件增加处理函数。处理函数在每个元素上每种事件类型最多执行一次。

  div {
      width: 60px;
      height: 60px;
      margin: 5px;
      float: left;
      background: aquamarine;
      border: 10px outset;
      cursor: pointer;

    }

    p {
      color: red;
      margin: 0;
      clear: left;
    }

var n = 0;
$("div").one("click", function() {var index = $("div").index(this);
  $(this).css({
      // 扭转款式，点击后变成图形凹进去
    borderStyle:"inset",
    cursor:"auto"
  });
  $("p").text("Div at index #" + index + "clicked." +
      "That's "+ ++n +" total clicks.");
});

 <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>click a green square</p>

（4）.trigger(eventType [, extraParameters] )

依据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

eventType：当前蕴含 JavaScript 事件类型的字符串，比方click 或 submit。

extraParameters：传递给事件处理程序的额定数组参数

当相应的事件产生时，任何通过 .on() 或一个快捷办法绑定的事件处理程序将被触发。然而，它们能够用 .trigger() 办法手动触发。调用 .trigger() 执行处理程序和用户天然的触发该事件，他们的执行程序时雷同的

$("button:first").click(function () {update($("span:first")); // 更新第一个 span 的数量
});
$("button:last").click(function () {$("button:first").trigger('click');// 执行第一个函数
 
update($("span:last"));// 更新第二个 span 的数量
});
 
function update(j) {var n = parseInt(j.text(), 10);
j.text(n + 1);
}

<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
 
<div><span>0</span> button #2 clicks.</div>

5.jQueryDOM 操作

插入方法

.append(content [, content])

.append(function(index, html) )

在每个匹配元素外面的开端处插入参数内容。

DOM 元素，DOM 元素数组，HTML 字符串，或者 jQuery 对象，用来插在每个匹配元素外面的开端

 $(function () {$('.inner').append('<p>Test</p>'); // 创立内容而后同时插入到好几个元素外面
     $('.container').append($('h2'));   // 抉择一个元素而后插在另一个元素外面;  挪动而不是复制
     // 有多个指标元素，内容将被复制而后按程序插入到每个指标外面
    })


<h2>Greeting</h2>
  <div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>

.appendTo(target)

target: 选择符，元素，HTML 字符串，DOM 元素数组，或者 jQuery 对象；合乎的元素们会被插入到由参数指定的指标的开端。

 $(function () {$('<p>Test</p>').appendTo('.inner');// 创立内容而后同时插入到好几个元素外面
$('h2').appendTo($('.container'));// 抉择一个元素而后插在另一个元素外面;  挪动而不是复制
 })

<h2>Greeting</h2>
  <div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>

.prepend(content [, content] )

将参数内容插入到每个匹配元素的后面

$('.inner').prepend('<p>Test</p>');
$('.container').prepend($('h2'));

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

.prependTo()

将所有元素插入到指标后面

$('<p>Test</p>').prependTo('.inner');
$('h2').prependTo($('.container'));

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

.after()

在匹配元素汇合中的每个元素前面插入参数所指定的内容，作为其兄弟节点 *

$('.inner').after('<p>Test</p>');
$('.container').after($('h2'));

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$("h2").after(document.createTextNode("Hello") );// 在所有的段落后插入一个 DOM 元素。

.before(content [, content] )

依据参数设定，在匹配元素的后面插入内容

$('.inner').before('<p>Test</p>');
$('.container').before($('h2'));

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

.insertBefore(target)

在指标元素后面插入汇合中每个匹配的元素

$('<p>Test</p>').insertBefore('.inner');
$('h2').insertBefore($('.container'));

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

.insertAfter(target)

在指标元素前面插入汇合中每个匹配的元素

$('<p>Test</p>').insertAfter('.inner');
$('h2').insertAfter($('.container'));

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

包裹办法

.wrap(wrappingElement)

wrappingElement：一个 HTML 片段，抉择表达式，jQuery 对象，或者 DOM 元素，用来包在匹配元素的外层。

留神：能够承受任何字符串或对象，能够传递给 $() 工厂函数来指定一个 DOM 构造。这种构造能够嵌套了好几层深，但应该只蕴含一个外围的元素。每个匹配的元素都会被这种构造包裹。该办法返回原始的元素集，以便之后应用链式办法。

// 在 inner <div> 外层插入一个 HTML 构造
<div class="container">
<div class="inner">hello</div>
<div class="inner">goodbye</div>
</div>

$('.inner').wrap('<div class="new"'/>)
  /* 后果：<div class="container">
  <div class="new">
   <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>*/
                 
  // 用函数做参数，返回 DOM 元素，HTML 片段用来包裹匹配元素
 $('.inner').wrap(function(){return '<div class="'+ $(this).text()+'"'/>})
/* 后果：<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>*/

.unwrap(): 这个办法不承受任何参数

将匹配元素汇合的父级元素删除，保留本身（和兄弟元素，如果存在）在原来的地位

.wrapAll(wrappingElement)

* 在所有匹配元素外面包一层 HTML 构造。

留神：1. 构造能够嵌套多层，最内层只能有一个元素

​ 2. 承受任何字符串或对象

​ 3. 整体的内部用指定的 HTML 构造进行包裹

<div class="container">
    <div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>

$('.inner').wrapAll('<div class="new"/>')
/*<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>*/

.wrapInner(wrappingElement)

在匹配元素里的内容外包一层构造

<div class="container">
    <div class="inner">Hello</div>
<div class="inner">Goodbye</div>
    </div>
$('.inner').wrapInner('<div class="new"/>')//inner 元素的内容外加一个新的 <div> 元素
// 用一个 callback 函数做参数，每次遇到匹配元素时，该函数被执行，返回一个 DOM 元素，jQuery 对象，或者 HTML 片段，用来包住匹配元素的内容
$('.inner').wrapInner(function(){return '<div class="'+ this.nodeValue +'"/>';})
/*<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>*/

替换办法

.replaceAll(target)

用汇合的匹配元素替换每个指标元素

<div class="container">
    <div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
    </div>

$('<h2>New heading</h2>').replaceAll('.inner');
/* 后果：<div class="container">
  <h2>New heading</h2>
  <h2>New heading</h2>
  <h2>New heading</h2>
</div>*/

$('.first').replaceAll('.third');
/*<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>*/
// 用来替换的元素从老中央移到新地位，而不是复制

.replaceWith(newContent)

用提供的内容替换汇合中所有匹配的元素并且返回被删除元素的汇合。

留神：能够从 DOM 中移除内容，而后在这个中央插入新的内容

<div class="container">
    <div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
    </div>

$('div.second').replaceWidth('<h2>New heading</h2>')// 指定的 HTML 替换第二个 inner <div>
/*<div class="container">
  <div class="inner first">Hello</div>
  <h2>New heading</h2>
  <div class="inner third">Goodbye</div>
</div>*/

$('.inner').replaceWidth('<h2>New heading</h2>')
// 一次性替换所有 inner
/*<div class="container">
  <h2>New heading</h2>
  <h2>New heading</h2>
  <h2>New heading</h2>
</div>*/

// 抉择一个元素当作替换的内容
$('div.third').replaceWidth('.first');
/*<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>*/
// 用来替换的元素从老中央移到新地位，而不是复制

移除办法：empty、remove、detach

.empty() 这个办法不承受任何参数

从 DOM 中移除汇合中匹配元素的所有 子节点

留神：1. 这个办法不仅移除子元素（和其余后辈元素），同样移除元素里的文本；

2. 为了防止内存透露，先移除子元素的数据和事件处理函数，而后移除子元素。

3. 想删除元素，不毁坏他们的数据或事件处理程序（这些绑定的信息还能够在之后被从新增加回来），应用.detach()

<div class="container">
    <div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
    </div>

$('.hello').empty();
/*Hello 文本被删除
<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>*/

.remove([selector] )

selector：过滤将被移除的匹配元素汇合

留神：1. 将匹配元素汇合从 DOM 中删除。（注：同时移除元素上的事件及 jQuery 数据。）

​ 2. 将元素本身移除时，同时也会移除元素外部的所有，包含绑定的事件及与该元素相干的 jQuery 数据。

<div class="container">
    <div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
    </div>

$('.hello').remove();
/*
<div class="container">
  <div class="goodbye">Goodbye</div>
</div>
*/
// 第二种写法，同样的后果
$('div').remove('.hello');

.detach([selector] )

从 DOM 中去掉所有匹配的元素。

保留所有 jQuery 数据和被移走的元素相关联。当须要移走一个元素，不久又将该元素插入 DOM

克隆办法：clone

.clone([withDataAndEvents] )/.clone([withDataAndEvents] [, deepWithDataAndEvents] )

创立一个匹配的元素汇合的深度拷贝正本

withDataAndEvents: 一个 Boolean 值，示意是否会复制元素上的事件处理函数

deepWithDataAndEvents : 一个布尔值，批示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制

留神：1. 复制所有匹配的元素汇合，包含所有匹配元素、匹配元素的上级元素、文字节点。出于性能方面的思考，表单元素动静的状态（例如，用户将数据输出到 input 和 textarea，或者 用户在 select 中曾经选中某一项）不会被复制到克隆元素。克隆操作将设置 这些字段为 HTML 中指定的默认值。

2.当咱们用 `.clone() 办法时，在将它插入到文档之前，咱们能够批改克隆后的元素或者元素内容。

3.应用 .clone() 可能产生 id 属性反复的元素的副作用，id应该是惟一的。在可能的状况下，倡议，应防止克隆有此属性或标识符的元素，应用类（class）属性代替。

$('.hello').clone().appendTo('.goodbye');

<div class="container">
    <div class="goodbye">Goodbye
<div class="hello">Hello</div>
</div>
    </div>
/*
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>*/

jQuery 属性操作方法

(1)addClass() 办法

向被选元素增加一个或多个类。

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

留神：如需增加多个类，请应用空格分隔类名

<script>
    $(function(){$('button').click(function(){$('p:first').addclass('intro');
    });
})
    </script>
<style>
    // 将此类名增加进了第一个 p 元素里，而后取得此款式
    .intro{
        font-size:120%;
        color:red;
    }
    </style>


<h1>this is a heading</h1>
<p>this is a paragraph</p>
<p>this is a another</p>
<button> 像第一个 p 元素增加一个类 </button>

应用函数向被选元素增加类。

<script>
    $(function(){$('button').click(function(){$('p').addClass(function(n){
            // 以 par_结尾的进行匹配
            return 'par_'+n;
        });
    });
});
    </script>
<style>
        .par_0{color:blue;}
.par_1{color:red;}
        </style>

<h1>this is a heading</h1>
// 第一个 p 元素会变成蓝色，第二个会变成红色
<p>this is a paragraph</p>
<p>this is another</p>
<button> 向 p 元素增加类 </button>

（2）attr() 办法

设置或返回被选元素的属性值。

依据该办法不同的参数，其工作形式也有所差别

办法一：设置被选元素的属性和值

$(selector).attr(attribute,value)
<script>
    $(function(){$('button').click(function(){// 扭转 img 的 width 长度    $('img').attr('width','180');
    });
})
    </script>

<img src="/i/eg_smile.gif" width="128" height="128"/>
    <button> 设置图像的 width 属性 </button>

用法二：返回被选元素的属性值

$(selector).attr(attribute)
<script>
    $(function(){$('button').click(function(){// 返回 img 的 width 属性值
        alert('Image width' + $('img').attr('width'));
    })
})
    </script>

办法三：应用函数来设置属性 / 值

$(selector).attr(attribute,function(index,oldvalue))
<script>
    $(function(){$('button').click(function(){$('img').attr('width',function(n,v){return v-50;});
    });
});
    </script>

办法四：为被选元素设置一个以上的属性和值。

$(selector).attr({attribute:value, attribute:value ...})
<script>
    $(function(){$('button').click(function(){$('img').attr({width:'50',height:'80'});
        
    })
})
    </script>

(3)hasClass() 办法

查看被选元素是否蕴含指定的 class

<script>
    $(function(){$('button').click(function(){alert($('p:first').hasClass('intro'));
    })
})
    </script>

<h1 id="h1">this is a heading</h1>
<p>this is a para</p>
<p>this is another</p>
<button> 查看一个段落是否领有类 "intro"</button>

(4)html()办法

返回或设置被选元素的内容 (inner HTML)

如果该办法未设置参数，则返回被选元素的以后内容。

<script>
    $(function(){$('.btn1').click(function(){$('p').html('Hello<b>World<b>');
    })
})
    </script>

<p>this is a para</p>
<p>this is another</p>
<button> 扭转 P 元素的内容 </button>

办法二：当应用该办法返回一个值时，它会返回第一个匹配元素的内容

<script>
    $(function(){$('.btn1').click(function(){alert($('p').html())
    })
})
    </script>

<p>this is a paragraph</p>
<button class="btn1"> 扭转 P 元素的值 </button>

办法三：设置元素内容

应用该办法设置一个值时，它会笼罩所有匹配元素的内容

$(selector).html(content)
<script>
    $(function(){$('.btn1').click(function(){$('p').html('hello world');
    });
})
    </script>
<p>this is a para</p>
<p>this is another</p>
<button> 扭转 P 元素的内容 </button>

办法四：应用函数来设置元素内容

$(selector).html(function(index,oldcontent))
<script>
    $(function(){$('button').click(function(){$('p').html(function(){return '这个 p 元素的 index 是：' + n;});
    })
})
    </script>


<p> 这是一个段落。</p>
<p> 这是另一个段落。</p>
<button> 扭转 p 元素的内容 </button>

(5)removeAttr() 办法

从被选元素中移除属性

$(function(){$('button').click(function(){
        // 从任何 p 元素中移除 id 属性
        $('p').removeAttr('id');
    })
})

（6）removeClass() 办法

从被选元素移除一个或多个类。

留神：如果没有规定参数，则该办法将从被选元素中删除所有类

$(function(){$('button').click(function(){$('p').removeClass('intro');
    });
})

<style>
    .intro{
        font-size:120%;
        color:red;
    }
    </style>
<h1 id="h1">this is a heading</h1>
<p class="intro">this is a paragraph</p>
<button> 从第一个段落中删除类 </button>

办法二：应用函数来移除类

$(selector).removeClass(function(index,oldclass))
$('button').click(function(){$('ul li').removeClass(function(){
        // 删除以 listitem_结尾的类名款式
        return 'listitem_' + $(this).index();})
})

（6）toggleClass()

设置或移除被选元素的一个或多个类进行切换。查看每个元素中指定的类。如果不存在则增加类，如果已设置则删除之。这就是所谓的切换成果。通过应用 “switch” 参数，您可能规定只删除或只增加类。

$(selector).toggleClass(class,switch)

switch：布尔值。规定是否增加或移除 class

$('button').click(function(){$('p').toggleClass('main');
})
<style>
 .main{
    fon-size:120%;
    color:red;
}
</style>

<h1 id='1'>this is a heading</h1>
<p>this is a paragraph</p>
<button class="btn1"> 切换段落的 "main" 类 </button>

办法二：应用函数来切换类

$(selector).toggleClass(function(index,class),switch)
$(function(){$('button').click(function(){
        // 给 ul 下 li 增加类名及其对应的款式
        $('ul li').toggleClass(function(){return 'listitem_' + $(this).index());
        });
    });
})

<h1 id="h1">This is a heading</h1>
<ul>
<li>Apple</li>
<li>IBM</li>
<li>Microsoft</li>
<li>Google</li>
</ul>
<button class="btn1"> 增加或移除列表项的类 </button>

（7）val()

元素的值是通过 value 属性设置的。该办法大多用于 input 元素。

如果该办法未设置参数，则返回被选元素的以后值。

办法一：返回 Value 属性

$(function(){$('button').click(function(){
 // 返回 input 领有 text 属性的 val 值
        alert($('input:text').val());// 后果为 Bill
    });
})

Firstname: <input type="text" name="fname" value="Bill" /><br />
Lastname: <input type="text" name="lname" value="Gates" /><br /><br />
<button> 取得第一个文本域的值 </button>

办法二：设置 Value 属性的值

$(selector).val(value)
$(function(){$('button').click(function(){$('input:text').val('Bill Gates');
    });
})

<p>Name: <input type="text" name="user" /></p>
<button> 设置文本域的值 </button>

办法三：应用函数设置 Value 属性的值

$(selector).val(function(index,oldvalue))
//oldvalue 代表原来的值
$(function(){$('button').click(function(){$('input:text').val(function(n,c){
      // 返回原始值加 Gates
      return c + "Gates";      
        });
    });
})

<p>Name: <input type="text" name="user" value="Bill" /></p>
<button> 设置文本域的值 </button>

jQuery 数组和对象操作

1. 迭代

each(object,callback)

返回值:Object

留神:1. 迭代函数中并不会扭转以后元素的值, 无奈扭转返回后的对象

2. 数组状况下：遍历数组中的每一个对象. 第一个参数示意索引, 第二个参数示意值, this 示意以后遍历的元素, 能够通过返回 false 终止迭代

3. 对象状况下：遍历对象的每一个属性, 即便函数返回 false 也仍然会遍历完所有的属性, 第一个参数示意属性 key(属性名称, 是 obejct 类型), 第二个参数示意值,this 示意以后属性的值

// 数组状况下
$.each(['a','b','c'],function(i,n){alert('Item#'+i+":"+n);
    if(i>=1){return false;// 会终止}
});
$('#iterateObject').click(function(event){
    $.each({
        name:'zhangsan',
        sex:'male',
        age:12
    },function(i,n){alert("Item#"+i.toString()+":"+n);
        if(i>=1){return false;// 他依然会接着遍历完所有属性，不会因为 false 而进行}
    })
})

2. 筛选

.grep(array, callback, [invert]

返回值: Array

应用过滤函数过滤数组元素。

此函数至多传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

解说:

默认 invert 为 false, 即过滤函数返回 true 为保留元素. 如果设置 invert 为 true, 则过滤函数返回 true 为删除元素.

$.grep([0,1,2],function(n,i){
    // 演示如何过滤数组中索引小于 0 的元素
    return n>0;
    
})

3. 转换

jQuery.map(array, callback)

返回值:Array

阐明:

将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个示意被转换的元素作为参数。转换函数能够返回转换后的值、null（删除数组中的我的项目）或一个蕴含值的数组，并扩大至原始数组中。

留神:此函数和 each 函数惟一的区别就是回调函数能够扭转以后元素. 返回 null 则删除以后元素.

var arr = ['a','b','c','d','e'];
$('div').text(arr.join(','));
arr = $.map(arr,function(n,i){return (n.toUpperCase()+i);//['A0','B1','C2','D3','E4']
});
$('p').text(arr.join(','));
arr = $.map(arr,function(a){return a+a;//['aaaa','bbbb','cccc','dddd','eeee']
});
$('span').text(arr.join(','));
$.map([0,1,2],function(n){
    // 原数组中每个元素加 4 转换为一个新数组
    return n + 4;
})

$.map([0,1,2],function(n){
    // 原数组中每个元素扩大为一个蕴含其自身和其值加 1 的数组，并转换为一个新数组
    return [n,n+1];
});

$.map([0,1,2], function(n){
    // 原数组中大于 0 的元素加 1，否则删除
  return n > 0 ? n + 1 : null;
});

4. 合并

  • .extend([deep],target,object1,[objectN])

    阐明：1. 用一个或多个其余对象来扩大一个对象，返回被扩大的对象

    2. 第一个参数设置 true，返回一个深层次的正本，递归复制找到任何对象。

    3. 定义的属性不会被复制，从对象原型继承的属性会被复制；

// 合并 settings 和 options，批改并返回 settings
var settings = {
    validate:false,
    limit:5,
    name:'foo'
};
var options = {
    validate:true,
    name:'bar'
};
$.extend(settings,options);
// 后果：settings == {validate: true, limit: 5, name: "bar"}

.inArray(value,array)

阐明：确定第一个参数在数组中地位，从 0 开始计数，没找到返回 -1

var arr = [4,'Pete',8,'John'];
$.inArray('John',arr);//3
$.inArray(4,arr);//0

.merge(first,second)

阐明：1. 合并两个数组，会扭转第一个合并的数组

​ 2. 返回后果批改第一个数组的内容

$.merge([0,1,2],[2,3,4])

.unique(array)

阐明：删除数组中反复的元素。只进去删除 DOM 元素数组，不能进去字符串或者数字数组

$.unique(document.getElementByTagName('div'))// 删除反复的 div 标签

测试工具函数

判断对象是否是某一种类型, 返回的都是 Boolean 值:

jQuery.isArray(obj)

jQuery.isFunction(obj)

字符处操作工具函数

jQuery.trim(str)

返回值: string

阐明: 去掉字符串起始和结尾的空格

$.trim('hello,how are you?');

Url 操作工具函数

.param(obj)

返回值:string

阐明:

将表单元素数组或者对象序列化。是.serialize()的外围办法。

数组或 jQuery 对象会依照 name/value 对进行序列化，一般对象依照 key/value 对进行序列化

var params = {width:1680,heoght:1050};
var str = jQuery.param(params);
$('#results').text(str);
//width=1680&height=1050

扩大工具函数与 jQuery 包装集函数

扩大工具函数只须要对 jQuery(即 ”$”)进行扩大. 通常开发工具函数或者插件的人心愿在开发时应用 ”$”

 (function($)
        {$.myExtendMethod = function(o)
            {alert(0);
            };            
        })(jQuery);

测试操作

$.isWindow()

 1. 作用：判断传入的对象是 var 否是 window 对象
 2. 参数：须要判断的的对象
 3. 返回值：true/false

<script>
    // 真数组
    var arr = [1,3,5,7,9];
// 伪数组
var arrlike = {0:1,1:3,2:5,3:7,4:9,length:5};
// 对象
var obj = {
    name:'zhangsan',
    age:12
};
// 函数
var fn = function(){};
//window 对象
var w = widow;
console.log($.isWindow(arr));//false
console.log($.isWindow(arrlike));//false
console.log($.isWidow(obj));//false
console.log($.isWidow(fn));//false
console.log($.isWidow(w));//true
    </script>

$.isArray()

 1. 作用：判断传入的对象是否是 array 对象
 2. 参数：须要判断的的对象
 3. 返回值：true/false

function w(htnl){document.body.innerHTML += '<br/>'+html;}

w($.isArray([10,25,3]));  //true
w($.isArray(new Array()));//true
w($.isArray(null));//false

$.isFunction()

  1. 作用：判断传入的对象是否是 function 函数

    1. 参数：须要判断的的对象
    2. 返回值：true/false
    3. 补充：jQuery 框架实质上是一个函数，$.isFunction(jQuery); 后果为 true
    function w(html){documnet.body.innerHTML +='<br/>' +html;}
function foo(){alert('CodePlayer');
}
w($.isFunction(foo));//true
w($.isFunction(function(){}));//true
w($.isFunction(null));//false

    $.isEmptyObject()

用于判断指定参数是否是一个空对象。

所谓”空对象”，即不包含任何可枚举 (自定义) 的属性。简而言之，就是该对象没有属性能够通过 for…in 迭代。

该函数属于全局 jQuery 对象

留神：既检测对象自身的属性，也检测从原型继承的属性

isEmptyObject:function(obj){
    var name;
    for(name in obj){return false;}
    return true;
}
User.prototype.word = 'Hello';
// 自定义的原型对象上的属性也是可枚举的
w($.isEmptyObject(new User()));//false
// 数组
w($.isEmptyObject([]));//true

$.type()

返回值：string

用于确定 JavaScript 内置对象的类型，并返回小写模式的类型名称

typeof 运算符，能够确定数据的类型。不过，对于绝大多数对象而言，typeof 运算符都返回”object”，无奈辨别具体的类型。jQuery.type()能够更加准确地确定 JS 内置对象的类型。

$.type(undefined); //undefined
$.type(true);//boolean
$.type(new Number(3));  //number
$.type(function(){});   //function

$.isPlainObject()

返回值:Boolean

用于判断指定参数是否是一个纯正的对象，就是该对象是通过‘{}’或‘new Object’ 创立，属于全局对象

// 在以后页面内追加换行标签和指定的 HTML 内容
function w(html){document.body.innerHTML +='<br/>'+html;}

w($.isPlainObject({}));   //true
w($.isPlainObject(new Object()));  //true
w($.isPlainObject({name:'CodePlayer'}));//true
w($.isPlainObject(true));   //false

$.isNumeric()

用于判断指定参数是否是一个数字值

返回值：Boolean，若指定的参数是一个数字值，则返回 true，否则返回 false。字符串模式的数字也符合条件。

w($.isNumeric(12));  //true
w($.isNumeric(12.35));   //true
w($.isNumeric('12'));     //true
w($.isNumeric(null));   //false

$.isXMLDoc()

阐明：用于判断一个 DOM 节点是否位于 XML 文档中，或者其自身就是 XML 文档。

该函数次要用于判断指定文档是一个 XML 文档还是一个 HTML(或 XHTML)文档。

返回值：Boolean，若指定的 DOM 节点位于 XML 文档中(或者是一个 XML 文档)，则返回 true，否则返回 false。

w($.isXMLDoc(document));   //false
w($.isXMLDoc(document.body));   //false
w($.isXMLDoc(xmlDoc));    //true

$.contains()

该函数能够去除字符串开始和开端两端的空白字符(直到遇到第一个非空白字符串为止)。它会革除包含换行符、空格、制表符等常见的空白字符。

返回值:Boolean，如果指定元素蕴含另一个元素，则返回 true，否则返回 false

<div id='n1'>
    <p id='n2'>
        <span id="n3">CodePlayer</span>
        </p>
    </div>
<p id="n4"> 专一于编程开发技术分享 </p>

var n1 = document.getElementById('n1');
var n2 = document.getElementById('n2');
var n3 = document.getElementById('n3');
var n4 = document.getElementById('n4');
var span = document.getElementsByTagName('span');

//n1 蕴含 n2
w($.contains(n1,n2)); //true
//n1 不蕴含 n4
w($.contains(n1,n4));  //false

字符串操作

param()

将表单元素数组或者对象序列化

var obj={name:"张三",age:12}
var str = jQuery.param(obj);
$("#results").text(str);

trim()

去掉字符串起始和结尾的空格, 多用于用户数据的荡涤

console.log('--'+$.trim("hello, how are you?")+'--');

AJAX

1. 创立 XMLHttpRequest 对象

var request = new XMLHttpRequest();

2. 应用 open 办法设置和服务器的交互信息

open()

参数：
1. 指定 HTTP 办法或动作，这个字符串不辨别大小写，通常大家用大写字母来匹配 HTTP 协定。

取值能够为：GET/POST/HEAD/DELETE/OPTIONS/PUT

GET: 用于惯例申请，实用于 URL 齐全指定申请资源，申请对服务器没有任何副作用，服务器的响应是可缓存的

POST: 用于 HTML 表单，它在申请主体中蕴含额定数据，且这些数据常存储到服务器上的数据库中。雷同 URL 的反复 POST 申请从服务器失去的响应可能不同，同时不应该缓存应用这个办法的申请。

2.URL, 申请的主题，是绝对于文档的 URL。跨域申请会报错。

3.Boolean 类型的值，如果值为 false 代表同步申请，send()办法将阻塞直到申请实现。如果这个参数是 true 或省略，申请是异步的

request.open('get','https://api.muxiaoguo.cn/api/lishijr/');

3. 设置 requestHeader()

应用 setRequestHeader() 办法来增加 HTTP 头

setRequestHeader()办法须要在 open()和 send()办法之间调用

request.setRequestHeader(属性名称，属性值);

罕用的数据格式(编码可带可不带)

1. 发送 json 格局数据

request.setRequsetHeader(‘Content-type’,’application/json;charset=utf-8′);

2. 发送表单数据

request.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8');

3. 发送纯文本数据, 不指定 Content-type 时，此是默认值

request.setRequestHeader('Content-type','text/plain;charset=utf-8');

4. 发送 html 文本

request.setRequestHeader('Content-type','text/html;charset=utf-8');

4. 设置发送的数据，开始和服务器端交互

send()

参数：

申请主体内容，如果没有，为 null，或者省略。

request.send();// 调用 send()之后, 申请就会发送到服务器

5. 获得响应，注册事件

发送申请后，会收到响应，收到响应后，XHR 对象的以下属性会被填充上数据。

  • responseText：作为响应体返回的文本。
  • responseXML：如果响应的内容类型是 ”text/xml” 或 ”application/xml”，那就是蕴含响应数据的 XML DOM 文档。
  • status：响应的 HTTP 状态。
  • statusText：响应的 HTTP 状态形容。
  • readyState：返回 HTTP 申请状态
    0 open() 尚未调用 UNSENT
    1 open()已调用 OPENED
    2 接管到头信息 HEADERS_RECEIVED
    3 接管到响应主体 LOADING
    4 响应实现 DONE
  • readystatechange 申请状态扭转事件
    当 readyState 值扭转为 4 或服务器的响应实现时，所有的浏览器都触发该事件

6. 如果申请实现，并且响实现，能够获取到响应数据

<button onclick="getRequest()"> 发送申请 </button>
<script>
    function getRequest(){
    //1. 创立 XMLHttpRequest 对象
    var request = new XMLHttpRequest();
    //2. 应用 open 办法设置和服务器的交互信息
    request.open('get','https://api.muxiaoguo.cn/api/lishijr');
    //3. 如果默认可不设置 requestHeader
    //4. 发送申请
    request.send();
    //5. 如果申请实现，并且响应实现，获取到响应数据
    request.onreadystatechange = function(){if(request.readyState === 4&&request.status === 200){
            // 转换为 JSON 对象
            console.log(JSON.parse(request.responseText));
        }
    }
}
    </script>

罕用申请应用

应用 get 申请发送有参申请

<button onclick='getParams()'> 获取到有参 get 申请 </button>
<script>
    function getParams(){var request = new XMLHttpRequest();
    // 第一种模式  拼接字符串
    //request.open('get','https://api.muxiaoguo.cn/api/tianqi?'+'city='+'苏州'+'&'+'type='+'1');
    // 第二种模式 传递序列化后的参数
    var params = {
        city:'苏州',
        type:1
    }
    
}
    </script>

应用 post 发送有参申请

<button onclick="login()"> 登录 </button>
<script>
  function login() {var request = new XMLHttpRequest();
    request.open('post','xxx');
    var params = {
      password: "123321",
      username: "admin1"
    }
    // 登录接口 Content-type 为 json 格局
    request.setRequestHeader('Content-type','application/json;charset=utf-8');
    request.send(JSON.stringify(params))
    request.onreadystatechange = function () {if (request.readyState === 4 && request.status === 200) {console.log(request.responseText);
      }
    }
  }
</script>

正文完
javascript
发表至： javascript
2021-09-23
 0
JS module的导出和导入
细说webpack-3-webpackcli-零配置打包
重学前端学习笔记七JavaScript对象面向对象还是基于对象
关于javascript:一文读懂Js中的this指向