Jquery学习笔记---Day02
一:JQuery选择器
选择器允许用户对元素组或单个元素进行操作。
1:JQuery元素选择器
例如:
$("p") <!--选取<p>元素-->
$("p.intro") <!--选取所有class="intro"的<p>元素-->
$("p#demo")<!--选取所有id="demo"的<p> 元素-->
2:JQuery属性选择器
JQuery使用XPath表达式来选择带有指定属性的元素。
例如:
$("[href]") <!--选取所有带有href属性的元素-->
$("[href='#']") <!--选取所有带有href值等于'#'的元素-->
$("[href!='#']") <!--选取所有带有href值不等于'#'的元素-->
$("[href$='.jpg']") <!--选取所有href值以".jpg"结尾的元素-->
3:Jquery CSS选择器
通过JQuery CSS选择器可以改变对应元素的CSS属性。
例如--通过单击button ,改变p元素的背景颜色为红色
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
<p>This is a pargraph</p>
二:JQuery事件
Jquery事件处理方法是jQuery中的核心函数。
Jquery名称冲突解决办法
Jquery使用名为noConflict()的方法来解决该问题。
var jp=jQuery.noConflict();
然后使用jp来代替$
JQuery常见事件
1:$(document),ready(function()); //将函数绑定到文档的就绪事件,当文件加载完成时。
2:$(元素).click(function()); //单击时触发的事件
3:$(select).dbclick(function()) //鼠标双击时触发的事件
4: $(select).focus(function()) //触发被选元素时候的事件
5:$(select).mouseover(function) //鼠标悬靠时触发的事件
6:$(select).hide()
7:$(select).show()
8:$(select).toggle() //实现hide和show 的切换
$(select).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。