jQuery基础知识web前端

2019-05-13 作者:web前端   |   浏览(197)

1. jQuery简介

a) jQuery是1个第三方的js框架, 底层对js进行了包装, 简化了js的使用情势, 提供了多量的好用的方法.

b) 官网: http://jquery.com/, 下载网站: http://www.jq22.com/jquery-info122

c) jQuery的版本

  • 叁.x.x, 只协理新型的浏览器, 不辅助ie6, ie七, ie8
  • 贰.x.x, 不帮衬较老的浏览器, 扶助主流的浏览器
  • 1.x.x, 援救全体的浏览器(包蕴老版本)

jQuery_01,jquery

一、jQuery对象获得:壹先拿到DOM对象,再用$函数封装到jQuery对象;var $jQuery=$(DOM对象);2直接行使$函数查找到的DOM对象,被电动封装到jQuery对象中;var $jQuery=$(“selector”);

二、jQuery接纳器:援助大约全体CSS选用器;一绑定:a、DOM:elem.add伊夫ntListener(“事件名”,fn);b、jQuery:$(“selector”). 事件名(fn);2改变样式:a、DOM:elem.style.css属性名=值;b、jQuery:$(“selector”). css(“css属性名”,值);

三、选取器:壹中央选取器:#id,.class,元素,*(通配符),群组(,);

web前端 1web前端 2

2等级次序选用器:a、选取器1(空格)选拔器2;b、parent > child;c、前3个男生 后二个男士;d、前1个兄弟~前边全部兄弟;

web前端 3

肆、过滤选拔器:

a、基本过滤(地点过滤)::first,:last,:not(selector),:even,:odd,:eq(i),:gt(i),:lt(i);*(* 钦赐父成分下的子成分:first-child/last-child/nth-child(n););

web前端 4

b、内容过滤::contains(text),:empty(内容为空),:parent(内容非空),:has(selector)(选拔含有selector天特性成分的父成分);

web前端 5web前端 6

c、可知性过滤::visible(全部可知成分),:hidden(全数不可知成分);*( * 设置不可见有四种,display:none,visibility:hidden,opacity:0,type=“hidden”;当中:hidden只好相配display:none和type=“hidden”;);

web前端 7web前端 8

d、属性过滤:【属性名】:包含钦定属性的成分;【属性名=值】:钦赐属性钦点值的因素;【属性名!=值】:内定属性非钦点值的要素;【属性名^值】:钦点属性值以钦定内容初始的成分;【属性名$=值】:钦定属性值以钦命内容结尾的要素;【属性名*=值】:钦命属性只含有钦定内容的成分;【属性采用器一】【属性选拔器2】……:同时满意上述属性选拔器的要素;

web前端 9web前端 10

e、子成分过滤::first-child,:last-child,:nth-child(n),:only-child;

web前端 11web前端 12

五、表单选取器:

a、基本:input(选取具有input,包含textarea,select,button),:text(type为text的因素),:password,:radio,:checkbox,:submit,:reset,:button,:file,:hidden(包涵type=“hidden”和display=“none”),:image(采用全数图形按键);

b、表单属性过滤选取器::enabled(全部可用的成分),:disabled(全部不可用的因素),:checked(被选中的checkbox),:selected(被入选的option);

web前端 13web前端 14web前端 15

陆、属性:修改:$(“selector”).attr(“标准属性名”,“值”);*(省掉第一个参数为读取属性值);*(*attr只好获得或安装成分开首标签中的attribute,不可能获得或设置不再开头标签中的property——可应用prop读取,例:checked属性;);

一、jQuery对象获得:壹先取得DOM对象,再用$函数封装到jQuery对象;var $jQuery=$(DOM对象);2直接行使$函数查找到的DOM对象,...

一、jQuery基础 

2. jQuery的使用

