jquery选择器实例

最新推荐文章于 2020-11-30 22:35:24 发布
最新推荐文章于 2020-11-30 22:35:24 发布
阅读量353 收藏
点赞数 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title>
<script src="jquery/jquery-1.8.2.min.js"></script>
<style>
div,span,p{
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
    border:solid 1px #000;
    float:left;
    font-family:Verdana;
    font-size:12px;
}

div.mini{
    width:55px;
    height:55px;
    background-color:#aaa;
    font-size:12px;
}

div.hide{
    display:none;
}

#mover{
  position:absolute;
  -webkit-animation:my 10s infinite;  
}

@-webkit-keyframes my{
    0%{background:red;left:800px;top:10}
    20%{background:yellow;left:1000px; top:10px;}
    60%{background:green;left:1000px; top:200px;}
    80%{background:black;left:800px; top:200px;}
    100%{background:red;left:800px;top:10px}
}

</style>
<script>
$(document).ready(function(){
    //alert('1');
    /*基本选择器*/
    //$('#one').css('background','#bbffaa');
    //$('.mini').css('background','#bbffaa');
    //$('div').css('background','#bbffaa');
    //$('*').css('background','#bbffaa');
    //$('span,#two').css('background','#bbffaa');
    /*层次选择器*/
    //$('body div').css('background','#bbffaa');
    //$('body > div').css('background','#bbffaa');          //改变<body>内子<div>元素的背景颜色
    //$('.one + div').css('background','#bbffaa');   // <==> $('.one').next('div');       //改变class为one的下一个<div>同辈元素的背景颜色
    //$('#two ~ div').css('background','#bbffaa');   // <==> $('.one').nextAll('div');       //改变id为two的元素后面的所有<div>同辈元素的背景颜色
    /*过滤选择器*/
        //基本过滤选择器
    //$('div:first').css('background','#bbffaa');
    //$('div:last').css('background','#bbffaa');
    //$('div:not(.one)').css('background','#bbffaa');       //改变class为one的div元素的背景颜色
    //$('div:even').css('background','#bbffaa');            //改变索引值为偶数的<div>元素的背景颜色
    //$('div:odd').css('background','#bbffaa');             //...奇数...
    //$('div:eq(3)').css('background','#bbffaa');           //改变索引值等于3的<div>元素的背景颜色
    //$('div:gt(3)').css('background','#bbffaa');           //改变索引值大于3的<div>元素的背景颜色
    //$('div:lt(3)').css('background','#bbffaa');           //改变索引值小于3的<div>元素的背景颜色
    //$(':header').css('background','#bbffaa');             //改变所有的标题元素的背景颜色（<h1>,<h2>...）
    /*$(':animated').css('display','none');                 //改变当前正在执行动画的元素的背景颜色*/  //不可执行
    /*$(':focus').css('display','none');                    //改变当前获取焦点的元素的背景颜色*/  //不可执行
    /*内容过滤选择器*/
    //$('div:contains(di)').css('background','#bbffaa');    //改变含有文本“di”的<div>元素的背景颜色       //改变 的<div>元素的背景颜色
    //$('div:empty').css('background','#bbffaa');           //改变不包含任何元素的<div>元素的背景颜色
    //$('div:has('.mini')').css('background','#bbffaa');    //改变含有class为mini元素的<div>元素的背景颜色
    //$('div:parent').css('background','#bbffaa');          //改变含有子元素元素的<div>元素的背景颜色
    /*可见性过滤选择器*/
    //$('div:hidden').show(3000);
    /*属性过滤选择器*/
    //$('div[title]').css('background','#bbffaa');          //改变含有属性title的<div>元素的背景颜色
    //$('div[title=text]').css('background','#bbffaa');     //改变含有属性title等于“text”的<div>元素的背景颜色
    //$('div[title!=text]').css('background','#bbffaa');    //改变含有属性title不等于“text”的<div>元素的背景颜色
    //$('div[title^=te]').css('background','#bbffaa');      //改变含有属性title的值以“te”开始的<div>元素的背景颜色
    //$('div[title$=est]').css('background','#bbffaa');     //改变含有属性title的值以“est”结束的<div>元素的背景颜色
    //$('div[title*=es]').css('background','#bbffaa');      //改变属性title值含有“es”的<div>元素的背景颜色
    //$('div[id][title*=es]').css('background','#bbffaa');  //改变含有属性id,并且属性title含有“es”的<div>元素的背景颜色
    /*子元素过滤选择器*/
    //$('div.one :only-child').css('background','#bbffaa'); //如果class为one的<div>父元素下只有一个子元素，那么则改变这个子元素的背景颜色 
});
</script>
</head>
<body>
<div class="one" id="one">
    id=one,class=one的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" title="test">
    id为two，class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="other">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one" style="display:none">
    style的display为none的div
</div>
<div class="hide">class为"hide"的div</div>
<div>
    包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素</span>
</body>
</html>


效果图：


