最近在学习jQuery 不难 只是有些东西容易忘 特此记录之
// 查找<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")
: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')//所有后代元素
jQuery对象的text()
和html()
方法分别获取节点的文本和原始HTML文本
无参数调用text()
是获取文本,传入参数就变成设置文本,HTML也是类似操作
jQuery对象统一提供val()
方法获取和设置对应的value
属性、
和js中的 .value()
作用一样
var input = $('#test-input')
input.val('鸡你太美')
console.log(input.val())
不带参数是获取,带上参数是赋值
jQuery对象有“批量操作”的特点 用于修改css比较方便 如果是js还需要遍历的
在做过了几个案例中很多都需要添加class属性
addClass()
添加属性
jQueryshow()
和hide()
方法
上图获取到JavaScript
之后将其隐藏 显示同理
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()
更适合操作标签本身的属性
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()
是实现本案例的核心