复习之JQuery基本语法（一）——选择器、JQuery对象属性与方法

你的名字 2022-05-10 02:03 219阅读 0赞

## JQuery简介 ##

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。  
可以看出JQuery需要JavaScript基础知识。

## 三大选择器 ##

//根据元素id获取元素
     var btn=$("#btn");
    //根据元素class获取元素
    var btn=$(".btn");
    //根据元素标签获取元素
    var btn=$(button);
    //选择所有标签
    var all=$("*");

## 可见jQuery对象是数组对象 ##

把JavaScript中的dom对象转换成JQuery对象

var username=12；
    $username=$(username);
    //JQuery转dom对象
    username = $username.get(0);//如果是-1为倒是第一个元素，-2为倒数第二个元素
    username = $username[0]);
    //JQuery集合拿单个对象
    username = $username.eq(0);
    //JQuery转dom数组
    username = $username.toArray();

## JQuery对象方法与属性 ##

获取对象长度（元素数）

$('#div').length

#### 对于JQuery标签对象的属性分3类 ####

1.val()/text()/html()

var divhtml=$("#div1").html();//获取子字符节点值
     //如果只是操作文本的用text，如果涉及样式用html
                console.log(divhtml);
                //$("#div1").html("修改");
                var divtext=$("#div1").text("修改");

2.attr()

//attr()函数一个参数表示获取其属性。
         //attr()函数两个参数表示修改属性。
         btn.attr("type");
     btn.attr("value","不点了吗")

3.css()

btn.css("font-size","30px");
     //修改多个
     btn.css({"color":"#dddddd","background":"blue"});

删除元素或链式机构添加属性

divs.removeClass();//删除样式
    div.removeAttr("id");//移除属性
    divs.addClass("bb");//可以使用链式结构

var divhtml=$("#div1").html();//获取子字符节点值
    
                //如果只是操作文本的用text，如果涉及样式用html
                console.log(divhtml);
                //$("#div1").html("修改");
                var divtext=$("#div1").text("修改");
                console.log(divtext)
    
                var btn=$("#btn");
                //attr()函数一个参数表示获取其属性。
                //attr()函数两个参数表示修改属性。
                console.log(btn.attr("type"));
                console.log(btn.attr("value","不点了吗"));
                //console.log(btn.attr("style","color:pink;"));
                //css()函数一个参数表示获取其他属性。
                //css()函数两个参数表示修改属性。
                btn.css("font-size");
                btn.css("font-size","30px");
                //修改多个
                btn.css({"color":"#dddddd","background":"blue"});
    
                //对于JQuery标签对象的属性分3类
                //1.val()/text():html()
                //2.attr()
                //3.css()
    
    
                //$.each()遍历的数组对象，遍历生成的是原生态的dom对象
                var divs=$("div");
                divs.css("color","red");
                divs.removeClass();//删除样式
                div.removeAttr("id");//移除属性
                divs.addClass("bb");//可以使用链式结构
                
           		div.appendTo('$("dody"));//把div追加到body最后面
           		
                divs.each(function () {
                    console.log(this.innerHTML);
    
    			//取第一个元素或者最后一个元素
    			$(this).children("input:first-child").val();
    			$(this).children("input:last-child").val();
                })
            }

#### 空元素设置属性(少用) ####

var link1 = $('<a>',{text:'百度',href:'http://www.baidu.com',target:'_blank'});
    link1.appendTo('$("dody"));//把link1追加到body最后面

#### 失去焦点 ####

当输入域失去焦点 (blur) 时改变其颜色：
    
    $("input").blur(function(){
      $("input").css("background-color","#D6D6FF");
    });