a) 在项目中参预jQuery文件(jquery.js, jquery.min.js)

  • jquery.js: 格式出色, 有注释有换行缩进, 非常大, 用于学习
  • jquery.min.js: 压缩文件, 没有格式, 异常的小, 用于实际开采

b) 在html页面司令员脚本引进

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

c) jQuery的骨干是八个jQuery(), 那些函数特别常用, 所以有3个小名, 叫$().

d) jQuery的页面就绪函数, 须求调用ready(), 由于太常用, 所以进行了简化.

// 页面就绪函数

jQuery(document).ready(function() {

alert("jquery的就绪函数");

});

$(document).ready(function() {

alert("$就绪函数");

});

$(function() {

alert("终极就绪");

});

1、jQuery是什么?

3. js对象和jQuery对象的转变

a) js对象和jQuery对象是见仁见智的, 不过它们得以互相转变

b) jQuery对象àjs对象

  • 能够由当中括号的主意: [0]

console.info($("#box")[0].innerHTML);

  • 能够调用get方法: get(0)

console.info($("#box").get(0).innerHTML);

c) js对象àjQuery对象, 可以将js对象用$()包裹

console.info($(document.getElementById("box")).html());

jQuery是3个js框架,其根本思虑是,通过

4. jQuery选择器

选料器查找到相应的节点,然后对这么些节点进行

4.1 基本选拔器

卷入(封装成2个jQuery对象)。通过调用jQuery

4.1.1 id选择器

#id名

console.info($("#box"));

对象的习性恐怕措施来贯彻对节点的操作。那样做的

4.1.2 要素选取器

元素(标签)名

console.info($("div"));

便宜是:第3,将不一样的浏览器之间的差别屏蔽起来了。

4.1.3 类接纳器

.class名

console.info($(".demo"));

其次,代码特别简明,维护方便。

四.一.四 通用选用器

*, 代表全部因素

console.info($("*"));

贰、jQuery编制程序的步子

4.1.5 群组选取器

selector1, selector2, ...

console.info($("#box, .demo"));

step1: 使用选用器查找节点

肆.贰 层级选取器

step2: 调用jQuery对象的不2秘诀依旧性质

4.2.1 同盟全数后代成分

应用空格

console.info($("#box div"));

选取器:jQuery模仿css采纳器语法,成立的1套

4.2.2 合作全部子成分

采纳过量号 >

console.info($("#box > div"));

用以查找节点的条条框框。

4.2.3 合营下一个邻座的男生成分

使用

console.info($("#demo  div"));

3、jQuery对象与dom节点

4.2.4 相称后续全数的弟兄成分

使用 ~

console.info($("#demo ~ div"));

一)dom节点怎么着改造到jQuery对象

4.3 轻松采纳器

调用$()函数,比如

4.3.1 全过程选择

:first和:last

// 匹配第一个

$("tr:first").css("background-color", "#33F");

// 匹配最后一个

$("tr:last").css("background-color", "#CF3");

$(obj);

4.3.2 目录采用

:eq(), :lt()和:gt()

// 匹配等于某个索引

$("tr:eq(2)").css("background-color", "#3FC");

// 匹配小于某个索引

$("tr:lt(2)").css("background-color", "#CF3");

// 匹配大于某个索引

$("tr:gt(2)").css("background-color", "#3CF");

二)jQuery对象怎样转换到dom节点

4.3.3 奇偶选拔

:odd和:even

// 匹配奇数, 以索引来判断

$("tr:odd").css("background-color", "#3CF");

// 匹配偶数

$("tr:even").css("background-color", "#CF3");

方式一:  $obj.get(0)

4.3.4 标题选拔

:header, 用于选拔<h一>~<h陆>标题的签

// 匹配所有的标题标签 : h1~h6

$(":header").css("color", "#FC3");

方式二: $obj.get()[0]

4.3.5 反选

:not

$("tr:not(:first)").css("color", "#FC3");

三) jQuery与任何js框架如何共存?

4.4 别的接纳器

使用conflict()函数。

