jQuery快捷操作

发布时间：2年前作者：老郭热度： 1145 ℃评论数：

# jQuery快捷操作

------------

> addClass、removeClass、toggleClass

```
$().attr('class',值);
$().attr('class');
$().removeAttr('class属性');//删除class的属性

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

追加：

删除与开关效果：
function f2() {
  $('div').removeClass('class','pear');
 $('div').removeClass('class','class');
}

function f3() {
    $('div').toggleClass('apple');
}
```

> 标签包含内容操作

```
<div>hello<span>world</span></div>

JavaScript操作：
    dvnode.innerHTML;获得div包含的信息
    dvnode.innerHTML = xxx；设置div包含的内容
  （innerHTML不是w3c的标准技术，许多浏览器对其有支持而已）

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

html() 和 text() 方法的区别：
①获取内容
    前者可以获取html标签和普通字符串内容
    后者只获取普通字符串内容（会自动过滤html标签）
②设置内容
    前者可以设置html标签和普通字符串内容
    后者只设置普通字符串内容，如果内容里边有tag标签内容，就把
    其中的“<”“>”符号转变为符号实体<----<>----> 空格---

以上两种操作（获取/设置）如果针对的操作内容是纯字符串内容，则使用效果一致
```

> 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等
                margin：margin-left  margin-top等
③样式的设置，会被设置为“行内样式”
      有则改动，无则添加
    （复合属相样式可以直接进行设置操作）

获取div各个样式：

function f1() {
// 获取          行内、内部、外部样式都可以获得
// JavaScript的dom方式只能获得“行内”样式
console.log($('div')).css("color");//rgb(255,0,0)
console.log($('div')).css("width");//300px
console.log($('div')).css("height");//200px
console.log($('div')).css("background-color");//rgb(173,216,230)
console.log($('div')).css("font-size");//25px

//console.log($('div')).css("border");//（空字符串）
//“复合样式”需要拆分为“具体样式”进行获取
console.log($('div')).css("border-left-style");//solid
console.log($('div')).css("border-left-color");//rgb(0,0,255)
console.log($('div')).css("border-left-width");//4px
}

给div设置一些css样式信息：
function f2() {
// 设置（会被设置为“行内”样式）
// 有则修改、无则添加
$('div').css('font-size','40px');//添加
$('div').css('color','green');//修改
$('div').css('width','400px');//添加

//复合样式可以直接进行设置
$('div').css('border','5px solid yellow')

}

通过json对象批量修改css样式：
function f3() {
//通过json对象批量修改css样式
$('div').css({'font-size':'50px',color:'purple',height:'100px'});
}
</script>

```

> value属性值快捷操作

```
$().attr('value');
$().attr('value',信息值);

快捷操作
$().val();//获得value属性值
$().val(信息值);//设置value属性的值
该val()方法在复选框、单选按钮、下拉列表的使用有凸出表现。

4.1复选框操作
    ①、获得被选中复选框的value属性值

②、设置默认情况下哪个复选框被选中

获取被选中复选框value值的逻辑：

function f1() {
//获取（被选中的复选框的value值）
//1、获得全部的“被选中”复选框元素节点对象
//2、遍历全部的被选中复选框
//3、如果有选中就获得其value值

//console.log($('.hby:checked'));
//Object[input.hby 属性(attribute)值 = “1”，input.hby 属性(attribute)值 = “3”，input.hby 属性(attribute)值 = "4"]
var s = "";
for (var i = 0; i < $('.hby:checked').length; i++) {
//$('.hby:checked'):eq("+i+")被遍历出来的当前的复选框元素节点

//console.log($('.hby:checked'):eq("+i+")').val()

s += $(".hby:checked:eq('+i+')").val()+","

}

s = s.substr(0,s.length-1);//去除最后’，‘逗号
console.log(s);//1,2,3

}

通过val([元素值，元素值])方法设置被选中项：
    function f2(){
            //设置，“篮球”“足球”“棒球”选中
            //获得全部复选框，做遍历，判断当前项目的value值是否等于1或4
            //等于就选中
            //$(全部的复选框).val([元素值，元素值])，可以设置“value值=元素值”的项目选中
            $('.hby').val([1,2,4]);
    }

