属性
1.属性
    1.1 attr(name|properties|key,value|key,fn)
        1) 获取属性值    $("img").attr("src");
        2) 设置属性值    $("img").attr("title","你好");$("img").attr({src:"img1.png",alt:"img1"})
        3) 设置属性值  $("img").attr("alt",function(index,value){return value + index}) //index为当前元素的索引,value为"alt"原先的属性值
    1.2 removeAttr(name)
        删除一个属性    $("img").removeAttr("alt");
    1.3 prop(name|properties|key,value|key,fn)
         $("input[type='checkbox']").prop("checked", true);
        $("input[type='checkbox']").prop("checked", function( i, val ) {    return !val;    });
    1.4 removeProp(name)
        用来删除由.prop()方法设置的属性集
    1.5 attr() 与 prop() 的区别
        具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
2.css类
    2.1 addclass(class|fn)
        $("p").addClasss("active focus");
        $("ul li").addClass(function(i,class){return class+i})
    2.2 removeClass([name|fn])
        $("p").removeClass("active");
        $("p").removeClass(function(){return  $(this).attr("class")})
    2.3 toggleClass(class|fn)
        $("p").toggleClass("active");
        $(".class").toggleClass(function(){
            if($(this).parent().is(".myClass"))
            {
                return "classone";
               }
            else
            {
                return "classtwo";
            }
           })
3.HTML代码|文本|值
    3.1 html([val|fn])    
        获取内容  $("div").html()    取得第一个匹配元素的html内容
        设置内容      $("div").html("<p><span>htmlhtmlhtml</span></p>");        
        $("div").html(function(index,html){return html+index})
    3.2 text([val|fn])
        获取内容    $("p").text()
        设置内容    $("p").text("texttexttext")
                $("p").text(function(index,text){return index+text})
    3.3 val([val|fn|arr])
        获取值    $("input").val();
        设置值    $("input").val("2222222");
                $("input").val(function(index,value){return index + value})
        用于 check/select 的值    //数组操作
            $("input").val(["check2", "radio1"]);
CSS
1.css
    1.1 css(name|pro|[,val|fn])
        获取样式属性值        $("p").css("color")
        设置样式属性值        $("p").css("color","red")
                        $("p").css({color:"red",width:"100px"})
                        $("p").css({
                                        width:function(index,value){return parseFloat(value) * 1.2;},
                                        height:function(index,value){return parseFloat(value) * 1.2;}
                                    })
    1.2 jQuery.cssHooks
2.位置
    2.1 offset([coordinates]) 获取匹配元素在当前视口的相对偏移
        获取偏移值    $("p").offset()
        设置偏移值    $("p").offset({top:100,left:100})
                    $("p").offset(function(i,c){    //c代表选择器的当前坐标
                        newPos=new Object();
                        newPos.left=c.left+100;
                        newPos.top=c.top+100;
                        return newsPos;
                    })
    2.2 position() 获取匹配元素相对父元素的偏移。
        $("p").position()
    2.3 scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
        获取        $("p").scrollTop()
        设置        $("p").scrollTop(500)
    2.4 scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
        获取        $("p").scrollLeft()
        设置        $("p").scrollLeft(500)
3.尺寸
    3.1 height([val|fn])
        获取        $("p").height()
        设置        $("p").height(500)
                $("p").height(function(i,c){return c+200;})
    3.2 width([val|fn])
        获取        $("p").width()
        设置        $("p").width(500)
                $("p").width(function(i,c){return c+200;})    
    3.3 innerHeight() 获取第一个匹配元素内部区域高度(包括补白(padding)、不包括边框)。    
        $("p").innerHeight();
    3.4 innerWidth() 获取第一个匹配元素内部区域宽度(包括补白(padding)、不包括边框)。    
        $("p").innerWidth();
    3.5 outerHeight([options]) 获取第一个匹配元素外部高度(默认包括补白和边框)。
        如果 options 值为true 则计算边距(margin)在内,默认值为false
    3.6 outerWidth([options]) 获取第一个匹配元素外部宽度(默认包括补白和边框)。
        如果 options 值为true 则计算边距(margin)在内,默认值

jquery 属性与css操作的更多相关文章

  1. 前端开发之jQuery属性和文档操作

    主要内容: 1.jQuery属性操作 2.jQuery文档操作 一.jQuery属性操作 1.什么是jQuery的属性操作? jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作, ...

  2. jQuery属性和样式操作

    回顾 1. jquery基本使用 <script src="jquery.min.js"></script><script> $(functio ...

  3. jquery 学习(五) - CSS 操作

    HTML + CSS 样式 /*CSS样式*/<style> body{ margin: 0; } div{ width: 100%; height: 2000px; background ...

  4. jQuery属性,方法操作

     addClass() 向匹配的元素添加指定的类名.attr() 设置或返回匹配元素的属性和值.hasClass() 检查匹配的元素是否拥有指定的类.html() 设置或返回匹配的元素集合中的 HTM ...

  5. JQuery巧妙利用CSS操作打印样式

    一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: <link rel="stylesheet" href="cs ...

  6. Jquery属性操作(入门二)

    ********JQuery属性相关的操作******** 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个 ...

  7. jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

  8. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  9. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

随机推荐

  1. pom.xml第一行报错

    错误:Cannot detect Web Project version. Please specify version of Web Project through <version> ...

  2. 微信小程序正式发布!这是最全的上手指南

    2017 年 1 月 9 日,是一个值得载入互联网史册的日子. 这一天,零点刚过,张小龙和他的团队,在夜色笼罩下,正式发布了微信小程序. 所以,从这一刻开始,只要有开发者登录小程序后台,并在「开发管理 ...

  3. typeof和instanceof 运算符

    instanceof运算符与typeof运算符相似,用于识别正在处理的对象的类型,但是在使用 typeof 运算符时采用引用类型存储值会出现一个问题. 无论引用的是什么类型的对象,它都返回 " ...

  4. Yii 通过composer 安装的方法

    Yii2框架可以通过两种方式 安装 : 第一种方法: Yii2有两个模板 一个是基础模板,一个是高级模板,基础可能简单点吧.........,现在直接从   https://github.com/yi ...

  5. JavaScript- 省市联动代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  6. iOS 视频播放的简单使用

    最近工作中有用到视频播放的内容,分享一些简单的用法给大家(由于网速问题,本例中使用的是本地的资源进行播放,要播放网络上的修改一些URL即可) 1.iOS9之前的视频播放 首先需要导入MediaPlay ...

  7. Java多线程小结

    简述 Java是支持多线程编程的语言,线程相比于进程更加轻量级,线程共享相同的内存空间,但是拥有独立的栈.减少了进程建立.销毁的资源消耗.jdk1.5后对java的多线程编程提供了更完善的支持,使得j ...

  8. 通过GWT RPC实现客户端与服务器端的交互

    GWT有两种与服务端进行交互的技术:GWT RPC和基于普通AJAX的远程交互技术.这里只介绍GWT RPC技术. 一个完整的RPC服务至少包含三个Java文件: 1.客户端远程接口类,需要继承Rem ...

  9. 读书笔记-HBase in Action-第二部分Advanced concepts-(1)HBase table design

    本章以山寨版Twitter为例介绍HBase Schema设计模式.广义的HBase Schema设计不仅仅包含创建表时指定项,还应该综合考虑Column families/Column qualif ...

  10. PAT---1001. A+B Format (20)

    #include<stdio.h> int main(){ //定义要读入的两个整数 int a,b; //定义好放拆项用的数组 ]; //读入两个整数 scanf("%d%d& ...