jquery入门学习笔记

还是先来个例子:

<div id="div1" class="box">div</div>

<ul>
<li></li>
<li></li>
<li></li>
<li class="boxs"></li>
<li title="hello"></li>
</ul>

<script>
//JQ中选择元素
//$('#div1').css('background','red');id选择法,后面呢是改变CSS的样式;
//$('.box').css('background','red');class选择法
//$('div').css('background','red');类别选择法
$('li:eq(2)').css('background','red'); //第三个li都变红,eq就是相当于下表,类似数组的下标,从0开始;
//$('li:odd').css('background','red');偶数行变红
$('li').filter('[title=hello]').css('background','red');//filter是过滤的意思,就是这个元素带title=hello的背景颜色为红色
$('li').filter('.box').css('background','red');
</script>

以上就是jquery选中元素的方法;

juery是js的库:

JS:window.onload=function(){}
JQ:$(function(){})
function $(){}

JS:innerHTML=123
JQ;html(123)
function html()

JS:onclick=function(){}
JQ:click(function(){})
function click(){}

常用的几种,其他的还没学;

取值赋值:

$(function(){
$("div").html("hello"); //赋值
alert($("div").html()); //取值
$("div").css("width","200px");//赋值 若是一组元素,则全部赋值
alert($("div").css("width"))//取值,若是一组元素,只取到第一组
});

其他常用的属性方法

attr:att是操作属性的,例如

<body>
<div title="123">div</div>
</body>
<script>
$(function(){
$('div').attr("title","124")
alert($('div').attr('title'))
})</script>

filter  not  has:

<body>
<div class="box"> div1<span>span</span></div>
<div> div2</div>
</body>
<script>
$(function(){
//filter 过滤 针对元素本身
//not filter的反义词 针对元素
//has用于包含,看元素里面的东西是否包含要包含的条件
$('div').filter('.box').css('background','red')//选择带box的
//$('div').not('.box').css('backgrount','red')//选择不带box的
//$('div').has('span').css("background",'red')//选择包含span标签的

})
</script>

next,prev,find

<script>
$(function(){
//next:指向下一个兄弟节点
//prev:指向上一个兄弟节点
//find:查找
//eq:相当于下标
$("div").next().css("background","red")
$("div").find('h2').eq(1).css("background","yellow")

})</script>
<body>
<div>div
<h3>h3</h3>
<h2>h2</h2>
<h2>h2</h2>
<h3>h3</h3>
</div>
<span>span</span>
<p>p</p>
</body>

index

<script>
$(function(){
//index:在当前元素的兄弟元素中的位置,从0开始
alert($("#h").index())

})
</script>
<body>
<div>
<h3>h3</h3>
<h2>h2</h2>
<h2>h2</h2>
<h2>h2</h2>
<h3 id="h">h3</h3>
<h3>h3</h3>
<h3>h3</h3>
</div>
</body>

上一篇:将Unity3D游戏移植到Android平台上


下一篇:Lvs+Keepalived+MySQL Cluster架设高可用负载均衡Mysql集群