jQuery基础(2) - 爱码网

jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作

jQuery   宗旨：write less do more
就是js的库，它是javascript的基础上封装的一个框架
在前端中，一个js文件就是一个模块
 
 一、用法：
    1.引入包
    2.入口函数  $(fn(){});
    3.事件处理  处理dom（文档中的所有的元素）
 
二、筛选选择器（重点）
 
三、动画
    $('div').show(3000)/hide()/toggle()
     
    slideDown/slideUp/slideToggle()
     
    fadeOut()隐藏/fadeIn()/fadeTo(3000,0.5,fn)/fadeToggle
 
    自定义动画
    animate({},3000,fn)
     
    用的非常多
    stop(false,false);默认是false,false
    第一个参数  后续动画继续执行
    第二个参数  立即停止当前动画
 
jquery都是方法
$()
 
链式编程 因为jquery的，每个方法 返回的都是jquery对象
$('div').click(function(){
    this指的jsDOM对象
    <!--
    JSdom==>jquery     $(jsDom)
    jquery===>jsDom    $('div')[index];  $('div').get(index);
     -->
 
}).css()............

一、jQuery的属性操作

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作

　　a. html属性操作: 是对html文档中的属性进行读取,设置和移除操作.比如attr()、removeAttr()

　　b. DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()

　　c. 类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()

　　d. 值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr()

设置属性值或者返回被选元素的属性值

//获取值：attr()设置一个属性值的时候 只是获取值
var id = $('div').attr('id')
console.log(id)
var cla = $('div').attr('class')
console.log(cla)
//设置值
//1.设置一个值 设置div的class为box
$('div').attr('class','box')
//2.设置多个值，参数为对象，键值对存储
$('div').attr({name:'hahaha',class:'happy'})

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .app{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" class="app" title="123">
    </div>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取属性值
            var idValue = $('div').attr('id');
            console.log(idValue);
            //设置值
            $('div').attr('title','890');
        })
    </script>
</body>
</html>

View Code

一、jQuery的属性操作

attr()

设置属性值或者 返回被选元素的属性值

设置属性值或者返回被选元素的属性值