jQuery是JS的方法集,它比JS功能更强大,可批量操作。
在使用jQuery之前需要先引入jQuery包,然后在进行编写。
步骤:
1.取元素:
JS中的选取id为document.getElementById('id'),jQuery中为$('#id'),
JS中的选取id为document.getElementsByClassName('classname'),jQuery中为$('.classname')等;
2.操作内容:分为操作表单元素和操作非表单元素
操作表单元素:$('#id').val();
操作表单元素:
$('#id').html(),获取HTML;
$('#id').text(),获取文本;
$('#id').append()表示追加内容(在里面内容上增加新的内容);
$('#id').next()表示在该元素的后面添加内容;
()内如果给参数代表设置,不给参数代表获取。
3.操作属性:
获取,设置属性:$('#id').attr("属性名","设置的属性值");
移除属性:$('#id').removeAttr("属性名");
操作复选框$('#id').prop("checked",true);true为选中,false为不选中,如果要取选中状态,则直接写checked即可;
4.操作样式:
$('#id').css("样式的名称","样式的值"),如:$('#a').css("width","100px"),可获取所有的方式(内嵌,内联,外部);
批量操作所有的元素:$(".classname").("样式名称","样式的值")
5.添加事件:
$('#id').click(function(){ }),当用户点击后执行;
在事件里面使用当前元素:$(this);
在function()中加入e,表示事件数据,可获取到一些可使用的数据,如ClientX和ClientY表示鼠标的坐标;
给复选框添加(绑定)事件:$('#id').bind("事件名称(如click)",function(){ });
移除复选框点击事件:$('#id').unbind("click");
常见问题:
1.js原生与Jquery混用;
2.原生JS中的对象数组在Jquery中取用方法不同。