JQuery 第四章 Jquery选择器

最新推荐文章于 2021-02-26 16:34:31 发布
最新推荐文章于 2021-02-26 16:34:31 发布
阅读量735 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36074043/article/details/70738391
版权 
<!DOCTYPE html>
<html>
  <head>
    <title>sj1.html</title>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
$(document).ready(function(){
$("html body p a").click(function(){

$(".txt_box .current").css("background-color","#6FF");
$("p>span").css("background-color","#F9F");
$("h1+p").css("background-color","#F06");

$("strong~span").css("background-color","#00C");
});

});

</script>
  </head>
  
  <body>
   <h1>英雄联盟</h1>
   <p>
   英雄联盟，简称LOL。
   </p>
   <p>由<strong>Riot Games</strong>开发，为3D竞技场战游戏，其<span>主创团队由实力强劲的 <strong>魔兽争霸</strong>系列游戏多人即时对战自定义地图开发团队</span> ...
   <a href="#">更多详情</a>
   </p>
   <h2>目录
   </h2>
   <ul class="txt_box">
   <li class="current">开发团队</li>
   <li>游戏周边</li>
   <li>游戏介绍</li>
   <li>配置需求</li>
   <li>游戏背景</li>
   </ul>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <title>sj2.html</title>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript">
   $(document).ready(function(){
   $("html body .main .right .dy").click(function(){
   $("html body .main .right .dy~span").css("font-weight","bold");
   
    });
     $("html body .main .right dl dt").click(function(){
     $("html body .main .right dl strong").css("color","#FF0099");
         });
         
         $("html body .main .right #bq").click(function(){
     $("html body .main .right dl p #bq~span>a:even").css("background-color","#E0F8EA").css("color","#10A14B").css("padding","2px");
         });
         $("img[alt=收藏本片]").click(function(){
        alert("您已收藏成功");
         });
         
   });
   </script>
<style type="text/css">
 .main{
	 width:500px;
	}
.left{
	width:200px;
	float:left;
}
.right{
	width:300px;
	float:left;
}
 </style>

  </head>
  
  <body>
  
 	 <div class='main' >
     	<div class='left'>
        	<img src="img/pic.gif" />
            <br/><br/><br/><br/>
            <img src="img/col.gif" alt="收藏本片"/>
        </div>
        <div class='right'>
        	<dl>
            	<dt><b>非缘勿扰</b></dt>
            	<dd>
                <p>
                	<strong>主演：</strong><span>苏有朋/秦岚/傅艺伟等</span>
                </p>
                <p>
                	<strong class='dy'>导演：</strong><span>赖水清</span>
                </p>
                <p>
                	<strong id='bq'>标签：</strong><span><a>苏有朋</a> <a> 国产电视剧</a>  <a>2013</a> <a>连续剧</a></span>
                </p>
                <p>
                	<strong>剧情：</strong><span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a></span>
                </p>
				</dd>
            </dl>
            <img src="img/btn.gif"/>
        </div>
     </div>
    

  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <title>sj3.html</title>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
  <script type="text/javascript">
	$(document).ready(function(){
		$("table tr td:last:visible").hide(); 
		$("table tr td:even").css("background-color","#FF99CC");
		$("h4 .more").click(function(){
		$(":hidden").show();
		});
		
	});

</script>
  </head>
  
  <body>
<h3>乐淘，发现更多生活，快乐就在你身边...</h3>
  <h4>近期热门......<a href='#' class='more'>（更多）</a></h4>
   <table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>语言之庭</td>
  </tr>
  <tr>
    <td>斯托克</td>
  </tr>
  <tr>
    <td>迷醉</td>
  </tr>
  <tr>
    <td>巨人携手皆可</td>
  </tr>
  <tr>
    <td>副作用</td>
  </tr>
  <tr>
    <td>血肉之躯</td>
  </tr>
  <tr>
    <td>7号房的礼物</td>
  </tr>
  <tr>
    <td>惊声笑</td>
  </tr>
</table>
<a href='#' class='more'>更多排名</a>
    

  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <title>kh5.html</title>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
<script type="text/javascript">
$(document).ready(function(){
$("img[alt=hh]:visible").hide();
$("img[alt=好片子]").click(function(){
$("img[alt=hh]:hidden").show();
});
$("img[alt=hh]").click(function(){
$("img[alt=hh]:visible").hide();
});
});
</script>
  </head>
  
  <body>
   <dl>
  	<dt ><img src="img/text.gif" alt="hh" /></dt>
    <dd>分享到：<img src="img/iocns.gif"  alt="好片子" /></dd>
  </dl>
   
  </body>
</html>

