老雷php全栈开发课程之认识jQuery
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 我们常用jQuery来处理Dom\事件\动画\AJAX
<h3>认识jQuery</h3>
<div>参考手册 http://www.runoob.com/jquery/jquery-tutorial.html</div>
<div>jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
我们常用jQuery来处理Dom\事件\动画\AJAX
</div>
<h3>
jQuery Dom处理
</h3>
<div>
<h4>选择器</h4>
<pre>
$("div")
$(".class")
$("#id")
$("div.class") 同级选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
</pre>
</div>
<h3>jQuery 事件</h3>
<div>
click dbclick mouseenter mouseleave
</div>
<pre>
//针对已创建元素
$(".class").on("click",function(){
console.log($(this).html());
})
//可针对动态创建数据
$(document).on("click",".class",function(){
console.log($(this).html());
})
</pre>
<h3>Dom操作</div>
<pre>
var el=$(".class");
处理内容
el.val(); el.html(); el.text();
增加处理元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
删除元素
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
处理class
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
处理css
el.css("background-color","yellow");
el.css({"background-color":"yellow","font-size":"200%"});
</pre>
<h3>动画效果</h3>
<div>
el.show();
el.hide();
$(selector).animate({params},speed,callback);
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
</div>
<h3>
jQuery AJAX
</h3>
<div>什么是AJAX?ajax是在不刷新页面的情况下,与服务器发生数据交换的技术</div>
<pre>
$.get(url,function(res){
},"json")
$.post(url,data,function(res){
},"json");
$.ajax({
url:url,
type:"GET",
data:{
"action":"add"
}
dataType:"json",
success:function(res){
}
})
</pre>