jQuery学习笔记

最近在学习jQuery 不难 只是有些东西容易忘 特此记录之

选择器

按ID查找

1
2
// 查找<div id="abc">:
var div = $('#abc');

按标签查找

1
2
var ps = $('p'); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点

按class查找

1
var a = $('.red'); // 所有节点包含`class="red"`都将返回

层级选择器

如果DOM元素有层级关系 层级之间用空格隔开

1
2
3
4
5
6
7
<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>
1
$('.lang .lang-javascript').css("color","red")

jQuery 特殊选择器

1
2
3
4
5
6
7
8
: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正好相反,选择那些不能输入的。

查找子父节点

1
2
3
4
5
6
7
8
$('h3').parent().css() //查找h3父元素
$('h3').sliblings()//所有兄弟节点
$('h3').nextAll()//当前节点后面所有兄弟节点
$('h3').next()//当前节点后面一个兄弟节点
$('h3').prev()//当前节点前面一个兄弟节点
$('h3').prevAll()//当前节点前面所有兄弟节点
$('div').children()//查找所有直接子元素
$('div').find('li')//所有后代元素

操作DOM

修改Text和HTML

jQuery对象的text()html()方法分别获取节点的文本和原始HTML文本

QQ截图20191110192329.png

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

QQ截图20191110192522.png

操作表单

jQuery对象统一提供val()方法获取和设置对应的value属性、

和js中的 .value()作用一样

1
2
3
var input = $('#test-input')
input.val('鸡你太美')
console.log(input.val())

不带参数是获取,带上参数是赋值

修改CSS

jQuery对象有“批量操作”的特点 用于修改css比较方便 如果是js还需要遍历的

QQ截图20191110192842.png

添加class属性

在做过了几个案例中很多都需要添加class属性

addClass()添加属性

QQ截图20191110193823.png

显示和隐藏DOM

jQueryshow()hide()方法

QQ截图20191110194116.png

上图获取到JavaScript之后将其隐藏 显示同理

获取DOM信息

jQuery可以获取DOM的高宽等信息

1
2
3
4
5
6
7
8
9
10
11
12
// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600
// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500
// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px
div.height('200px'); // 设置CSS属性 height: 200px

attr()用于获取属性赋值属性removeAttr()`用于删除属性

QQ截图20191110194900.png

prop()方法的作用和attr()类似

attr()更适合操作自定义属性。

prop()更适合操作标签本身的属性

修改DOM结构

append()prepend()添加DOM节点

QQ截图20191110195946.png

两者区别就是append()把DOM添加到最后,prepend()则把DOM添加到最前。

remove()删除DOM节点

事件

jQuery很多时候需要绑定事件来出发一些东西

on方法用来绑定一个事件

1
2
3
onclick	//鼠标单机时触发
onmousemove //当鼠标指针移动到元素上时触发。
onmouseout //当鼠标指针移出元素时触发
1
<a id="test-link" href="#0">点我试试</a>
1
2
3
4
5
6
<script>
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
</script>

QQ截图20191110201359.png

案例

五星好评

QQ截图20191111082131.png

QQ截图20191111082317.png

核心代码

1
2
3
4
5
6
var re = $('li')
re.on('mousemove',function(){
re.css('color','red'); //移动到li全部字体变为红色
$(this).css('color','red'); //当前li变为红色
$(this).nextAll().css('color','gainsboro');//当前li之后的所有li变为灰色
})

nextAll() 方法返回被选元素之后的所有同级元素。nextAll() 是实现本案例的核心