1、jquery 特点:
jquery是一款免费且开放源代码的javascript代码库,引入了全新的DOM选择器引擎,同时提供UI库组件。
jquery优点:
轻量级
强大的DOM选择器,简化javascript和ajax开发。
解决不同浏览器兼容问题
提供UI库组件,让页面开发更方便。
2、导入jquery:
3、Jquery事件添加,全部采用现代事件添加方式,一个事件可以绑定多个函数
$("#mydiv").click( function () {
}
4、$(function(){
……
}) 文档加载完毕后,再执行,相当于window.onload
5、jquery对象和dom对象互换。jquery对象和DOM对象方法是不一样的,使用前需要注意是什么对象
dom转为jquery
var obj = document.getElementById(“div1”);
var jq = $(obj);
jquery转为dom
var jq = $("#div1");
var obj = $(jq)[0];
6、选择器:
id选择器: var msg =$("#div1").html(); //得到id为div1的元素,标签中间的内容
子元素选择器:(相当于getElementsByTagName),找到元素指定标签子元素集合
var msg = $("#div1 label");
var msg = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").find("la…("#div1 label")[1].innerHTML); //注意取出的数组元素为DOM对象
类选择器:$("#div1 .mm").html();//得到id为div1的元素中,所有class="mm"元素集合
属性选择器: $(’#selectObj option:selected’) 选择下拉框中所有选中项
this和数组元素都是dom对象。
7、设置元素属性
$("#showImg").prop(“src”,“1.jpg”);
8、设置元素样式
$("#div1").css(
{border:‘5px solid #9f0’,backgroundColor:‘yellow’})
9、设置获得元素内容
设置、获得标签中的内容(相当于innerHMTL)
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").html("<p…("#div1").html());//获得内容
设置、获得value值
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲userName").val(…("#userName").val());//获得value值
10、遍历数组
$("#div1 label").each(function (){
//得到原始DOM对象
alert(this.innerHTML);
});
11、显示、隐藏元素
$(“p”).show(“slow”);//附加动画,显示元素
$(“p”).hide(“slow”);//附加动画,隐藏元素
12、DOM操作
元素添加
$("#m1div").append("");
元素移除
//从父容器中移除id为 p1的元素
$("#p1").remove();
//从mydiv元素中移除所有样式为mm的元素
$("#mydiv").remove(".mm");
元素替换
//将所有的p元素替换为b元素
$(“p”).replaceWith("Paragraph. ");
元素下一个元素
$("#p1").next();
元素上一个元素
$("#p1").prev();
元素父元素
$("#p1").parent()