选择器的分类
id选择器(#)
类选择器(.)
标签选择器
派生选择器
属性选择器
过滤选择器
onclick点击事件
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javaScript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javaScript">
function test1(){
$("#lq").hide();
}
function test2(){
$("#lq").show();
}
</script>
</head>
<body>
<input type="button" value="隐藏" onclick="test1()"/>
<input type="button" value="显示" onclick="test2()"/>
<div id="lq">lanqiao<br/>lanqiao<br/>lanqiao<br/>lanqiao</div>
</html>
document.getElementById.style.display="none";
$("#lq").hide();
jQuery("#lq").hide();
三条语句表示的含义是一样的
<input type="button" value="隐藏" onclick="alert(1)"/>
<input type="button" value="隐藏" onclick="$(this).hide()"/>
this指代的input标签自己
$.each()
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javaScript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javaScript">
/*function test(){
var elements = document.getElementsByName("hobby");
for(var i=0;i<elements.length;i++){
var element = elements[i];
console.log(element.value+element.checked)
}
}*/
var fun = function(i,inputElement){
console.log(inputElement.value+inputElement.checked);
};
function test(){
(1)$.each($("[name='hobby']"),fun);
可以是数组或者jQuery对象调用
(2)$("[name='hobby']").each(fun);
只能是jQuery对象调用
}
</script>
</head>
<body>
<form>
<label for="hobby1">篮球</label>
<input id="hobby1" type="checkbox" name="hobby" value="1"/>
<label for="hobby2">足球</label>
<input id="hobby2" type="checkbox" name="hobby" value="2"/>
<label for="hobby3">排球</label>
<input id="hobby3" type="checkbox" name="hobby" value="3"/>
<input type="button" value="获取值" **onclick="test()"**/>
</form>
</body>
</html>
<form>
<label for="hobby1">篮球</label>
<input id="hobby1" type="checkbox" name="hobby" value="1"/>
<label for="hobby2">足球</label>
<input id="hobby2" type="checkbox" name="hobby" value="2"/>
<label for="hobby3">排球</label>
<input id="hobby3" type="checkbox" name="hobby" value="3"/>
<input type="button" value="获取值"/>
</form>
**<script type="text/javascript">
$("[type='button']").click(function(){
alert(11)
});
</script>**
过滤选择器
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
.odd{
background-color:pink;
}
.even{
background-color:yellow;
}
.mouse{
background-color:white;
}
</style>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function changeColor(obj){
$(obj).addClass("mouse")
}
</script>
<table border="1" width="100%">
<tr onmouseover="changeColor(this)">
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr onmouseover ="changeColor(this)">
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>
<script type="text/javascript">
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
</script>
或者可以不在tr使用onmouseover,直接在使用
<script type="text/javascript">
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$("tr").hover(function(){
$(this).addClass("mouse");;
},function(){
$(this).removeClass("mouse");
});
</script>
onload加载的几种方式
$(document).ready(test);
$(test);
$(
function(){}
);
onload=test;
<body onload=”test2()” ><body>
颜色切换的样式可以在
<script type="text/javascript">
$("tr:odd").css("backgroundColor","pink");
$("tr:even").css("backgroundColor","yellow");
$("tr").hover(function(){
$(this).css("backgroundColor","white");
},function(){
$("tr:odd").css("backgroundColor","pink");
$("tr:even").css("backgroundColor","yellow");
});
</script>
注意:addClass()与.css()不要交叉使用
使用bind方法
<script type="text/javascript">
$("tr:odd").css("backgroundColor","pink");
$("tr:even").css("backgroundColor","yellow");
$("tr").bind({
mouseover:function(){$(this).css("background-color","white");},
mouseout:function(){$("tr:odd").css("backgroundColor","pink");
$("tr:even").css("backgroundColor","yellow");}
});
</script>
The beautiful views out of the window for mediterranean.