<h2>复选框操作</h2>
爱好：
<input type="checkbox" class="hby" name="hby[]" value="1">篮球
<input type="checkbox" class="hby" name="hby[]" value="2">足球
<input type="checkbox" class="hby" name="hby[]" value="3">排球
<input type="checkbox" class="hby" name="hby[]" value="4">棒球
<br>
<input type="button" name="" value="获取" onclick="f1()"> 
<input type="button" name="" value="设置" onclick="f2()">

4.2、下拉列表操作

function f1() {
 // 获取（被选中下拉列表项目的value值）
 // 适合"单选"的下拉列表
    // console.log($('option:selected').val()); //attr('value')
 //"多选"的情况（适合单选情况）
 //$(下拉列表).val(); //获得全部被选中的下拉列表项目的value值
    console.log($('select').val());//["B",'D','E']
}

function f2() {
// 设置，北京、天津、沈阳选中（单选、多选都合适）
// $(下拉列表).val([元素值，元素值...]);//可以设置"value值=元素值"的项目选中
$('#city').val(['A','B','E'])

}

<h2>下拉列表操作</h2>
曾经旅游过的城市：
<select id="city" style="width: 150px; height: 246px;">
 <option value="0">请选择</option>
    <option value="A">北京</option>
 <option value="B">天津</option>
 <option value="C">上海</option>
 <option value="D">深圳</option>
 <option value="E">沈阳</option>
</select>
<br><br>
<input type="button" name="" value="获取" onclick="f1()">
<input type="button" name="" value="设置" onclick="f2()">

4.3 单选按钮操作
    获得选中项目的value值和设置默认选中项目操作：
   function f1() {
 // 获取（被选中单选框项目的value值）
  console.log($('.sx:checked').val());
  }

function f2() {
 // 设置
   // $(全部单选按钮).val([元素值]);//使得value值===元素值的项目中选中
  $('.sx').val(['c']);
    }
```
> 复选框操作

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

复选框全选、全不选、反选操作：

function selAll() {
     // 全选 $('li').css('color','red');
     $('.hby').attr('checked','true');
     //以上css()/attr()方法都有批量处理效果
      //在jQuery框架里边，大部分方法本身有‘遍历机制’
        //遍历同时会为每个dom对象都设置对应的(css)属性
    }

function selnotAll(){
      //全不选
       $('.hby').attr('checked',false);
    }

function selfan() {
    // 遍历全部的股选矿，查看选中状态，选中设置不选中
  // $('.hby')
      for (var i = 0; i < $('.hby').length; i++) {
          var flag = $('.hby:eq('+i+')').attr('checked');//判断选中状态
           $('.hby:eq('+i+')').attr('checked',!flag);
        }
   }

<h2>复选框按钮</h2>
    爱好：
    <input type="checkbox" name="hobby[]" class="hby" value="1">篮球
    <input type="checkbox" name="hobby[]" class="hby" value="2">足球
    <input type="checkbox" name="hobby[]" class="hby" value="3">排球
    <input type="checkbox" name="hobby[]" class="hby" value="4">棒球
    <br>
    <input type="button" name="" value="全选" onclick="selAll()">
    <input type="button" name="" value="全不选" onclick="selnotAll()">
    <input type="button" name="" value="反选" onclick="selfan()">

```

jQuery,快捷操作

上一篇：jQuery的属性操作

下一篇：jQuery对象与dom对象关系

栏目导航

Ajax是什么？ 1087 ℃
网站禁止浏览器缓存 1131 ℃
Ajax之get方式请求 2569 ℃
Ajax之post方式请求 2038 ℃
Json使用 1027 ℃
无刷新表单信息提交 1249 ℃
使用Ajax中$.post方法前台获取json数据，将数据转换为... 1608 ℃
细说jQuery的选择器 1229 ℃
jQuery的属性操作 1994 ℃
jQuery快捷操作 1145 ℃
jQuery对象与dom对象关系 2824 ℃
jQuery的事件加载机制 1420 ℃
jQuery属性选择器使用 2046 ℃
jQuery基本动画效果 2394 ℃
利用Ajax技术实现天气预报接口 1299 ℃

jQuery快捷操作

栏目导航

相关文章

微信小程序

手机扫码访问