[JavaScript知识库]jquery复习

• jquery
  jquery可以说是js的代码库，

• jquery的格式

$(function)=window.onload=function(){}
window.onload一个页面只能出现一个，但是使用$()可以避免冲突
$(selector) 是强大的选择器，jquery有选择器功能

• 对象之间使用
  DOM对象:直接使用js来获取节点对象，classname，innerHTML，value
  jquery对象：使用jquery选择器来获取节点对象，addClass,html,val,
  DOM对象转成jquery对象：$(dom)
  jquery对象转化成dom对象，jquery对象.get(index)

• jquery对象中的选择器
  标签选择器：$("h")id选择器：$("#id") KaTeX parse error: Expected 'EOF', got '#' at position 4: ("p#?id") 类选择器：(".class") $("h2.class")通配选择器：$("*")
  并集选择器：$("elem1,elem2,elem3")后代选择器：$(“ul li”)
  父子选择器：$(“ul>li”)
  后面的第一个兄弟元素：pren +next
  后面的所有兄弟元素：prev ~next

• 操作页面的样式

var div = $("#div1") // 获取了所有的div对象， id选择器 
//获取css样式
var wid = div.css("width");
var hi = div.css("height");
console.log(wid+hi);
//操作css对象
div.css("width","400px");
div.css("height","500px");
div.css("background-color","red");
div.css("background-color","green");
//操作页面的样式
$("#bul").click(function(){
//通过添加类的方式添加css样式
$("#div1").addClass("div");
})

• 操作页面元素的属性

$("#bul").click(function(){
//获取元素对象
var text = $("#inpl");
//获取元素的属性
var te = text.attr("type");
var cl = text.attr("class");
//获取元素的属性值
var val = text.attr("value");
console.log(val);
//获取文本框输入的值
var value = text.val();
alert(value);
//设置元素的类型
text.attr("type","button");
text.attr("vlaue","测试按钮");
text.attr({"type":"button","value":"测试按钮"});
})

• 操作页面文本和值

//获取div元素对象
var div = $("#div1");
//获取这个元素的值
var value = div.html();
console.log(value);
//只获取文本内容
var text = div.text();
console.log(te);
//获取文本框的值
var value = $("#inpl").val();
console.log(val);

• 操作页面的元素

//删除指定元素 
$("#div1").remove();
//清空内容
$("#div1").empty();

• 事件处理 使用函数

//页面加载完后执行操作
$(function(){})
$(function(){
	$("bul").click(function(){
	alert("单击事件");
	})
	$("#bul").dblclick(function(){
	alert("双击事件");
	})
	//bind事件绑定
	$("#bu2").bind('click',function(){
	alter("单击事件！！！")
	})
	//one一次事件绑定
	$("#bu3").one('click',function(
	alert("一次事件绑定")
	))

})