定义: jquery是JS的一个函数库
作用: 负责网页交互
优点: 兼容主流浏览器, 简化JS编程过程, 提高开发效率
< scriptsrc = " JS/jquery-1.12.4.min.js" > </ script> < script> 代码 </ script> js对象 ----> jquery对象
oDiv ----> $(oDiv)
Jquery对象 ----> js对象
$Div ----> $Div[0]
> var oDiv = document. getElementById ( 'box' )
undefined
> oDiv;
< div id= "box" > 这是一个div < / div>
> var $Div = $ ( oDiv)
undefined
> $Div
n. fn. init [ div#box, context : div#box]
> $Div[ 0 ]
< div id= "box" > 这是一个div < / div>
> $Div[ 1 ]
undefined
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < scriptsrc = " JS/jquery-1.12.4.min.js" > </ script> < script> $ ( function ( ) {
var result = $ ( 'div' ) ; console. log ( result. length) ; console. log ( $ ( '#box' ) . length) ; console. log ( $ ( '.box' ) . length) ; console. log ( $ ( 'div p' ) . length) ; console. log ( $ ( 'div[class="box"]' ) . length) ; } ) ; </ script> </ head> < body> < divid = " box" class = " box" > < p> </ p> </ div> < div> < p> </ p> </ div> </ body> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < scriptsrc = " Js/jquery-1.12.4.min.js" > </ script> < script> $ ( function ( ) {
$ ( 'div' ) . css ( {
'background' : 'red' } ) ; $ ( 'div' ) . has ( 'p' ) . css ( {
'font-size' : '28px' , 'background' : 'pink' } ) ; $ ( 'div' ) . eq ( 1 ) . css ( {
'color' : 'green' } ) ; } ) ; </ script> </ head> < body> < div> < p> </ p> </ div> < div> < br> </ div> </ body> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < scriptsrc = " JS/jquery-1.12.4.min.js" > </ script> < script> $ ( function ( ) {
$li = $ ( '#box' ) ; $li. css ( {
'background' : 'red' } ) ; $li. prev ( ) . css ( {
'background' : 'green' } ) ; $li. prevAll ( ) . css ( {
'color' : 'blue' } ) ; $li. next ( ) . css ( {
'background' : 'yellow' } ) ; $li. nextAll ( ) . css ( {
'color' : 'orange' } ) ; $li. siblings ( ) . css ( {
'font-size' : '26px' } ) ; $ ( 'ul' ) . parent ( ) . css ( {
'background' : 'pink' } ) ; $ ( 'div' ) . children ( ) . css ( {
'background' : 'blue' } ) ; $ ( 'div' ) . find ( '.c_p' ) . css ( {
'color' : 'red' } ) ; $ ( 'div' ) . has ( '.c_p' ) . css ( {
'font-size' : '30px' } ) ; } ) ; </ script> </ head> < body> < ul> < li> </ li> < li> </ li> < liid = " box" > </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < div> < p> </ p> </ div> < div> < pclass = " c_p" > </ p> </ div> </ body> </ html>
获取标签内容: 标签对象.html()
设置标签内容: 标签对象.html('内容')
追加标签内容: 标签对象.append('内容')
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < scriptsrc = " js/jquery-1.12.4.min.js" > </ script> < script> $ ( function ( ) {
var sResult = $ ( 'div' ) . html ( ) ; alert ( sResult) ; $ ( 'div' ) . html ( 'good good study!' ) ; $ ( 'div' ) . append ( '<a href="http://www.baidu.com">百度</a>' ) ; } ) ; </ script> </ head> < body> < div> </ div> </ body> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < scriptsrc = " JS/jquery-1.12.4.min.js" > </ script> < script> $ ( function ( ) {
var $A = $ ( 'a' ) ; alert ( $A . prop ( 'href' ) ) ; $A . prop ( {
'href' : 'https://www.csdn.net/' , 'target' : '_blank' } ) ; } ) ; function fnClick ( ) {
alert ( $ ( '#box' ) . prop ( 'value' ) ) ; } ; function fnAdd ( ) {
var result = $ ( '#box' ) . val ( ) ; result = parseInt ( result) ; $ ( '#box' ) . val ( result + 10 ) ; } ; </ script> </ head> < body> < div> < ahref = " http://www.baidu.com" > </ a> </ div> < div> < inputtype = " text" name = " " id = " box" value = " 10" > < inputtype = " button" value = " 点击获取 input 内容" onclick = " fnClick ( ) " > < inputtype = " button" value = " 点击, 对 input 的数字 + 10显示" onclick = " fnAdd ( ) " > </ div> </ body> </ html>
鼠标点击: click()
失去焦点: blur()
获得焦点: focus()
鼠标进入: mouseover()
鼠标离开: mouseleave()
页面标签加载完成: $(document).ready()
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> div {
width : 200px; height : 80px; background : red; font-size : 26px; } </ style> < scriptsrc = " js/jquery-1.12.4.min.js" > </ script> < script> $ ( function ( ) {
$ ( 'div' ) . click ( function ( ) {
console. log ( '鼠标点击了: ' , $ ( this ) . html ( ) ) ; } ) ; $ ( 'div' ) . mouseover ( function ( ) {
console. log ( '鼠标进入了' ) ; $ ( this ) . css ( {
'background' : 'blue' } ) ; } ) ; $ ( 'div' ) . mouseleave ( function ( ) {
console. log ( '鼠标离开了' ) ; $ ( this ) . css ( {
'background' : 'red' } ) ; } ) ; $ ( 'input' ) . focus ( function ( ) {
$ ( this ) . prop ( {
'placeholder' : '' } ) ; $ ( this ) . css ( {
'font-size' : '28px' } ) ; } ) ; $ ( 'input' ) . blur ( function ( ) {
$ ( this ) . prop ( {
'placeholder' : '请输入内容' } ) ; $ ( this ) . css ( {
'font-size' : '' } ) ; } ) ; } ) ; </ script> </ head> < body> < div> </ div> < inputtype = " text" placeholder = " 请输入内容" > </ body> </ html>
事件代理: 使用事件冒泡的原理, 让父标签代理子标签的事件
$(父标签选择器).delegate(子标签选择器, 代理事件, 处理函数);
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> .box1 {
width : 300px; height : 300px; background : red; } .box2 {
width : 100px; height : 100px; background : pink; } </ style> < scriptsrc = " js/jquery-1.12.4.min.js" > </ script> < script> $ ( function ( ) {
$ ( 'div' ) . click ( function ( ) {
$ ( this ) . css ( {
'background' : 'blue' } ) ; } ) ; } ) ; </ script> </ head> < body> < divclass = " box1" > < divclass = " box2" > </ div> </ div> </ body> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < scriptsrc = " js/jquery-1.12.4.min.js" > </ script> < script> $ ( function ( ) {
$ ( 'li' ) . click ( function ( ) {
console. log ( $ ( this ) . html ( ) ) ; } ) ; } ) ; function fnClick ( ) {
$ ( 'ul' ) . append ( '<li>文字' + ( $ ( 'li' ) . length+ 1 ) + '</li>' ) ; } ; </ script> </ head> < body> < ul> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < inputtype = " button" value = " 点击添加li标签" onclick = " fnClick ( ) " > </ body> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < scriptsrc = " js/jquery-1.12.4.min.js" > </ script> < script> $ ( function ( ) {
$ ( 'ul' ) . delegate ( 'li' , 'click' , function ( ) {
console. log ( $ ( this ) . html ( ) ) ; } ) ; } ) ; function fnClick ( ) {
$ ( 'ul' ) . append ( '<li>文字' + ( $ ( 'li' ) . length+ 1 ) + '</li>' ) ; } ; </ script> </ head> < body> < ul> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < inputtype = " button" value = " 点击添加li标签" onclick = " fnClick ( ) " > </ body> </ html>
文章评论