jQuery基础知识

Posted 2020-09-03 周全

找元素
var a = document.getElementById("aa");
alert(a);
var a = document.getElementsByClassName("a1");
alert(a[2]);
document.getElementsByTagName("div");
var a = document.getElementsByName("uid");
alert(a[0]);

操作内容
非标单元素
alert(a.innerText); 文本
alert(a.innerhtml); HTML代码
表单元素
alert(a.value);
a.value="hello";

操作属性
a.setAttribute("test","test");
a.removeAttribute("test");
alert(a.getAttribute("value"));

操作样式
a.style.fontSize = "30px";
alert(a.style.color);

统一操作元素
var d = document.getElementsByClassName("a1");
for(var i=0;i<d.length;i++)
{
   d[i].style.fontSize = "30px";
}


找元素
var a = $("#aa");
alert(a);
var a = $(".a1");
alert(a.eq(2));
var a = $("div");
var a = $("[bs=1]");
alert(a);

操作内容
非表单元素
alert(a.text());
a.text("bbbbb");
alert(a.html());
表单元素
a.val("hello");

操作属性
a.attr("test","test");
a.removeAttr("test");
alert(a.attr("value"));
a.prop("test","test");
a.removeProp("test");
alert(a.prop("test"));

a.prop("checked",true);
alert(a.prop("checked"));

操作样式
a.css("background-color","green");
alert(a.css("width"));

统一操作元素
$(".a1").css("font-size","30px");
$(".ck").prop("checked",true);

事件
$("#ck").click(function(){
   
   alert($(this));
   $(this)选取自身元素
   
   $(".ck").prop("checked",$(this).prop("checked"));
   
   }) 匿名函数
   
$(".ck").click(function(){
   alert("bb");
   })