4.4.1 质量选用器

a) [attribute], 选取带有有个别属性的要素

b) [attribute=value], 选取某些属性等于有个别值的因素

c) [attribute!=value], 选用有个别属性不等于某些值的因素

d) [attribute^=value], 选用有些属性以某些值初阶的因素

e) [attribute$=value], 采纳有个别属性以有些值结尾的因素

f) [attribute*=value], 选取有个别属性包罗某些值的成分

g) [selector1][selector2][selectorN], 选拔多个属性时使用

二、选择器

4.4.2 表单选用器

a) :input, 相称全部input, textarea, select和button成分

b) :text, :password, :radio, :checkbox, :submit, :reset, :image, :button, :hidden, :file. 分别相称对应type的input成分.

c) :checked, 相称全数被入选的radio和checkbox.

d) :selected, 相配全数被选中的option

e) :enabled, 相配全数可用成分

f) :disabled, 相配全部不可用的要素

一、选用器是怎么样?

5. jQuery操作属性

a) attr(), 用于获取或丰硕(修改)成分的属性

b) removeAttr(), 用于删除元素的习性

function test1() {

// 获取属性

console.info($("#ft").attr("color"));

}

 

function test2() {

// 修改(添加)属性

$("#ft").attr("color", "#FC3");

}

 

function test3() {

// 删除属性

$("#ft").removeAttr("color");

}

jQuery模仿css选拔器语法,成立的一套

6. jQuery操作CSS样式

a) css(), 用于加多, 修改, 获取某些css样式

b) addClass(), 用于加多3个类样式

c) removeClass(), 用于删除三个类样式

d) toggleClass(), 用于切换3个类样式

<style type="text/css">

.demo {

width: 200px;

height: 100px;

border: 1px solid #FF0000;

 

}

</style>

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

<script type="text/javascript">

function test1() {

// 获取css样式

console.info($("#box").css("border"));

}

 

function test2() {

// 修改(添加)css样式

$("#box").css("color", "#C3F");

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

}

 

function test3() {

// 添加类样式

$("#box").addClass("demo");

}

 

function test4() {

// 删除类样式

$("#box").removeClass("demo");

}

 

function test5() {

// 切换类样式

$("#box").toggleClass("demo");

}

</script>

用以查找节点的条条框框。

7. jQuery操作文本和值

a) html(), 协理html标签, 能够猎取和赋值

b) text(), 不扶助html标签, 能够博得和赋值

c) val(), 操作表单域的值, 能够收获和赋值

function test1() {

// 获取div中的内容

console.info($("div").html());

// 获取div中的文本

console.info($("div").text());

}

 

function test2() {

// 给div赋值内容

$("div").html("<i>倾斜的div</i>");

$("div").text("<i>倾斜的div</i>");

}

 

function test3() {

// 操作值(表单)

console.info($("#demo").val());

$("#demo").val("李四");

}

二、基本选拔器

8. jQuery事件

#id

8.1 jQuery事件和js事件的分别

a) js中常用的轩然大波: onclick, ondblclick, onmousemove, onmouseover, onmouseout, onfocus, onblur, onkeydown, onkeyup, onload, onsubmit, onreset, ...

b) jQuery中具备的事件都并未有on

.class

8.2 jQuery中事件的绑定

a) 通过成分.事件(函数)的章程实行事件的绑定

$("#box").click(function() {

alert("你好!");

});

b) 通过成分.bind(事件名称, 函数)的方式进行事件的绑定

$("#box").bind("mouseover", function() {

$(this).css("border", "2px dashed #FC3");

});

$("#box").bind("mouseout", function() {

$(this).css("border", "2px dotted #C3F");

});

c) 能够行使one(事件名称, 函数)方法只绑定2回事件

$("#bd").one("click", function() {

window.open("http://jd.com", "广告", "width=500, height=300, top=100, left=200");

return false; // 防止跳转

});