elegancy_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页开发（十一）JQuery-选择器和菜单案例
m0_72463224的博客
09-03 341
进入Jquery
jQuery选择器实例应用
10-20
主要为大家详细介绍了jQuery选择器实例应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
50 个jQuery 实例（包含各种常用网页效果）
07-28
50 个jQuery 实例，包含各种常用网页效果：选项卡切换，手风琴效果，相片画廊，验证规则，表格等。
jquery选择器案例
weixin_33722405的博客
04-27 135
一、预期效果 实现一个效果，如下。  品牌列表默认精简显示，单击“显示全部品牌”按钮显示全部品牌，同时列表将推荐的品牌的名字高亮显示，按钮里的文字变成“精简显示品牌”。再次点击“精简显示品牌”回到初始页面。 二、实现过程 html结构如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt...
jQuery选择器
ssisse的博客
04-23 374
本文转自慕课网 jQuery层级选择器 文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。 选择器中的层级选择器就是用来处理这种关系 子元素 后代元素 兄弟元素 相邻元素 通过一个列表，对比层级选择器的区别  仔细观察层级选
jQuery find选择器
axl---专心专注于web前端开发
10-08 229
jQuery有非常强大的Sizzle引擎来实现选择器，jQuery做了优化，他们能很好的工作，你一般不必担心太多。然而，我们可以稍微做一些改进，将可以使你的脚本略有提高。 一般在jquery中能不要用Sizzle引擎就不要用，当然前面说了只要有可能，就尽量使用.find()方法。比如： $('#someDiv p.someClass').hide(); $('#someDiv').fin...
jQuery基本筛选选择器实例代码
10-20
主要为大家详细介绍了jQuery基本筛选选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery 选择器实例集锦及说明
05-12
内容索引:脚本资源,jQuery,jQuery选择器　1.基本选择器(3种): 　$("标签名"),如$("p")是选取了所有的p标签节点 　$("#id名"),如$("#test")是选取了id为test的标签节点 　$(".class名"),如$(".test")是选取了所有...
jQuery分组选择器用法实例
10-25
主要介绍了jQuery分组选择器用法,以实例形式分析了分组选择器的功能与具体用法技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery 选择器项目实例分析及实现代码
12-11
首先废话一句，jQuery选择器真心很强大！ 在项目中遇到这么一个问题easyui的问题  如图所示，当前页面显示的是“原始报文查询”的页面，当时左侧导航栏却选中的是“重发报文查询”。如何让右侧的菜单和左侧的导航实现联动即：左侧点击“原始报文查询”，那么右侧的“补发运抵报文”展开，并选中“原始报文查询”，“后台管理”关闭？ 实现方式如下： 1、右侧的“原始报文查询”等用到的是easyui的tabs控件，查看api知道，tabs有个onSelect方法，只要在onSelect方法中写入自己想做的事情就可以了。 2、触发事件是找到了，那么具体怎么实现想要的效果呢？ 　 左侧导航栏代码结果如上图：最
jQuery入门实操-css操作，鼠标点击事件，页面计算器
Rex__404的博客
11-30 2966
前言 本文是学习jQuery中的一些实践，是jQuery入门的实操案例。更多语法可参考w3school的jQuery参考手册 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Aj
jquery选择器
小灬毛的专栏
03-06 867
1.基本选择器 选择器 描述 返回 示例 代码说明 1 id选择器 根据指定的id匹配元素 单个元素 $("#one").css("background","#bbffaa"); 找到id为one的元素，改变其background属性
jQuery的使用
weixin_30216561的博客
09-05 233
一、基本简介 1、下载：http://jquery.com提供了最新的jQuery框架下载。通常只需下载最小的jQuery包（Minified）即可。 　　　　　（ 目前最新的版本jquery-1.3.2.min.js文件只有55.9 KB ） 2、引用：<script src="jquery.min.js" ></script> 　　将jQuery框架文件导入后，...
Jquery学习笔记
Ida825的博客
12-27 523
一、jQuery简介 随着JavaScript、CSS、Ajax等不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架）。 jQuery 是目前最受欢迎的 JavaScript 框架。它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。jQuery 同时提供 companion UI（用户界面）和插件。 许多大公
jquery针对HTML元素DOM操作总结
LoveyourselfJiuhao的博客
08-22 228
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
jQuery选择器和对DOM的操作
来日可期的博客
06-01 381
一、jQuery选择器 1.基本选择器 元素选择器，语法$("html标签名")，例：查找所有div下span元素的个数 $("div,span").size(); id选择器，语法 $("#id的属性值")，例：查找Id为"div1"的元素个数 $("#div1").size(); 类选择器，语法 $(".class的属性值")，例：查找所有样式是"class1"的元素的个数 $("...
jquery选择器demo
weixin_34217711的博客
05-09 122
大部分选择器都是基于下面这个简单的页面： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt;
使用jquery修改div元素的背景色
weixin_45747582的博客
10-26 554
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <style> .show1{ wid...
jQuery过滤选择器实例
最新发布
06-07
好的，下面是一个 jQuery 过滤选择器的示例： 假设有一段 HTML 代码如下： ```html <li class="item">Item 1 <li class="item">Item 2 <li class="item">Item 3 <li class="item special">Special Item ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值