_苏小白
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery第四章DOM
LW0512的博客
10-04 133
DOM 1：获取值的方法 html() text() val() 既可以获取input里面的值/也可以设置值 如果是下拉菜单 、单选、多选的情况下 val([''])方法 还可以将他们设置成默认选中 prop('checked',true) 专属input默认选中方法 实例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
第四章:JQuery选择器
weixin_30819085的博客
02-21 102
一.使用选择器的目的 从页面上的万万千千个元素中选择自己需要的。 二.选择器的分类 1.基本选择器 *:标签 *:类 *:ID 交集 AB AB共同的部分 并集 A,B AB使用相同的内容 全局 * 锁定所有的元素 2.层次选择器 后代选择器 A B 子选择器 ...
JQuery选择器大全
weixin_30369087的博客
01-12 119
jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组 $(".myClass") 选择使用myClass类的c...
jQuery第四章
weixin_34110749的博客
01-27 107
jQuery中的事件和动画 一、jQuery中的事件 1.加载DOM （1）执行时机 $(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。window.onload方法是在网页中所有元素完全加载到浏览器后才执行，而$(document).ready()是在DOM完全就绪时就可以被调用。另外需要注意的是，假设...
jquery 第四章
weixin_30871701的博客
03-13 104
1.回顾 　　节点.append(内容) 　　节点.prepend(内容) 　　节点.remove() 　　节点.attr("属性","值") 　　节点.css("样式","值") 　　节点.html() .text .val() 2.本章目标 　　掌握jquery 的事件与动画 3.事件 　　在某个特定的条件下会被执行的一段代码,事件通常用来与用户进行交互 　　常用的事件:...
jQuery 3.1 标准课程第二章 选择器基本筛选选择
10-31
jQuery 3.1 标准课程第二章 选择器基本筛选选择器(四)
JQuery选择器、过滤器大整理
10-24
主要介绍了JQuery选择器、过滤器大整理,经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了,需要的朋友可以参考下
jQuery 3.1 标准课程第二章 选择器子元素选择器(
10-31
jQuery 3.1 标准课程第二章 选择器子元素选择器(四)
jquery 中多条件选择器,相对选择器,层次选择器的区别
01-21
一、Jquery常用的过滤选择器如下所示： 1、:first，选取第一个元素，比如$(“div:first”)选取第一个div元素 2、:last，选取最后一个元素，比如$(“div:last”)选取最后一个div元素 3、:not(选择器)，选取不满足...
4.[jQuery]第3章.常规选择器[1].rar
02-23
[jQuery]第3章.常规选择器[1].rar,对于初学JQUERY的人员很有帮助,一共分为三个部分
JQuery选择器
thamsyangsw的专栏
12-09 802
基本选择器：$("#myELement")    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div")                     选择所有的div标签元素，返回div元素数组$(".myClass")           选择使用myClass类的css的所有元素$("*")     
第4章 知识点
华少的博客
07-17 163
JavaScript中的基本数据类型 number(数值类型) string(字符串类型) boolean(布尔类型) null(空类型) undefined(未定义类型) object 什么是面向对象 面向对象仅仅是一个概念或者编程思想 通过一种叫做原型的方式来实现面向对象编程 对象是包含相关属性和方法的集合体 属性 方法 常见的内置对象 String（字符串）对象 Date（日期）对象 ...
jQuery第四章jQuery与DOM
l_jia_ming的博客
12-02 197
jQuery学习笔记
jquery 第四章 事件
Stay hungry, stay foolish
08-07 643
1、浏览器对事件的发生有两个阶段，一个是捕获，一个是冒泡，一般浏览器对事件的触发都是冒泡，即按顺序进行执行。而往往我们会阻止这样的顺序，因为只要到了一个元素就会被执行一遍事件，用event.stopPropagation()可以阻止事情的发生。  2、trigger() 自动触发事件 3、bind（） 4、toggle(fun1,fun2,fun3，……)按顺序执行函数，这里实现图片切换的一
Jquery 选择器
飞奔的小强
05-15 670
jQuery 选择器简介 　　　　  jQuery 选择器允许对 HTML 元素组或单个元素进行操作。 　　　　jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 　　　　jQuery 中所有选择器都以美元符号开头：$()。 1 .基本选择器   　　　　$("#te...
【第三章】jQuery选择器的使用4
qq_45095748的博客
10-27 307
【综合实例】隔行换色鼠标指向表格换行 本实例的需求主要有以下两点: (1)在页面中创建一个表格,令表格奇数行显示黄色,偶数行显示浅蓝色; (2)当鼠标指向某一行时,该行颜色随之改变。 table{ border: 0; border-collapse: collapse;/* 设置表格整体样式 */ } td{ font:normal 12px/17...
jQuery中的选择器
xin_xun_的博客
03-05 402
CSS选择符： l  $('#selected-plays > li').addClass('horizontal'); 子元素组合符（>）将horizontal类添加到ID为selected-plays的元素（#selected-plays）的子元素（>）中的所有的列表项（li）。注意这里使用子元素选择符选择的只是ID为selected-plays的元素的直接子元素，不包括更深层的子元素。
jQuery选择器
qq_37171379的博客
04-07 244
在页面上获得各种元素节点对象而使用的条件就是选择器。 document.getElementById() document.getElementsByTagName(); document.getElementsByName(); 1.基本选择器 $(‘#id属性值’) ----------->document.getElementById() $(‘tag标签名称’)----------...
【jQuery】 # jQuery选择器
LRcoding
02-26 2548
一、基本选择器 1.元素选择器 选择所有的 <p>元素 $("p") 2. ID选择器 选择 id 为demo的元素 $("#demo") 3. class类选择器 选择所有class为 test的元素 $(".test") 二、实例 1.查找 ID以 demo_ 开头的div $("div[id^='demo_']") 2.查找 ID以 6结尾的div $("div[id$='6']") 3.选取当前HTML元素 ...
jquery 选择器
最新发布
11-21
以下是一些常见的jQuery选择器： 1. 根据元素类型选择：$("p") 选取所有 <p> 元素。 2. 根据元素ID选择：$("#id") 选取 ID 为 "id" 的元素。 3. 根据元素类选择：$(".class") 选取所有 class 为 "class" 的元素。 4....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值