`
yanzilee9292
  • 浏览: 538447 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Jquery的CSS操作

阅读更多

1. 添加样式

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"red","font-size":"200%"});
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

 

 

2.改变size

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#id100").height("200px");
  });
});
</script>
</head>

<body>
<div id="id100" style="background:yellow;height:100px;width:100px">
HELLO</div>
<div id="id200" style="background:yellow;height:100px;width:100px">
W3SCHOOL</div>
<button type="button">请点击这里</button>
</body>

</html>
 
分享到:
评论

相关推荐

    第17周-第14章节-Python3.5-点赞以及jQuery css操作.avi

    第17周-第14章节-Python3.5-点赞以及jQuery css操作.avi

    jquery css3进度条加载动画特效

    jQuery的主要优点在于它提供了一种简洁的API,使得开发者可以快速地实现复杂的DOM操作和动画效果。 **CSS3**: CSS3是层叠样式表的最新版本,引入了许多新特性,如选择器、边框、背景、文本、阴影、过渡、动画等。...

    jquery css3曲线特效图.zip

    【jQuery CSS3曲线特效图】是一种利用jQuery库和CSS3技术构建的动态、交互式的曲线图形插件。这个插件允许开发者在网页中创建出视觉吸引力强、响应式的曲线效果,提升用户界面的互动性和美观度。以下是关于这个主题...

    jQuery css3打开遮罩图片形状过渡动画效果

    首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和Ajax交互。通过使用jQuery,开发者可以快速地实现复杂的页面交互,而无需编写大量繁琐的JavaScript代码。 CSS3则是CSS(层叠样式...

    jQuery CSS3导航菜单下划线动画特效

    首先,jQuery是一种轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。在本实例中,jQuery被用来响应用户的鼠标点击事件,触发下划线的动画效果。 CSS3则是层叠样式表的最新版本...

    jquery css 加载插件

    首先,jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。jQuery的核心特性是其简洁的API,这使得开发者能够更高效地编写代码,实现复杂的交互效果。 加载(loading)插件是...

    jquery css3仿游戏网站环形菜单代码.rar

    这个环形菜单利用了jQuery的强大功能和CSS3的现代特性,实现了一个可旋转弹出并能平滑收回的效果,同时伴有音效,使得用户操作更加生动有趣。 首先,jQuery是JavaScript的一个库,它简化了DOM操作、事件处理、动画...

    jQuery CSS3漂亮的tooptip提示框动画特效

    首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画效果。在本项目中,jQuery被用来监听用户的交互,如鼠标悬停事件,以便在适当的时候显示和隐藏提示框。 CSS3则是Web设计中的...

    jquery css3图片文字介绍鼠标滚动页面动画单页

    【标题】"jQuery CSS3图片文字介绍鼠标滚动页面动画单页"主要涉及到的是网页动态效果的实现技术,其中核心是jQuery库和CSS3这两个关键工具。这篇文章或教程可能旨在教授如何利用这两种技术来创建一个富有视觉吸引力...

    jQuery+css 流程图插件

    **jQuery+CSS流程图插件详解** 在网页开发中,流程图是一种常见且重要的可视化工具,用于展示逻辑步骤或工作流程。"jQuery+css 实现的单分支流程图插件"是一个利用JavaScript库jQuery和CSS样式来创建简单、动态流程...

    jQuery css3旅游网鼠标悬停图片文字动画效果

    "jQuery css3旅游网鼠标悬停图片文字动画效果"是一种常见的交互式设计,它结合了jQuery JavaScript库和CSS3的强大功能,为旅游网站的图片展示带来生动的视觉体验。这种效果在用户将鼠标光标悬停在图片上时,会触发一...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...

    jquery css3带透明背景登录注册表单代码.rar

    `jquery.js`是jQuery库,它简化了JavaScript操作DOM、处理事件和创建动画的过程。`script.js`则是应用到这个特定表单的自定义脚本,可能会包含验证用户输入、提交表单前的确认功能,以及与服务器进行交互的AJAX请求...

    jQuery官网CSS样式复刻

    首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。通过使用jQuery,开发者可以更加简洁高效地编写代码,减少跨浏览器兼容性问题。例如,jQuery的`$(selector).click...

    jquery css 跑步效果

    jQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。它的API设计友好,使得开发者能够快速地实现各种复杂的网页交互效果。 **CSS基础** CSS(Cascading Style ...

    jquery+css3控制音量调节

    首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在这个项目中,jQuery被用来响应用户的音量调节操作,例如点击音量图标或者拖动滑动条。 CSS3的滑动条动画(slider)为...

    jQuery css3猎豹浏览器宽屏banner焦点图切换代码

    jQuery 是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。在这个项目中,jQuery被用来实现焦点图的切换逻辑,如自动播放、手动切换、过渡效果等。jQuery的核心特性包括...

    jquery css3带背景透明登录注册表单提交代码

    1. **DOM操作**:jQuery提供了一套简便的API来查找、添加或修改HTML元素,如选中表单元素、修改输入框的值或显示/隐藏元素。 2. **事件处理**:通过`.on()`方法,我们可以绑定点击、提交等事件,当用户与表单交互时...

    jQuery和css3文章标题动画特效

    jQuery的核心功能包括选择器、DOM操作、事件处理、动画以及Ajax。在本案例中,jQuery用于控制动画的触发和执行。 ### 二、CSS3简介 CSS3是CSS(层叠样式表)的最新版本,引入了许多新特性,如选择器、动画和过渡。...

    jQuery css3荷塘里小鱼动画特效

    首先,jQuery是JavaScript的一个库,它的主要功能是简化DOM操作、事件处理和动画效果。在这个特效中,jQuery负责监听用户交互,如鼠标移动,然后触发相应的动画效果。例如,当用户将鼠标移到荷塘区域,jQuery可以...

Global site tag (gtag.js) - Google Analytics