JQuery 总结

1、基本选择器

基本选择器包含：标签选择器、id选择器、class选择器、通配符选择器、并集选择器、交集选择器。

1)标签选择器

需求描述：选择页面中所有的div标签，设置其背景为红色。

<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>

$('div').css('background', 'red');

输出结果如下：

image.png

2)id选择器

需求描述：选择页面中所有id为btn的按钮，设置其背景为红色。

<button>按钮1</button>
<button id="btn">按钮2</button>
<button>按钮3</button>

$('#btn').css('background', 'red');

输出结果如下：

image.png

3)class选择器

需求描述：选择页面中所有class为red的段落，设置其背景为红色。

<p class="red">我是段落1</p>
<p>我是段落2</p>
<p class="red">我是段落3</p>

$('.red').css('background', 'red');

输出结果如下：

image.png

4)并集选择器

需求描述：选择页面中所有的段落与按钮，设置其背景为红色。

<p>我是段落</p>
<button>我是按钮</button>
<div>我是div</div>
<h1>我是大标题</h1>

$('p,button').css('background', 'red');

输出结果如下：

image.png

5)交集选择器

需求描述：选择页面中所有class为red的段落，设置其背景为红色。

<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>

$('p.red').css('background', 'red');

输出结果如下：

image.png

2、层级选择器

层级选择器主要有：子代选择器、后代选择器、兄弟选择器，下面分别来看。

1)子元素选择器

需求描述：选择ul下的所有span子元素，设置其背景为红色。

<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('ul>span').css('background', 'red');

输出结果如下：

image.png

2）后代选择器

需求描述：选择ul下的所有span元素，设置其背景为红色。

<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('ul span').css('background', 'red');

输出结果如下：

image.png

3）兄弟选择器

需求描述：选中id为box的下一个兄弟li，设置其背景为红色。

<ul>
    <span>我是ul的span1</span>
    <li id="box">我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('#box+li').css('background', 'red');

输出结果如下：

image.png

需求描述：选中id为box的后边的兄弟li，设置其背景为红色。

<ul>
    <span>我是ul的span1</span>
    <li id="box">我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('#box~li').css('background', 'red');

输出结果如下：

image.png

4）属性筛选器

需求描述：查找herflang属性的标签元素，设置其背景为红色。

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

$('[hreflang]').css('background', 'red');

输出结果如下：

image.png

需求描述：查找hreflang属性值是en的所有超链接，设置其背景为红色。

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

$('a[hreflang="en"]').css('background', 'red');

输出结果如下：

image.png

需求描述：查找hreflang属性值不是en的所有超链接，设置其背景为红色。

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

$('a[hreflang!="en"]').css('background', 'red');

输出结果如下：

image.png

需求描述：查找hreflang属性值是en或者以en开头的所有超链接，设置其背景为红色。

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

$('a[hreflang|="en"]').css('background', 'red');
或者
$('a[hreflang^="en"]').css('background', 'red');

输出结果如下：

image.png

5）子元素筛选器

需求描述：选择所有父级元素ul下的第一个子元素li，设置其背景为红色。

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>

$('ul li:first-child').css('background', 'red');

输出结果如下：

image.png

需求描述：选择所有父级元素ul下的最后一个子元素li，设置其背景为红色。

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>

$('ul li:last-child').css('background', 'red');

输出结果如下：

image.png

需求描述：选择所有父级元素ul下的第二个子元素li，设置其背景为红色。

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>

$('ul li:nth-child(2)').css('background', 'red');

输出结果如下：

image.png

3、常用工具方法

• $.each方法

方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1，其他对象通过其属性名进行迭代。

需求描述：给定一个数组，使用$.each方法进行遍历输出

var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];
$.each(arr, function (index, element) {
    console.log(index, element);
});

image.png

需求描述：给定一个对象，使用$.each方法进行遍历输出

var obj = {
    name: 'Tom',
    age: 28,
    speak: function () {}
};
$.each(obj, function (key, value) {
    console.log(key, value);
});

image.png

• $.trim方法
  方法描述：去掉字符串起始和结尾的空格。

需求描述：给定一个字符串，去掉该字符串的前后空格

var str = '    hello    ';
console.log($.trim(str));

• $.ajax方法
  方法描述：执行一个异步的HTTP的请求。

需求描述：执行一个异步的HTTP GET请求，从服务器加载数据。

$.ajax({
    url: '/user/login',
    type: 'get',
    data: {
        username: 'zhangsan',
        password: '123456'
    },
    dataType: 'text',
    success: function (response) {
        alert(response);
    },
    error: function (response) {
        alert(response);
    }
});

需求描述：执行一个异步的HTTP POST请求，从服务器加载数据。

$.ajax({
    url: '/user/login',
    type: 'post',
    data: {
        username: 'zhangsan',
        password: '123456'
    },
    dataType: 'text',
    success: function (response) {
        alert(response);
    },
    error: function (response) {
        alert(response);
    }
});

