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

最新推荐文章于 2024-09-06 08:31:58 发布

IManiy

最新推荐文章于 2024-09-06 08:31:58 发布

阅读量329

点赞数 1

分类专栏：前端文章标签： JQuery

本文链接：https://blog.youkuaiyun.com/IManiy/article/details/82830128

版权

前端专栏收录该内容

31 篇文章

订阅专栏

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");
});