jQuery学习笔记

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

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

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

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

: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')//所有后代元素

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

// 浏览器可视窗口大小:
$(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

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变为灰色
})