*课前提示相对于js中的复杂 冗长的单词,语言 jquery就显得简单粗暴许多但有一部分jquery是无法完成的这时候就需要js的帮助。
jquery与js的对比:
jquery其实大致上可以理解为是js的的升级版 ,所以jquery的功能比较强大一些,用起来也会比较方便。但是两者都是属于js的 而jquery其实算是一个封装类的js ,做特效会比较方便一些并且两者可以串着使用
在页面中能不使用js就别用相对于jquery ,js太麻烦,但是想要使用jquery引用 你需要引用一个jquery包 网上能找到
(同一个版本下一般找到的jquery包中的命名格式是:jquery-版本号.min.js或jquery-版本号.js;区别min的是一个压缩版他将所有字符全部压缩,且体积较小;没有经过压缩的js比较大;只要版本不是特别老一般都能用)
直接上代码
//JS方式
//1.根据ID取元素,DOM对象
//var div = document.getElementById("one");
//2.根据class取元素
//var div = document.getElementsByClassName("test");
//3.根据name取
//var bd = document.getElementsByName("uid");
//4.根据标签名取
//var div = document.getElementsByTagName("div");
//操作内容
//1.非表单元素
//alert(div.innerText);
//div.innerText = "aaaa";
//div.innerHTML;
//2.表单元素
//div.value
//操作属性
//div.setAttribute("","");
//div.removeAttribute("");
//div.getAttribute("");
//操作样式
//div.style.backgroundColor = "red";
//alert(div.style.color);只能获取内联样式
//在数组里面如果要取DOM对象使用索引的方式,如果要取Jquery对象使用eq()
//JQUERY方式
//1.根据ID取元素,Jquery对象
//var div = $("#one");
//2.根据class取
//var div = $(".test");
//3.根据属性取
//var bd = $("[bs='aa']");
//4.根据标签名取
//var div = $("div");
//5.组合选取
//a.var div = $(".test [name='aa']");
// alert (div[0]);
// b.var div = $("div.test");后代关系是针对于标签来说的
// alert(div[0]);
//var div = $("div span");
// alert(div[0]);
//操作内容
//1.非表单元素
//alert(div.text());
//div.text("aaaa");
//div.html();
//2.表单元素
//div.val("aaa");
//操作属性
//div.attr("test","aa");
//div.removeAttr("test");
//div.attr("test");
//操作样式
//div.css("background-color","yellow");
//alert(div.css("color"));
//操作元素
//var str = "<div id='a' style='100px; height:100px; background-color:red'></div>";
//div.append(str); //追加元素
//$("#a").remove(); //移除某个元素
/*$(".test").click(function(){
alert($(this).text());
})*/