jQuery ---页面内容,样式,控制属性-阿里云开发者社区

开发者社区> twilight0402> 正文

jQuery ---页面内容,样式,控制属性

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
+关注继续查看
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/71249335

设置元素及内容

  • html() 获取元素中的HTML内容(相当于innerHTML)
  • text() 获取文本内容(自动清理HTML标签)
  • html(value) 设置innerHTML的内容
  • text(value) 替换文本内容(覆盖innerHTML中所有的文本和标签)
  • val() 获取value属性,加属性表示设置value的值
  • val([value,value]) 控制选中的组件

text() 会过滤掉标签中的HTML标签,text对于以下段落的处理结果是:

    <div id="a">
        <p>这是一个段落</p>
        <p>这是第二个段落</p>
        <p>这是第三个段落</p>
    </div>

这是一个段落 这是第二个段落 这是第三个段落

当val([“value”,”value2”,…]) 参数为数组时,与value对应的表单组件会被选中

表单:
    <input type="checkbox" name="name" value="man">
    <input type="checkbox" name="name" value="women">
操作:
        $("input").val(["man","women"]);       // 两个复选框都会被选中

PS: 当html() 和 text() 的参数带有HTML标签时,HTML会原封不动的输出HTML标签,而text()会将HTML标签转义后再输出,所以text()输出的是纯文本,即使文本中有HTML标签也会按照纯文本输出。

元素的属性操作

  • attr(“属性名”)
  • attr(“属性名”,”属性值”) 设置属性值
  • attr({key:value,key:value}) 设置多个属性
  • attr(“属性值”,function(index,value){})value表示原来的value(如果没有value则为undefined)
  • removeAttr(“属性名”) 删除属性

同时设置多个属性

        $("#input").attr({
            class:'a',
            size:10
        });

通过匿名函数设置属性值

        $("#input").attr('value',function(index,value){
                return index + value;
        });

以上方法都可使用匿名函数

CSS

  • css(“”) 获取css样式
  • css(“属性名”,”属性值”) 设置css样式
  • css([“属性名”,”属性名”,…]) 返回包含所有属性的对象(原生js对象)
  • css(“属性名”,function(index,value){})
        var data = $("#a").css(['width','height','background-color']);
        for(var i in data ){
            alert(data[i]);
        }

设置多个样式:

    css({
    "属性名":"属性值""属性名":"属性值",
    })
        $("#a").css({
            "width":"200px",
            "height":"200px",
            "background-color":"green"
        });

each() 遍历对象成员属性

对于原生的js对象:
$.each(对象,function(样式属性名,属性值){})

        $.each(data,function(a,b){
            alert(a+":"+b);
        });

对于jQuery对象:
$(“div”).each(function(index,element){}) element是DOM对象

        $("div").each(function(index,element){
            alert(index+element.innerHTML)
        });

toggleClass()

  • toggleClass(className) 默认样式和指定样式之间的切换
  • toggleClass(className,switch) 移除和添加指定的样式
  • toggleClass([switch]) 移除和添加已有的所有样式
  • toggleClass(function(){}) 匿名函数
  • toggleClass(function(index,className,switchBool){}) 匿名函数(形参名不能是关键字,否则会报错)
  • addClass(“class1 class2 class3”);增加class
  • removeClass(“class1 class2”);

  • true: 切换为指定样式

  • false: 切换为默认样式

在指定样式与默认样式之间切换

        document.getElementById("a").onclick = function(){
                $("#a").toggleClass("red");
        };

下面的代码与上面的代码作用相同,用count计数切换的

        var count=0;
        $("#a").click(function(){
                $("#a").toggleClass("red",count++%2==0);
        });

实现在两个样式之间切换

        var count = 0 ;
        $("#a").click(function(){
            $(this).toggleClass("red" , count++ %2 == 0 );
            if($(this).hasClass('red')){
                $(this).removeClass('green');
            }else{
                $(this).toggleClass('green');
            }
        });

使用不带参数的匿名函数

            $("div").click(function(){
                $(this).toggleClass(function(){
                    if($(this).index() % 2 == 0 ){
                        return "green";
                    } else {
                        return "red";
                    }
                })
            });

使用带参数的匿名函数

            $(document).click(function(){
                $("div").toggleClass(function(index,className,switchBool){
                    if(index % 2 == 0 ){
                        return "green";
                    } else {
                        return "red";
                    }
                })
            });

PS:removeClass()中没有带任何参数,表示的是把指定元素中的所有类名移除

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery EasyUI API 中文文档 - 属性表格(PropertyGrid)
PropertyGrid 属性表格 扩展自 $.fn.datagrid.defaults,用 $.fn.propertygrid.defaults 重写了 defaults。 依赖 datagrid 用法 1. 1. $('#pg').propertygrid({   2.     url:'propertygrid_data.json',   3.     showGroup:true 4. });  特性 其特性扩展自 datagrid,下列是为 propertygrid 增加的特性。
855 0
【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123779 ...
857 0
+关注
134
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载