jQuery

jQuery

官网
菜鸟教程
w3c jQuery

概念

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。

What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
(jQuery是一个快速，小巧，功能丰富的JavaScript库。 它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。 通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。)

获取元素

方法

var box = $(".box");//通过类
var box1 = $("#box");//通过id
var box2 = $("div");//通过标签
console.log(box);
//init [div#box.box, prevObject: init(1), context: document, selector: ".box"]

获取内容

//获取元素内容
console.log(box2.context.body.innerText);
console.log($("div").html());
console.log($("div").text());

获取当前对象

$(this)

获取样式

$("div").css("backgroundColor")

获取元素属性

$("div").attr("title");
$("div").prop("uid");
$("div").data("data-num")

给元素设置内容

$("div").text("人文中国")
$("div").html("从黑洞到大爆炸");

给元素设置样式

$("box").css({
    'width':'100',
    height:'100',//不用带单位
    background:"red"
});

给元素设置点击事件

$("div").click(function(){});

给元素设置属性

$("div").attr({title:"时间",id:"001",name:"element"});
$("div").prop("uid","1234567890");
$("div").data("data-num","0987654321")

实例

首先定义标签

<div id="box" class="box">时间简史</div>

jQuery和原生js对象转换

jQuery转原生js

<div id="box" class="box">时间简史</div>

var dom = $(".box")[0];//转换
console.log(dom);
//<div id="box" class="box">时间简史</div>

原生js对象转jQuery

var oDiv = document.getElementById('box');
console.log(oDiv);
//<div id="box" class="box">时间简史</div>
var jqueryDom = $(oDiv);//转换
console.log(jqueryDom);//init [div#box.box, context: div#001.box]