d) live()和on(), 能够给现存的要素和以后的成分绑定事件

l live(), 在一.7版本此前使用

l on(), 一.七本子后引入应用

// 1.7前使用live

$(".del").live("click", function() {

var ename = $(this).parent().prev().prev().prev().html();

if(confirm("确定要删除["  ename "]吗?")) {

$(this).parent().parent().remove();

}

});

// 1.7后使用on

$(document).on("click", ".del", function() {

var ename = $(this).parent().prev().prev().prev().html();

if(confirm("确定要删除["  ename "]吗?")) {

$(this).parent().parent().remove();

}

});

element

8.3 jQuery中事件的解绑定

调用unbind方法能够化解事件的绑定, 不传参表示免除全部事件, 传参表示免除钦定的事件.

function test1() {

// 解除所有事件的绑定

$("#box").unbind();

// 解除指定事件的绑定

$("#box").unbind("click");

}

selector1,select2..selectn

八.4 jQuery事件的试行

经过"事件名()"的法子能够实践触发事件时的函数

$("#bd").click();

*

9. jQuery操作文书档案结构

a) append(): 向某些成分中加进成分

b) appendTo(): 将某些成分追加到其它3个成分中

c) remove(): 移除有些成分

d) empty(): 清空某些成分的源委

e) before(): 在某些成分前插入2个成分

f) insertBefore(): 将3个要素插到有个别成分前

g) after(): 在某些成分后插入三个成分

h) insertAfter(): 将三个要素插到有些成分后

3、档期的顺序选拔器

10. 文书档案结构 事件 筛选演练

职员和工人管理

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>员工管理系统</title>

<style type="text/css">

table {

width: 50%;

border-collapse: collapse;

text-align: center;

}

th, td {

border: 1px solid grey;

}

</style>

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

<script type="text/javascript">

$(function() {

// 绑定添加事件

$("#btnAdd").click(function() {

// 获取用户输入的信息

var ename = $(":text:first").val();

var email = $(":text:eq(1)").val();

var sal = $(":text:last").val();

// 生成tr标签

$("<tr />")

.append($("<td>" ename "</td>"))

.append($("<td>" email "</td>"))

.append($("<td>" sal "</td>"))

.append($("<td><input type='button' class='del' value='del' /></td>"))

.appendTo($("table"));

// 清空输入框

$(":text:first").val("");

$(":text:eq(1)").val("");

$(":text:last").val("");

// 获得焦点

$(":text:first").focus();

});

// 给删除按钮绑定事件

// 1.7后使用on

$(document).on("click", ".del", function() {

var ename = $(this).parent().prev().prev().prev().html();

if(confirm("确定要删除["  ename "]吗?")) {

$(this).parent().parent().remove();

}

});

});

</script>

</head>

<body>

<center>

ename: <input type="text" />  

email:<input type="text" />  

sal:<input type="text" /><br />

<input id="btnAdd" type="button" value="add" />

<hr />

<table>

<tr>

<th>姓名</th>

<th>邮箱</th>

<th>薪资</th>

<th>操作</th>

</tr>

<tr>

<td>Smith</td>

<td>smith@163.com</td>

<td>800</td>

<td><input type="button" value="del" class='del' /></td>

</tr>

<tr>

<td>King</td>

<td>king@163.com</td>

<td>5000</td>

<td><input type="button" value="del" class='del' /></td>

</tr>

</table>

</center>

</body>

</html>

select1 select2

select1>select2

select1 select2

select1~select2

 

四、过滤采取器

(一)基本过滤选取器

:first

:last

:not(selector)

:even

:odd

:eq(index)

:gt(index)

:lt(index)

 

(二)内容过滤选取器

:contains(text) 相配包括给定文本的因素

:empty 相称全部不包罗子元素或许文本的空成分

:has(selector) 匹配含有选用器所相称的因素

的元素

:parent 相称含有子成分可能文本的成分

 

(3)可知性过滤选拔器

