JQuery CSS样式控制学习笔记

jQuery就不多说了，这是射流研究…的一个函数库，比较常用，我们今天是就jQuery的三种用于钢性铸铁的操作进行总结$(选择器)。css('name '，' value') $(选择器)。css({properties}) $(选择器)。css(名称)$(选择器)。css(“”名称','值)为所有元素给定半铸钢钢性铸铁(铸造半钢)属性设置值：下面看我刚写的代码复制代码代码如下： htmlhead脚本类型=' text/JavaScript ' src=' http :http://Ajax。微软。com/Ajax/jquery/jquery-1.4。量滴js /脚本脚本类型=' text/JavaScript ' var jq=jquery。no conflict()；jq(文档)。ready(function(){ jq(' red ')).单击(function(){ jq('p ').css(“”背景色','红色');});jq(“# white”).单击(function(){ jq('p ').css(“”背景色','白色');});});/流浆池p当你点击下面的按钮时背景将变成红色/p按钮id='红色'类型='按钮'红色/button button id=' white ' type=' button '白色/按钮/正文/html函数CSS({ 0属性})同时为所有匹配的元素的一系列钢性铸铁属性设置值：来一段代码大家就明白了复制代码代码如下：脚本类型=' text/JavaScript ' var jq=jquery。no conflict()；jq(文档)。就绪(函数{ jq('#font_red ').单击(function(){ jq('p.info ').css({ '背景色' : '红色，' font-size '=' 200% ' })；});});/script对应的超文本标记语言我们可以写成p class='info '这段文字的背景变成红色的时候，大小也会变大两倍/p按钮id='font_red' type='button '点击这/按钮看一下效果

我们看看最后一个css(名称)这个用到地方比较少看看实例$(这个)。css(“”背景色');实际就是返回'姓名'的属性值，基本用到地方比较少就不详细解释了jQuery大小是要单独列出来的尺寸有两种参数：$(选择器)。高度（值)和$(选择器)。宽度（值)两者用法一样，下面就列出一个实例：复制代码代码如下： htmlhead脚本类型=' text/JavaScript ' src=' http :http://Ajax。微软。com/Ajax/jquery/jquery-1.4。量滴js ' var jq=jquery。noconfiglict()；jq(文档)。ready(function(){ jq('#font ')).单击(function(){ jq ').font _ s ').高度(' 200像素')；jq ' .font _ s ').宽度(' 20px ')；});});/script /headbody p class='font_s '这个p标签框的高度会变大到200像素，同时宽度变成20px/p按钮id='font' type='button '点击这里将发生变化/按钮/正文/html以下是补充测试代码如下复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title无标题文档/title style type=' text/CSS '。test 1 { color : # 0c 9；} .测试2 {颜色：红色；}/style脚本src=' http : js/jquery-1。3 .2 .js '/script脚本类型=' text/JavaScript ' $(function(){ var count=2；$('#aAdd ').单击(函数(){ $('#testDIV ')).添加CLaSS(“测试1”)；}) $('#aRemove ').单击(函数(){ $('#testDIV ')).移除CLaSS(' test1 ')；}) $('#aToggle1 ').单击(函数(){ $('#testDIV ')).切换类(' test2 ')；}) $('#aToggle2 ').单击(函数(){ $('#testDIV ')).toggleClass('test2 '，计数% 3==0);}) $('#aCSS1 ').单击(函数(){ $('#testDIV ')).css({background:'red'}).css('color '，' white ')；})})/脚本/头体div id='testDIV '我会变颜色哦/div a href='#' id='aAdd '添样式/a a href='#' id='aRemove '去除样式/a a href='#' id='aToggle1 '变样式/a a href='#' id='aToggle2 '多点几下变样式/a a href='#' id='aCSS1 '变色/a /body /html1.addClass(类)描述：为选择的元素集合添加指定样式2.removeClass([class])描述：为选择的元素集合删除指定样式3.toggleClass(类)描述：替换选择的元素集合样式。备注下，如果当前元素的样子已经为班级时，将会去除该样式，相当于addClass与removeClass的结合方法4.toggleClass(类，开关)描述：与上一个方法类似，区别就是多加了个转换判断，当转换值为真实的时，对进行样式的改变5.css(styleName，value)/CSS(style name)/CSS({ value })描述：css(样式名，值)用于设置当前元素的styleName样式属性值为值，css(样式名)用于获取当前元素的styleName样式属性值，而css({value})而为另一种设置样式属性值的方法，具体用法参考例子，因为跟元素。属性的用法类似所以在这就不详细说明了