JQuery的基础语法(快速入门，适用较广)

JQuery 基础语法(快速入门)

JQuery入口函数

//默认写法
$(document).ready(function(){
   
   // 开始写 jQuery 代码...
});

//简写
$(function(){
   
   // 开始写 jQuery 代码...
});

JavaScript入口函数

window.onload = function () {
   
    // 执行代码
}

JQuery入口函数与JavaScript入口函数的区别

JQuery的入口函数是在html所有标签（DOM）都加载之后，就会执行。

JavaScript 入口函数是等到所有内容，包括外部文件加载完后，才会执行。

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	只能执行一次，如果第二次，那么第一次的执行会被覆盖	可以执行多次，第无穷次都不会被上一次覆盖
简写方案		$( function() { } );

常用方法

选择元素方法

//元素选择器
$("p")

//#id 选择器
$("#box")

//.class 选择器
$(".box")

//选取所有元素
$("*")

//选取当前 HTML 元素
$(this)

//选取 class 为 box 的 <p> 元素
$("p.box")

//选取第一个 <p> 元素
$("p:first")

//选取第一个 <ul> 元素的第一个 <li> 元素 
$("ul li:first")

//选取每个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")

//选取带有 href 属性的元素
$("[href]")

//选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target='_blank']")

//选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")

//选取所有 type="button" 的 <input> 元素 和 <button> 元素
$(":button")

//选取偶数位置的 <li> 元素
$("li:even")

//选取奇数位置的 <li> 元素
$("li:odd")

获取内容和属性的方法

方法
text()	设置或获取所选元素的文本内容
html()	设置或获取所选元素的的内容（包括HTML语句）
val()	设置或获取表单字段的值
attr()	设置或获取元素的属性

添加方法

方法
append()	在被选择元素的结尾插入内容
prepend()	在被选择元素的开头插入内容
after()	在被选择元素之后插入内容
before()	在被选择元素之前插入内容

【注】：

append/prepend 本质是在选择元素内部嵌入。

after/before 本质是在元素外面追加。

删除方法

方法
remove()	删除被选元素（及子元素）
empty()	从被选元素中删除子元素

获取并设置CSS类

方法
addClass()	向被选元素添加一个或多个类
removeClass()	从被选元素删除一个或多个类
toggleClass()	对被选元素进行添加或删除的切换操作
css()	设置并返回样式属性

CSS方法

设置/返回
需要返回指点的CSS属性值，使用右边语法	css( " propertyname " );
需要设置指定的CSS属性，使用右边语法	css( " propertyname " , " value ");
设置多个CSS属性,使用右边语法	css(" propertyname " : " value " , "propertyname " : “value”, …)

获取元素宽

width() //获取当前元素(width)的宽，

innerWidth() //获取当前元素（包含width+padding) 的宽，

outerWidth() //获取当前元素（包含width+padding+border）的宽，

outerWidth(true)

//获取当前元素（包含width+padding+margin+border）的宽，

获取元素高

height() //获取当前元素(height)的高，

innerHeight() //获取当前元素（包含height+padding) 的高，

outerHeight() //获取当前元素（包含height+padding+border）的高，

outerHeight(true)

//获取当前元素（包含height+padding+margin+border）的高，

获取宽高写法

$(".box").width