jq第二天 (属性-CSS 类 ,html/文本/值 )

    addClass() 方法向被选元素添加一个或多个类。

    <script>    $(function(){        $(‘button‘).click(function(){            $(‘p‘).addClass(‘nss‘)        })    })</script><style type="text/css">    .nss{background-color: #2e6da4}</style>
    
    <p>4565665</p><p>2131334</p><button>k</button>
    
    removeClass() 方法从被选元素移除一个或多个类。
    
    <script>    $(function(){        $(‘button‘).click(function(){            $(‘p‘).removeClass(‘nss‘)        })    })</script><style type="text/css">    .nss{/style>
    
    <p class="nss">4565665</p><p>2131334</p><button>k</button>
    toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
    <script>    $(function(){        $(‘button‘).click(function(){            $(‘p‘).toggleClass(‘nss‘)        })    })</script><style type="text/css">    .nss{/style><p class="nss">4565665</p>     
    <p>2131334</p><button>k</button>
    当这个p不使用nss的时候效果为    当这个p使用nss的时候效果为    (主要是切换效果不像addclass是死的效果 )

                           

    html() 

    取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

    在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。

    
    
    <script type="text/javascript">    $(document).ready(function(){        $("button").click(function(){            $("p").html(function(n,m,l){                return "这个 p 元素的 index 是:"+n +","+m+l;            });        });    });</script>

    function(index, html)FunctionV1.4

    此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。

    <script type="text/javascript">    $(document).ready(function(){        $(".btn1").click(function(){            $("p").html("Hello <b>world!</b>");        });    });</script>

    text([val|fn])

    概述

    取得所有匹配元素的内容。

    结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

    val([val|fn|arr])

    概述

    获得匹配元素的当前值。

    在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。

    $("input:text").val("Bill Gates");

    关于jquery中html()、text()、val()的区别

    这里的读取指alert的值

    .html()用为读取和修改元素的HTML标签    对应js中的innerHTML

    .html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一个元素

    .text()用来读取或修改元素的纯文本内容  对应js中的innerText

    text()用来读取元素的纯文本内容,包括其后代元素;.text()方法不能使用在表单元素上

    .val()用来读取或修改表单元素的value值

    .val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上

    关于三者的区别

    1. .val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。

    2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

    
    
    
    
    
    
    				
    时间: 2024-10-18 06:05:54

    jq第二天 (属性-CSS 类 ,html/文本/值 )的相关文章

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条 一丶jQ操作标签内文本 html() 标签元素中的内容 /** 替换的内容可以使一个js对象,jq对象,文本 **/ /* 获取值:获取选中标签元素的所有内容 ,包括标签*/ $('ul').html() " <li>1</li> <li&g

    CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: css3 为了区分两者,明确规定伪类用一个冒号来表示,伪元素则用两个冒号来表示 :Pseudo-classes ::Pseudo-elements ②功能不一样: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果

    第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类 jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态页面.那么动态,我们基于静态的特征说,动态:刷新页面之后,还可以发生样式改变等,就为动态. 这节课我们学习的是jQuery控制css,那么css样式都被改变了,算动态么?当然算啦,刷新页面之后发生了改变,就已经不是静态了,只要是变动了,就算是啦. 我们这节课学习四个控制css的方法: addClass(

    前端-jq创建标签/添加属性/css属性

    jq创建标签 var ptag = $('<p>'); jq添加属性如href,id,class,name等 $('#content').attr('class/id/name/href', 'active') $('#id').html('标签的文本') $('#input).val('xxxxxxx') jq添加style属性即css,如width,height,text_aling $("div").css({"background-color":

    JS DOM基础 操作属性、类、CSS样式

    操作属性和类 一.属性节点操作 文本节点内容的获取和修改: 语法:elementNode.attributeName ( 元素节点.属性名)     也可以使用“[ ]” ( 元素节点[属性名]) 注意:一般我们操作属性节点时是不需要获取属性节点的,而是直接通过元素节点获取(/修改)属性节点的值.      特别的,有些属性名称与js关键字或者保留字冲突了,只能用另外的名字: class属性:要写成className(class是关键字). label标签的for属性:写成htmlFor. 通过

    CSS的color属性并非只能用于文本显示

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方. 你可以先看一下下面的演示: HTML代码 <img alt="Example alt text" width="200" height="200

    CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size).字体粗细(font-weight).字体风格(font-style).字体颜色(color). 1.字体设置(font-family) 网页中常用的字体有 宋体.微软雅黑.黑体 等,例如将网页中 所有p标签的字体设置为微软雅黑,可以使用如下CSS样式代码: p { font-family:"微软雅

    CSS背景、文本属性

    一.背景属性 1.背景颜色 background-color: red; 2.背景图片相关 1)设置背景图片:background-image : url("路径"); 设置背景图片,指定图片路径,如果路径中出现中文或空格,需要加引号 2)设置背景图片的重复方式 默认背景图片从元素的左上角显示,如果图片尺寸与元素尺寸不匹配时,会出现以下情况: 1. 如果元素尺寸大于图片尺寸,会自动重复平铺,直至铺满整个元素 2. 如果元素尺寸小于图片尺寸,图片默认从元素左上角开始显示,超出部分不可见

    JQuery:JQuery操作CSS类

    JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 1.jQuery addClass() 方法实例1:下面的例子