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

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对象方法与属性

            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();//删除样式
            divs.addClass("bb");//可以使用链式结构
            divs.each(function () {
                console.log(this.innerHTML);

            })
        }

猜你喜欢

转载自blog.csdn.net/IManiy/article/details/82830128