• $.get方法
  方法描述：使用一个HTTP GET请求从服务器加载数据。

这是一个ajax功能的缩写，这相当于:

$.ajax({
    url: url,
    data: data,
    success: success,
    dataType: dataType
});

$.get('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {
    alert(response);
});

• $.post方法
  方法描述：使用一个HTTP POST请求从服务器加载数据。

这是一个ajax功能的缩写，这相当于:

$.ajax({
    url: url,
    data: data,
    success: success,
    dataType: dataType
});


$.post('/user/login', {username: 'zhangsan', password: '123456'}, function (response) {
    alert(response);
});

4、操作DOM元素

1、属性

attr()

方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。

需求描述：设置p标签的title属性为”我是attr修改后的段落标题“

<p id="content" title="我是段落标题">我是段落</p>

$('#content').attr('title', '我是attr修改后的段落标题');

需求描述：读取p标签的title属性并输出

<p id="content" title="我是段落标题">我是段落</p>

console.log($('#content').attr('title'));

prop()

方法描述：专门操作属性值为布尔值的属性，该方法读写一体。

需求描述：设置复选框的状态为选中状态

<input type="checkbox">复选框

$(':checkbox').prop('checked', 'true');

需求描述：读取复选框的选中状态并输出

<input type="checkbox" checked>复选框

console.log($(':checkbox').prop('checked'));

val()

方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。

需求描述：设置文本框的值为”123456“

<input type="text">

$(':text').val('123456');

需求描述：读取文本框的值并输出

<input type="text" value="123456">

console.log($(':text').val());

text()

方法描述：设置/获取元素的文本内容，该方法读写合一。

需求描述：设置p段落标签的内容为“我是段落”

<p></p>

$('p').text('我是段落');

需求描述：获取p段落标签的内容并输出

<p>我是段落</p>

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

html()

方法描述：设置/获取元素的html内容，该方法读写合一。

需求描述：设置ul列表标签的li列表项

<ul></ul>

var li = '<li>我是列表项</li>';
$('ul').html(li);

需求描述：获取ul列表中的列表项并输出

<ul><li>我是列表项</li></ul>

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

append()

方法描述：向当前匹配的所有元素内部的最后面插入指定内容。

需求描述：为当前的ul向后添加一个列表项

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>

var last = '<li>我是最后一个列表项</li>';
$('ul').append(last);

prepend()

方法描述：向当前匹配的所有元素内部的最前面插入指定内容。

需求描述：为当前的ul向前添加一个列表项

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
</ul>

var first = '<li>我是第一个列表项</li>';
$('ul').prepend(first);

empty()

方法描述：删除所有匹配元素的子元素。

需求描述：将ul列表下所有的子节点全部移除

<ul>
    <li>列表项1</li>
    <p>我是段落1</p>
    <li>列表项2</li>
    <p>我是段落2</p>
    <li>列表项3</li>
</ul>

$('ul').empty();

remove()

方法描述：删除所有匹配的元素。

注意：同时移除元素上的事件及 jQuery 数据

需求描述：将ul列表下所有的p子节点全部移除

<ul>
    <li>列表项1</li>
    <p>我是段落1</p>
    <li>列表项2</li>
    <p>我是段落2</p>
    <li>列表项3</li>
</ul>

$('ul>p').remove();

parent()

方法描述：获取集合中每个匹配元素的父元素，可以提供一个可选的选择器来进行筛选。

需求描述：输出id为two的li的父元素

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

console.log($('#two').parent()[0]);

children()

方法描述：获取集合中每个匹配元素的子元素，可以提供一个可选的选择器来进行筛选。

需求描述：输出ul下的所有子元素

<ul>
    <p>我是段落1</p>
    <li>列表项1</li>
    <li id="two">列表项2</li>
    <li>列表项3</li>
    <p>我是段落2</p>
</ul>

var childrens = $('ul').children();
for (var i = 0; i < childrens.length; i++) {
    console.log(childrens[i]);
}

image.png

2、样式

css()

方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

需求描述：设置div的背景颜色为红色，字体颜色为白色

<div>我是div</div>

$('div').css({
    'background': 'red',
    'color': 'white'
});

image.png

需求描述：获取div的背景颜色和字体颜色并输出

<div style="background: red;color: white">我是div</div>

console.log($('div').css('background'));
console.log($('div').css('color'));

addClass()

方法描述：为每个匹配的元素添加指定的样式类名。

需求描述：为所有的li添加样式”beauty“

.beauty {
    font-weight: bold;
    font-size: 18px;
    color: coral;
}

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

$('li').addClass('beauty');

image.png

removeClass()

方法描述：移除集合中每个匹配元素上一个，多个或全部样式。

需求描述：为所有的li移除样式”beauty“

.beauty {
    font-weight: bold;
    font-size: 18px;
    color: coral;
}

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

$('li').removeClass('beauty');

image.png