jQuery基础—3、控制DIV的选取

最新推荐文章于 2021-11-28 10:01:50 发布
最新推荐文章于 2021-11-28 10:01:50 发布
阅读量225 收藏
点赞数
分类专栏： Java 文章标签： jQuery基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42308454/article/details/82840452
版权

下面讲一个DIV选取的案例，鼠标移到DIV上是一个颜色，移出去变一个颜色

我们先创建四个div
在这里插入图片描述
添加css样式
在这里插入图片描述
其中^=”div”表示选取以div开头的对象，$=则表示以相同字符结尾的。将四个div排列在一排，用float：left属性

看一下什么效果
在这里插入图片描述
使用mouseover（鼠标移到上面触发事件），使div变为红色
在这里插入图片描述
使用mouseout，鼠标一开始div恢复颜色
在这里插入图片描述
使用hover可以包含鼠标移进和移开两个函数，其中$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( e ) 等 于 (document).ready(function(e)等于 (document).ready(function(e)等于(function())，我们也要知道这一种写法
在这里插入图片描述
静态效果

在这里插入图片描述

欢迎进群交流258897306或关注公众号“IT群英汇”

cross over
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery控制DIV的选取实现方法
10-21
下面小编就为大家带来一篇JQuery控制DIV的选取实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery 选择器全部详细笔记
业精于勤，荒于嬉
04-23 1926
1. jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom...2. 提供方法、events、选择器，并且方便地为网站提供 AJAX 交互3. 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.4. jQuery 实现了浏览器的兼容问题1. jQuery 对象就是对 DOM 对象进行包装后产生的对象比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。
实现div选中效果
stefanie_sun723的博客
09-14 4432
1.被点击时的效果可以用div:active{ css } 2.鼠标覆盖在上面的时候可以用div：hover{ css;} 3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下： a.先给div添加一个选中的样式比如on{css}； b.然后在js中$(‘div’).click(function{ $(‘div’).toggleClass(’ ',‘on’); }) 这是jquery自带的一个方法，点击div切换2个class, ...
jQuery选择器
weixin_58562753的博客
11-28 1780
jQuery选择器
jQuery 选择器大全总结
weixin_34279061的博客
10-20 103
jQuery基础语法中规定的选择器有三种，分别是类选择器、ID选择器、标签选择器。如：$(“.aa”)、$(“#id”)、$(“div”)，但中实际的应用中，DOM机构非常复杂，层级非常多。如和应对这种复杂的场景呢？没关系，前端开发网给各位小伙伴们总结了复杂结构DOM的查找使用。如下：基础选择器$(“#myELement”) 选择id值等于myElement的元素，id值不能重复在文档中只能有一个...
JQuery控制DIV的选取
不是秃头的程序员小李
03-17 598
我们设置4个div 当鼠标移动到某一个div上面的时候 背景颜色就会发生变化 那我们应该知道要用到mouseover() 和 mouseout() 前一个是移动到某个位置 后面是移开某个位置 还有一个hover(,) 可以替代上面两个方法 1.用mouseover()和mouseout() $(function(){ $("div[id^='div']").mouseover
jQuery为某个div加入行样式
01-19
()事实上就是一个方法，里面能够传递匿名函数等，选取某个div时，如id为div1则用$(‘#div1’)。记得加#号，这里跟我们写css样式时加的#号是相同的道理。 样例例如以下： <!DOCTYPE ...
Jquery 整理元素选取、常用方法一览表
01-19
Jquery元素选取、常用方法 一：常用的选择器： 基本选择器 $(”#myDiv”) //匹配唯一的具有此id值的元素 $(”div”) //匹配指定名称的所有元素 $(”.myClass”) //匹配具有此class样式值的所有元素 $(”*”) //匹配...
jQuery选择器基础入门教程
11-23
本文实例讲述了jQuery选择器用法。分享给大家供大家参考，具体如下： 什么是jQuery选择器 使用JavaScript操作页面上得DOM元素时，首先要获取...上例中使用了id选择器，选取id为testDiv的DOM对象并将它放入jQuery对象，
jquery实现下拉框选中对应的div
a754315344的博客
12-26 668
这是一个很简单的功能，jquery实现下拉框选中对应的div。 虽然简单但是会在项目之中经常会用到，尤其是统计的时候，按照不同类型或者不同的年月日来选择相对应的内容。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery实现下拉框选中对应...
JavaScript和JQuery获取DIV的值
jrrfgj的博客
11-15 2448
JavaScript和JQuery获取DIV的值
jQuery选择器之层级选择器
ljp1919的专栏
03-24 7587
背景：我们可以把文档中的所有的节点节点之间的关系，用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。 >（大于号）紧跟父子关系 如$("div > p")表示选择div下的直接层是p的节点。 +（加号） 紧跟兄弟关系 如$("div + p")表示选择div同层的左右相邻的p节点。 ~ （波浪线）任意距离兄弟关系 如$("div + p")
jquery如何选中除自己外的同类div
我用键盘敲出一个世界
12-20 4857
jquery如何选中除自己外的同类div，不一定是div也可以是其他元素，在我们制作网页当中常常遇到这种情况，你要是radio这样的还好说，你可以用name值把他们组成一个数组，这样实现了单选效果，但是其他标签用起来不一定行，我们可以尝试以下代码实现找到除了自己之外的标签。$(function(){ $(".a").click(function(){ //这个dd就是除点击对
jquery获取当前点击的div的内容
如果没有_明天
02-06 9458
$('div').click(function(e){ alert($(this).attr('id')); //alert($(e.target).attr('id')); });
jquery选择器大全
athrenzala的专栏
08-13 369
一、基本选择器 1. id选择器（指定id元素） 将id="one"的元素背景色设置为黑色。（id选择器返单个元素） $(document).ready(function () { $('#one').css('background', '#000'); }); 2. class选择器（遍历css类元素） 将class="cube"的元素背景色设为
jQuery实现div单选与多选
qq_37017864的博客
04-12 4388
jQuery实现div单选与多选一、单选1、思想：先监听所有的div，点击某个div触发事件。如果被点击的div的border是红色，则remove；否则被点击的div的border不是红色，则遍历所有的div，去掉所有的div的红色border，点击了某个div，再给某个加上border。2、js代码js代码如下：$(".container").on("click",this,function (
用js给div绑定事件，实现点击切换效果的几种方式总结
热门推荐
Walden_tinghou的专栏
05-18 1万+
用js给div绑定事件，实现点击切换效果，总结有如下几种方式 script type="text/javascript"> function btnAction() { var titleNValue = document.getElementById("titleN").value; var complaintValue = document.getElem
Jquery选中效果
leejianjun的博客
10-16 2634
HTML页面 ... ... JS部分 $(document).ready(function() { //点击特效 $('li[id^=paytype_]').click(function(){ //alert($(this).attr('id')); $('li[id^=paytype_]').
jQuery库中的类型为div的元素
最新发布
05-25
在jQuery中，可以使用以下代码来选取类型为div的元素： ``` $('div') ``` 这将返回文档中所有的div元素。你还可以通过添加其他选择器来进一步筛选元素，例如： ``` $('.my-class div') // 选取class为my-class的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值