Jquery基本操作

原创 2017年06月02日 12:08:30
 基本选择器:
#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 = "菠萝"的元素
版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery基本操作

jQuery基本操作1. 用jQuery操作DOM(1)修改元素属性attr() 获取设置属性值 removeAttr() 移除属性(2) 修改元素内容text() 设置或返回所选元素的文本内容 ...
  • qq_37178923
  • qq_37178923
  • 2017年12月25日 03:34
  • 47

jquery基本操作

jquery 简化了JS代码的开发量,使程序变得更加简单易懂,而且还取代了某些javascript不能完成的功能,大大增加了开发的效率。举一个简单的例子script language="javascr...
  • hsliwei
  • hsliwei
  • 2011年06月20日 14:07
  • 1122

Jquery 基本操作

Launching Code onDocument Ready Jquery Tutorials $(document).ready(functi...
  • songpengpeng20100202
  • songpengpeng20100202
  • 2011年10月26日 10:25
  • 319

jquery 基本操作

"> 获取已选中复选框值 $("#del").click(function(){ $('input[name="checkbox"]:checked').each(function(){ st...
  • liuhy_blog
  • liuhy_blog
  • 2016年09月22日 08:40
  • 144

JQuery 基本操作

Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}...
  • LuoXianXion
  • LuoXianXion
  • 2010年02月20日 13:18
  • 401

Jquery基本操作

http://www.cnblogs.com/suoning/p/5683047.html?ref=myread
  • Qmm361121781
  • Qmm361121781
  • 2016年07月26日 08:59
  • 82

JQUERY 基本操作

http://www.cnblogs.com/tylerdonet/archive/2013/03/06/2945397.html JQuery操作下拉框 转载自下面的链接...
  • legend_x
  • legend_x
  • 2013年09月30日 20:05
  • 509

jQuery 基本操作

jQuery 基本操作   jQuery 是一个轻量级的javascript类库, 只有14k(未压缩的版本有77k)   jQuery 有什么好处呢? 我想好处有以下几点: 1. 简化了...
  • Li_soso
  • Li_soso
  • 2012年11月02日 11:56
  • 1402

算法:基本/常用 概念

------------------时间复杂度------------------ 算法的基本操作重复执行的次数是模块n的某一个函数f(n),因此,算法的时间复杂度记做:T(n)=O(f(n));例...
  • houseq
  • houseq
  • 2014年07月30日 13:59
  • 870

SQL Server 2012基本操作

创建数据库 create database dbname 删除数据库 drop database dbname创建新表(主键id自增长,从1开始,每次加1) create table tablena...
  • weixin_39791302
  • weixin_39791302
  • 2017年11月26日 18:01
  • 42
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery基本操作
举报原因:
原因补充:

(最多只允许输入30个字)