jQuery学习笔记

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

选择器

按ID查找

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

按标签查找

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

按class查找

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

层级选择器

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

<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>

$('.lang .lang-javascript').css("color","red")

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正好相反，选择那些不能输入的。

查找子父节点

$('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文本

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

操作表单

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

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

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

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

修改CSS

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

添加class属性

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

addClass()添加属性

显示和隐藏DOM

jQueryshow()和hide()方法

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

获取DOM信息

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

// 浏览器可视窗口大小:
$(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()`用于删除属性

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

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

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

修改DOM结构

append()和prepend()添加DOM节点

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

remove()删除DOM节点

事件

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

on方法用来绑定一个事件

onclick	//鼠标单机时触发
onmousemove //当鼠标指针移动到元素上时触发。
onmouseout	//当鼠标指针移出元素时触发

<a id="test-link" href="#0">点我试试</a>

<script>
    var a = $('#test-link');
    a.on('click', function () {
        alert('Hello!');
    });
</script>

案例

五星好评

核心代码

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() 是实现本案例的核心