jQuery笔记2

属性操作
<input  type=”text”  class=”apple”  id=”username”  name=”username” value=”tom”
    address=”beijing”  />

dom方式操作属性值：
获取：
itnode.属性名称
itnode.getAttribute(属性名称);
修改：
itnode.属性名称= 值;
itnode.setAttribute(属性名称，值);

jquery方式操作属性(attribute)：
$().attr(属性名称);          //获得属性信息值
$().attr(属性名称，值);      //设置(修改)属性的信息
$().removeAttr(属性名称);     //删除属性
$().attr(json对象);          //同时为多个属性设置信息值，json对象的键值对就是名称和值
$().attr(属性名称，fn);        //通过fn函数执行的return返回值对属性进行赋值

快捷操作
 class属性值操作
$().attr(‘class’,值);        //修改class属性
$().attr(‘class’);        //获取class属性
$().removeAttr(‘class属性’);  //删除class的属性

class具体快捷操作方法：
$().addClass(class属性值);      //给class属性追加信息值
$().removeClass(class属性值);    //删除class属性中的某个信息值
$().toggleClass(class属性值);    //开关效果，信息值有就删除，没有就添加

多个class属性值同时发生效果：
<div  class=”apple  pear  banana”>

标签包含内容操作
<div>hello<span>world</span></div>
javascript操作：
dvnode.innerHTML;             获得div包含的信息
dvnode.innerHTML = XXX；      设置修改div包含的内容
(innerHTML不是w3c标准技术，许多浏览器对其有支持而已)

jquery操作：
$().html();           //获得节点包含的信息
$().html(信息);      //设置节点包含的内容
    $().text();            //获得节点包含的“文本字符串信息”内容
    $().text(信息);        //设置节点包含的内容(有html标签就把“><”符号变为符号实体)

使用text()方法给元素对象设置html标签内容，其会把标签中的<>符号变为符号实体：

css样式操作
$().css(name，value);      //设置
$().css(name);            //获取
$().css(json对象);        //同时修改多个css样式

复合样式需要拆分为具体样式才可以获取：

样式设置，都被设置为行内样式：

获取样式信息：

设置样式：

批量修改样式：

css()样式操作特点：
① 样式获取，jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式
② 获取复合属性样式 需要拆分为"具体样式"才可以操作
(有的浏览器是可以获得复合属性信息的，例如chrome)
例如：     background 需要拆分为  background-color background-image 等进行操作
    border： border-left-style  border-left-width  border-left-color 等
left/top/right/bottom
    margin： margin-left  margin-top 等
③ 样式的设置，会被设置为“行内样式”
   有则修改，无则添加
(复合属性样式可以直接进行设置操作，无需拆分为具体样式)

 

value属性值快捷操作
$().attr(‘value’);        //获取value值
$().attr(‘value’,信息值);//设置value值

快捷操作：
$().val();            //获得value属性值
$().val(信息值);    //设置value属性的值
该val()方法在 复选框、单选按钮、下拉列表 的使用有卓越表现。
1 复选框操作
获取 选中复选框的value值
设置 默认情况下使得一些复选框选中

获取复选框选中项目的value值：

设置复选框默认选中项目：

下拉列表操作
获取、设置

获取选中项目的value值：

设置默认选中项：

单选按钮操作

获取 和 设置 操作：

复选框操作
全选、反选、全不选
$().attr(‘checked’,true);        //设置复选框选中
$().attr(‘checked’,false);        //取消复选框选中
$().attr(‘checked’);            //判断复选框选中情况，返回布尔值

总结：
1.属性操作
$().attr(name)
$().attr(name,value)
$().attr(json对象)
$().removeAttr(name)
$().attr(name,function)
2.快捷操作
a)class属性值
$().addClass()  追加
$().removeClass()
$().toggleClass()
b) 标签包含内容快捷操作
$().html()  $().html(内容)
$().text()   $().text(内容)
c) css样式快捷操作
获取：行内、内部、外部样式都可以获取
设置：设置为行内样式，有则修改、无则添加
d) val() value属性值操作
val()  --------  attr(‘value’)
复选框：
$().val([v1,v2,v3..])
下拉列表：
$(下拉列表).val()
$(下拉列表).val([v1,v2,v3..])
单选按钮：
$(被选中单选按钮).val()
$(全部单选按钮).val([v])
3.复选框选中操作
$().attr(‘checked’,true/false);
$().attr(‘checked’);  判断

通过“并且选择器”实现下图效果

实现下图图片放大、缩小效果

点击“放大”按钮，宽度、高度增加例如5px，有不断点击递增放大效果

(注意图片等比例缩放)