关闭

Jquery基本操作

标签: jqueryjquery基本操作jquery基本函数
66人阅读 评论(0) 收藏 举报
分类:
 基本选择器:
#id选择器:
$("#test").val() 选取所有id为test的元素

.class选择器:
$(".test").val() 选取class为test的元素

element 选择器(遍历html元素)
将P元素的文字大小设置为12px
$(document).ready(function(){
$('p').css('font-size','12px')
})

*选择器(遍历所有元素)
遍历from下的所有元素,并将字体颜色设置为红色
$('from *').css('color','#FF0000');

并列选择器
将P元素和DIV元素的margin设置为0
$(document).ready(function(){
$('p,div').css('margin','0')
})
或者:
$(document).ready(function(){
$('#.nihao').hover(function(){
$(this).addClass("")
},function(){
$(this).removeClass("")
});
});
层次选择器:
-------parent>child(直系子元素)
$(document).ready(function(){
        $('div>span').css('color','#FF0000'); 选取div下的第一代span元素,并将字体改变为red
});
举例:
如上所述,在下面的代码中,只有第一个span会变红色,第二个span因为不属于div的第一代span子元素,所以color不变 
<div>
<span>123</span>
<p>
    <span>456<span>
</p>
</div>

-------prev+next(下一个兄弟元素,等同于next()方法)
$(document).ready(function(){
$('.item+div').css('color','#FF0000') 选取class为item的下一个div兄弟元素
等价于:
$('.item').next('div').css('color','#FF0000');
})
举例:
下面代码中,只有123和789以及000会变色
<p class = "item"></p>
<div>123</div>
<div>456</div>
<span class = "item"></span>
<div>789</div> 
<div>000</div>
<span class ='item'></span>
<div>222</div>

-------prev~siblings(prev元素的所有兄弟元素,等同于nextAll()方法)
$(document).ready(function(){
$('.inside~div').css('color','#FF0000');    选取class为inside之后的所有div兄弟元素
等价于:
$('.inside').nextAll('div').css('color','#FF0000');
})
列:下面代码中G2和G4会变色
<div class ="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</span>

过滤选择器:
1>.基本过滤选择器
    1-1>.:first和:last  (取第一个元素或最后一个元素)
$(document).ready(function(){
$('span:first').css('color','#FF0000');
$('span:last').css('color','#FF0000');
})
列:下面代码中G1(first元素)&G3(last元素)会变色 
 <span>G1</span>
<span>G2</span>
 <span>G3</span>

1.2>. :not (取非元素)
$(document).ready(function(){
    $('div:not(.wrap)').css('color','#FF0000');
        });
列:下面代码,G1会变色
<div>G1</div>
<div class = 'wrap'>G2</div>
        但是:
<div>
G1
<div class ="wrap">G2</div>
        </div>
当G1所在的div 和G2所在的div是父子关系时,G1和G2都会变色
1.3>. :even 和:odd(取偶数索引或奇数索引元素是,索引从0开始,even表示偶数,odd表示奇数)
                 $(document).ready(function(){
         $('tr:even').css('background','#EEE'); 偶数行颜色
$('tr:odd').css('background','#DADADA'); 奇数行颜色
});
        列:A,C行颜色:#EEE(第一行索引为0),B,D行颜色为#DADADA
<table width ='200' cellpadding = "0" cellspacing ="0">
         <tbody>
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
</tr>
</tbody>
<table>
1.4>. :eq(x) (取制定索引的元素)
    列:更改第三行的背景色
$(document).ready(function(){
    $("tr:eq(2)").css('background','#FF0000');
})

1.5>. :gt(x) 和 :lt(x) (去大于X索引或小于X索引的元素)
列:L4和L5是红色的,L1和L2是蓝色的,L3是默认颜色
$(document)`.ready(function(){
    $("ul li:gt(2)").css("color","#FF0000");
    $("ul li:lt(2)").css("color","#0000FF");
});
<ul>
    <li>L1</li>
    <li>L2</li>
    <li>L3</li>
    <li>L4</li>
    <li>L5</li>
</ul>

1.6>.  :header (取H1~H6标题元素)
列:
$(document).ready(function(){
$(":header").css("background","#EFEFEF")
});
下面代码中,H1~H6的背景色都会变
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h1>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

2>.内容过滤选择器:
2.1>. :contains(text) (选取包含text文本的元素)
$(document) .ready(function(){
$("dd:contains('jQuery')").css("color","#FF0000")  dd元素中包含jQuery的文本会变色
});
列:下面的代码中,第一个dd会变色
<dl>
<dt>技术</dt>
<dd>jQuery,.NET.CLR</dd>
<dt>SEO</dt>
<dd>关键字</dd>
<dt>其他</dt>
</dl>
2.2>. :empty   (选取不包含子元素或文本为空的元素)
$(document).ready(function(){
$('dd:empty').html('没有内容');
})
上面那个列子中第三个dd会显示“没有内容”文本
2.3>.:has(selector) (取选择器匹配的元素)
$(document).ready(function(){
$("div:has(span)").css('border','1px solid #000'); 
})
为包含span元素的div添加边框,即使span不是div的直系子元素,也会生效
<div>
<h2>
A
<span>B</span>
</h2>
</div>

2.4>.  :parent (去包含子元素或文本的元素)
$(document).ready(function(){
$('ol li:parent').css('border','1px solid #000');
});
下面代码中,A和D所在的li会有边框
<ol>
<li></li>
<li>A</li>
<li></li>
<li>D</li>
</ol>

hide()用法:
瞬间隐藏:
$("#ids").hide();
给隐藏时间,在2000毫秒(2秒)内隐藏
$("#ids").hide(2000)
隐藏完成后执行回调函数:
$("#ids").hide(2000,function(){
alert("我隐藏好了")
});
one用法:
用于创建一次性事件,一旦这个事件执行一次之后,就会被自动删除
$("#ids").one("click",function(){
alert("我是一次性事件");
})

click点击事件改变div css属性
$("#buttons").click(function(){
$("divs").css("color","green")
})



节点:
创建并追加节点:
var $var_1 =$("<li title ='title'>香蕉</li>"); 创建一个节点
$("ui").append($var_1)将var_1节点插入到htmltype2节点中
删除节点:
remove() 删除该元素 $("ul li:eq[1]").remove();   获取UL中的第二个li并删除
empty() 清空节点,包括后代节点 $("ul li").remove("li[title='菠萝']") 删除ul中li中元素属性title = "菠萝"的元素
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4405次
    • 积分:315
    • 等级:
    • 排名:千里之外
    • 原创:24篇
    • 转载:2篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论