jQuery初识得一些笔记

JavaScript和jQuery对比

不同处对比

怎样使用jQuery？

官网下载地址：http://jquery.com/download/

引包（引入jQuery文件）

<script type="text/javascript" src="jquery-1.12.4.js"></script>

入口函数

//原生JS的入口函数
window.onload = function(){
}
//JQ方式一
$(function(){
}
//JQ方式二
$(document).ready(function () {
});

功能实现

$("#btnShowDiv").click(function () {
    $("div").show(1000);
});

对比JavaScript的入口函数jQuery的入口函数,执行时机

1.JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

了解jQuery的$符号

其实$就是一个函数：$();参数不一样，功能不一样!
$常用的几种情况：
$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象

$ === jQuery,也就是说能用$的地方，完全可以用jQuery，$仅仅是简写形式。

基本选择器

层级选择器

过滤选择器

筛选选择器(方法)

其它常用选择器

jQuery操作样式

设置单个样式

css(name, value);name：需要设置的样式名称 value：对应的样式值

$(".box").css("background-color", "red");

设置多个样式

css(obj);参数是一个对象，对象中包含了需要设置的样式名和样式值

 $(".box").css({
            "background-color": "gray",
            "width": "200px",
            "height": "200px"
        })

获取样式

$(".box").css(name); name是样式的名称

let width = $(".box").css("width")
console.log(width)

转载