:hidden 相配全数不可知成分,

或者type为hidden的元素

:visible 相称全数的可知元素

 

(四)属性过滤选用器

[attribute]

[attribute=value]

[attribute!=value]

(五)子成分过滤选拔器

:nth-child(index/even/odd)

(陆)表单对象属性过滤选拔器

:enabled

:disabled

:checked

:selected

5、表单选用器

:input

:text

:pasword

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

三、dom操作

1、dom查找

通过选取器找到节点后,能够调用

a, html() : 输出恐怕涂改节点之间的html内容

b,text():输出或然修改节点之间文本

c,val():输出恐怕涂改节点的value属性

二、创设节点:

 $(html)

3、加多节点:

 append():向每种相称的元素内部追加内容

 prepend():向各样相称的成分内部前置内容

 after():在种种匹配的成分之后插入内容

 before():在各类匹配的成分从前插入内容

四、删除节点

remove()

remove(selector)

empty():清空节点

五、复制节点

clone()

clone(true):使复制的节点也装有行为(将事件

拍卖代码壹块复制)

 

陆、属性操作

读取:attr('');

安装: attr('','') 大概1次

设置四个 attr({"":"","":""});

删除:removeAttr('')

 

7、样式操作

web前端,收获和安装: attr("class","")

追加:addClass('')

移除:removeClass('') 

或者removeClass('s1 s2') 

恐怕removeClass()//会删除全数样式

切换样式:toggleClass,有该样式,就删除,没有,

就添加。

是或不是有有个别样式 hasClass('')

读取css('')

设置css('','')或者

css({'':'','':''})//设置多少个样式

 

 

一、遍历节点

children():只缅想子元素,不思考任何后代成分。

next()/next(selector)

prev()/prev(selector)

siblings()/siblings(selector)

find(selector)/

parent()

 

2、事件管理机制

壹)事件绑订的措施

bind(type,fn)

二)、绑订格局的简写情势

click(function(){

});

三)、合成事件

hover(enter,leave) : 模拟光标悬停事件

toggle(fn一,fn2...):模拟鼠标延续单击事件

4)、事件冒泡

a、获得事件指标

//event不再是原本的风云目的,而

//是包裹之后的对象。

click(function(event){

});

b、结束冒泡

event.stopPropagation()

c、甘休私下认可行为

event.preventDefault()

五)、事件目的的习性

event.type

event.target:再次来到事件源(是dom对象!!!)

event.pageX/pageY: 点击的坐标

 

陆)、模拟操作

trigger('click')

 

3、动画

1)、show("slow"/"normal"/"fast"/100)  hide()

其余,还足以增加1个回调函数,比方:

show('slow',function(){

//那儿的代码会在动画实施到位之后

//才执行。

});

2)、fadeIn() fadeOut(): 淡入、淡出

改换不发光度。

fadeIn,fadeOut能够增进

"slow"/"normal"/"fast"/100参数,也可以

加上1个回调函数。

三)、slideUp() slideDown() : 更改成分的惊人

用法眼前边一样。

四)、自定义动画 animate(params,speed,callback):

params: 是一个形如  {"height":"300px","width","200px"}

speed: 单位是纳秒,表示动画实施的快慢。

callback:回调函数,动画实行到位今后,实践

该函数。

四、操作类数组的方法:

表明:jquery操作数组的办法,

$()操作再次来到的借使是二个数组,能够利用如下方法来操作

each(fn(i)):循环遍历每3个因素,this代表被迭代的dom对象,$(this)代表被迭代的jquery对象。

eq(index):重返index 1个人置处的jquery对象

index(obj):重返下标,在那之中obj能够是

dom对象恐怕jquery对象。

length:个数

get():重返dom对象组成的数组

get(index):返回index 1个dom对象。

 

 

本文由www.bifa365365.com发布于web前端,转载请注明出处:jQuery基础知识web前端

关键词: www.bifa3653