JavaScript全面学习(jQuery)

1.

window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'

2.jQuery的选择器不会返回undefined或者null,返回[]

3.

var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"
var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM
// 例如: class="icon-clock", class="abc icon-home"

选出来的元素是按照它们在HTML中出现的顺序排列的,而且不会有重复元素。

 4.子选择器$('parent>child')<child>节点必须是<parent>节点的直属子节点

<!-- HTML结构 -->
<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>
$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 无法选出,因为<div>和<li>不构成父子关系

过滤器:

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

5.针对表单元素,jQuery还有一组特殊的选择器:

  • :input:可以选择<input><textarea><select><button>

  • :file:可以选择<input type="file">,和input[type=file]一样;

  • :checkbox:可以选择复选框,和input[type=checkbox]一样;

  • :radio:可以选择单选框,和input[type=radio]一样;

  • :focus:可以选择当前输入焦点的元素,例如把光标放到一个<input>上,用$('input:focus')就可以选出;

  • :checked:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如$('input[type=radio]:checked')

  • :enabled:可以选择可以正常输入的<input><select> 等,也就是没有灰掉的输入;

  • :disabled:和:enabled正好相反,选择那些不能输入的。

6.

<!-- HTML结构 -->
<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>

find()查找:

var ul = $('ul.lang'); // 获得<ul>
var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 获得Swift
var hsk = ul.find('[name=haskell]'); // 获得Haskell

filter()方法可以过滤掉不符合选择器条件的节点:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

也能用函数去过滤:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
    return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
    return this.innerHTML;
}).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

7.

<!-- HTML结构 -->
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>

分别获取文本和HTML:

$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'

无参数调用text()是获取文本,传入参数就变成设置文本,HTML也是类似操作。

8.attr()removeAttr()方法用于操作DOM节点的属性:

// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined

9.prop()方法和attr()类似,但是HTML5规定一些属性在DOM节点中可以没有值,checked="checked"等效于单独写checked  (selected也同理)

  attr()prop()对于属性checked处理有所不同:

var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true
radio.is(':checked'); // true

对于表单元素,jQuery对象统一提供val()方法获取和设置对应的value属性

10.添加Pascal、Lua和Ruby,然后按字母顺序排序节点:

<!-- HTML结构 -->
<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>
var ul=$("#test-div ul");
ul.append('<li><span>Pascal</span></li>');
ul.append('<li><span>Lua</span></li>');
ul.append('<li><span>Ruby</span></li>');

var langs = $("#test-div ul li span"); // 拿到JavaScript, Python, Swift, Scheme
var arr = langs.map(function () {
    return this.innerHTML;
}).get();
arr.sort();

var li = $('#test-div>ul>li');
li.remove();            
arr.map((x)=>ul.append('<li><span>'+x+'</span></li>'))

11.ready仅作用于document对象。ready事件在DOM完成初始化后触发,且只触发一次

12.取消绑定:

function hello() {
    alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);

需要特别注意的是,下面这种写法是无效的:

// 绑定事件:
a.click(function () {
    alert('hello!');
});

// 解除绑定:
a.off('click', function () {
    alert('hello!');
});

可以使用off('click')一次性移除已绑定的click事件的所有处理函数。

13.

var input = $('#test-input');
input.change(function () {
    console.log('changed...');
});
var input = $('#test-input');
input.val('change it!');   //这里用JavaScript代码去改动文本框的值,无法触发change事件
input.change(); // 触发change事件

14.ajax(url, settings)函数需要接收一个URL和一个可选的settings对象,常用的选项如下:

  • async:是否异步执行AJAX请求,默认为true,千万不要指定为false

  • method:发送的Method,缺省为'GET',可指定为'POST''PUT'等;

  • contentType:发送POST请求的格式,默认值为'application/x-www-form-urlencoded; charset=UTF-8',也可以指定为text/plainapplication/json

  • data:发送的数据,可以是字符串、数组或object。如果是GET请求,data将被转换成query附加到URL上,如果是POST请求,根据contentType把data序列化成合适的格式;

  • headers:发送的额外的HTTP头,必须是一个object;

  • dataType:接收的数据格式,可以指定为'html''xml''json''text'等,缺省情况下根据响应的Content-Type猜测。

原文地址:https://www.cnblogs.com/shen076/p/6183770.html