jQuery入门（四）--- jQuery语法
10、获取和设置表单元素的内容 val()11、jQuery操作属性 attr（） removeAttr()12、操作布尔类型的属性 prop（）13、jQuery尺寸和位置操作13.1 width方法和height方法（ 200√ 200px×）13.2 innerWidth / innerHeight / outerWidth / outerHeight
14、offset() 和 position()15、设置或获取页面或元素垂直滚动条的位置scrollTop（）与scrollLeft （）16、jQuery事件发展历程17、固定导航栏案例18、jQuery的on注册事件（重点）18.1 on注册简单事件18.2 on注册委托事件
19、事件解绑off方式20、触发器触发 trigger21、事件对象 event / e22、五角星评分案例23、显示迭代 each（）24、jQuery多库共存24.1 如何查看jQuery的版本24.2 如果引入多个jQuery文件，使用的$是哪一个jQuery文件中的呢？24.3 多库共存
25、jQuery插件库：jq22.com25.1常用插件25.2 颜色插件 jquery.color.js25.3 省市联动 distpicker插件25.4 jQuery UI插件的使用25.5 自己封装jQuery插件（bgColor）
10、获取和设置表单元素的内容 val()
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<body
>
<input type
="button" value
="按钮" id
="btn">
<input type
="text" id
="txt" value
="请输入账号">
<script
>
$(function(){
$('#btn').click(function(){
console
.log($('#txt').val());
$('#txt').val('我是设置的值');
})
})
</script
>
</body
>
11、jQuery操作属性 attr（） removeAttr()
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<body
>
<input type
="button" value
="获取属性" id
="btn1">
<input type
="button" value
="设置属性" id
="btn2">
<input type
="button" value
="移除属性" id
="btn3"><br
/>
<img src
="007.jpg" alt
="周五晚睡" aaa
="aaa"/>
<script
>
$(function(){
$('#btn2').click(function(){
$('img').attr({
src
:'996.jpg',
aaa
:'hahaha',
bbb
:'bbb'
});
});
$('#btn1').click(function(){
console
.log($('img').attr('src'));
console
.log($('img').attr('aaa'));
});
$('#btn3').click(function(){
$('img').removeAttr('alt aaa bbb');
})
});
</script
>
</body
>
12、操作布尔类型的属性 prop（）
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<body
>
<input type
="button" value
="按钮" id
="btn1">
<input type
="checkbox" id
="ckb1">
<script
>
$(function(){
$('#btn1').click(function(){
console
.log($('#ckb1').prop('checked'));
})
})
</script
>
</body
>
13、jQuery尺寸和位置操作
13.1 width方法和height方法（ 200√ 200px×）
+ 设置或者获取高度，不包括内边框、边框、外边框、
//带参数表示设置高度
$('img').height(200);
//不带参数表示获取高度
$('img').height( );
+ 获取网页的可视区高度
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();
13.2 innerWidth / innerHeight / outerWidth / outerHeight
+ innerWidth() / innerHeight() 方法返回元素的宽度 / 高度（包括内边距）
+ outerWidth() / outerHeight() 方法返回元素的宽度 / 高度（包括内边距和边框）
+ outerWidth(true) / outerHeight(true) 方法返回元素的宽度 / 高度（包括内边距、边框和外边距）
14、offset() 和 position()
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<style
>
*{
margin
: 0;
padding
:0;
}
.father
{
width
: 400px
;
height
: 400px
;
border
:10px solid red
;
position
: relative
;
top
: 10px
;
left
: 10px
;
}
.son
{
width
: 100px
;
height
: 100px
;
border
:10px solid green
;
position
:absolute
;
top
:100px
;
left
:100px
;
}
</style
>
</head
>
<body
>
<input type
="button" value
="offset()" id
="btn1">
<input type
="button" value
="position()" id
="btn2">
<div id
="father" class="father">
<div id
="son" class="son">
</div
>
</div
>
<script
>
$(function(){
$('#btn1').click(function(){
console
.log($('#son').offset());
});
$('#btn2').click(function(){
console
.log($('#son').position());
})
})
</script
>
</body
>
15、设置或获取页面或元素垂直滚动条的位置scrollTop（）与scrollLeft （）
//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();
//设置元素被卷曲的高度
$('#div1').scrollTop(100);
//设置页面被卷曲的宽度
$('#div1').scrollLeft(100);
16、jQuery事件发展历程
原生js给同一个元素注册不同的事件，后面的会把前面的覆盖掉
jQuery方式给同一个元素注册不同的事件，没有覆盖情况
17、固定导航栏案例
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<style
>
*{
margin
:0;
padding
:0;
}
.top
{
margin
:0 auto
;
}
.nav
{
margin
:0 auto
;
}
.main
{
margin
: 10px auto
;
height
: 2000px
;
}
img
{
display
:block
;
}
</style
>
</head
>
<body
>
<div
class="top">
<img src
="top.jpg">
</div
>
<div
class="nav">
<img src
="nav.jpg">
</div
>
<div
class="main">
<img src
="main.jpg">
</div
>
<script
>
$(function(){
var topHeight
= $('.top').height();
var navHeight
= $('.nav').height();
$(window
).scroll(function(){
var scrollTopValue
= $(window
).scrollTop();
if(scrollTopValue
> topHeight
){
$('.nav').css({
position
:'fixed',
top
:0,
left
:0
})
$('.main').css({
marginTop
:'navHeight'
})
}else{
$('.nav').css({
position
:'static',
top
:0,
left
:0
});
$('.main').css({
marginTop
:10
})
}
})
})
</script
>
</body
>
18、jQuery的on注册事件（重点）
18.1 on注册简单事件
//表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定
$(selector).on('click',function(){
})
18.2 on注册委托事件
//表示给 $(selector) 绑定代理事件。当必须是他的内部元素div和span才能触发这个事件，支持动态绑定
//这里是selector是div和span的父元素，给父元素绑定事件，指定的子元素可触发该事件，此时this为点击的指定子元素，原理为事件冒泡。
$(selector).on('click' , 'div，span' , function(){
})
19、事件解绑off方式
//解绑匹配元素的所有事件
$(selector).off();
//解绑匹配元素的所有指定的事件（如click事件）
$(selector).off('click');
20、触发器触发 trigger
点击按钮触发事件，若要实现达到某条件触发，可用代码的方式来触发事件触发自定义事件
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<style
>
.one
{
height
: 100px
;
width
: 100px
;
border
:1px solid red
;
}
</style
>
</head
>
<body
>
<input type
="button" value
="按钮1" id
="btn1">
<input type
="button" value
="按钮2" id
="btn2">
<div id
="one" class="one"></div
>
<script
>
$(function(){
$('#one').on('click',function(){
console
.log('单击事件');
})
var i
=0;
$('#btn1').on('click',function(){
i
++;
if(i
==3){
$('#one').trigger('click');
}
})
$('#one').on('linge',function(){
console
.log('lalala');
})
$('#btn2').on('click',function(){
var res
=confirm('请问林哥帅吗');
if(res
){
$('#one').trigger('linge');
}
})
})
</script
>
</body
>
21、事件对象 event / e
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<style
>
* {
margin
:0;
padding
:0;
}
body
{
width
: 2000px
;
height
: 2000px
;
}
.one
{
width
: 200px
;
height
: 200px
;
border
: 1px solid red
;
position
:relative
;
top
: 100px
;
left
:100px
;
}
</style
>
</head
>
<body
>
<div id
="one" class="one">
<input type
="button" value
="按钮" id
="btn"/>
<br
/>
<a href
="https://www.daidu.com">百度一下，你就知道
</a
>
</div
>
<script
>
$(function(){
$('#one').on('click',function(e
){
console
.log('screenx'+':'+e
.screenX
+'-' +'screeny'+':'+e
.screenY
);
console
.log('clientx'+':'+e
.clientX
+ '-'+'clienty'+':'+e
.clientY
);
console
.log('pagex'+':'+e
.pageX
+ '-'+'pagey'+':'+e
.pageY
);
alert('我是div的单击事件');
$('#btn').on('click',function(e
){
alert('我是按钮的单击事件');
e
.stopPropagation();
})
$('a').on('click',function(e
){
alert('我是a标签的单击事件');
e
.stopPropagation();
e
.preventDefault();
return false;
})
$(document
).on('keydown',function(e
){
console
.log(e
.keyCode
);
})
})
})
</script
>
</body
>
22、五角星评分案例
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<style
>
li
{
list
-style
: none
;
float
:left
;
font
-size
:30px
;
}
</style
>
</head
>
<body
>
<ul
class="comment">
<li
>☆
</li
>
<li
>☆
</li
>
<li
>☆
</li
>
<li
>☆
</li
>
<li
>☆
</li
>
</ul
>
<script
>
$(function(){
$('.comment>li').on('mouseenter',function(){
$(this).text('★').prevAll().text('★');
$(this).nextAll().text('☆');
}).on('mouseleave',function(){
$('.comment>li').text('☆');
$('.comment>li[clickCurrent]').text('★').prevAll().text('★') ;
}).on('click',function(){
$(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent');
})
})
</script
>
</body
>
23、显示迭代 each（）
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<style
>
li
{
list
-style
:none
;
display
: block
;
float
:left
;
margin
:10px
;
width
: 340px
;
height
: 340px
;
background
-color
: pink
;
}
</style
>
</head
>
<body
>
<ul id
="ulList">
<li
>什么都看不见
</li
>
<li
>什么都看不见
</li
>
<li
>什么都看不见
</li
>
<li
>什么都看不见
</li
>
<li
>什么都看不见
</li
>
<li
>什么都看不见
</li
>
<li
>什么都看不见
</li
>
<li
>什么都看不见
</li
>
<li
>什么都看不见
</li
>
<li
>什么都看不见
</li
>
</ul
>
<script
>
$(function(){
var $lis
= $('#ulList').children();
$lis
.each(function(index
,element
){
$(element
).css('opacity',(index
+1)/10);
})
})
</script
>
</body
>
24、jQuery多库共存
24.1 如何查看jQuery的版本
Console.log(jQuery.fn.jquery);
Console.log(jQuery.prototype.jquery)
Console.log($.fn.jquery)
Console.log($.prototype.jquery)
24.2 如果引入多个jQuery文件，使用的$是哪一个jQuery文件中的呢？
console.log($.fn.jquery)
哪个文件后引入，$ 就默认使用哪个文件的
24.3 多库共存
$.noConflict(); //把$符号的控制权给释放了,jquery的版本变为引入的上一个jQuery库的版本
Console.log(jQuery.fn.jquery);
Console.log($.fn,jquery);
25、jQuery插件库：jq22.com
25.1常用插件
+ 颜色插件
+省市联动插件
+jQueryUI
+查看jQuery插件的源码
25.2 颜色插件 jquery.color.js
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<script src
="https://cdn.bootcss.com/jquery-color/2.1.2/jquery.color.js"></script
>
<style
>
div
{
width
: 200px
;
height
: 200px
;
background
-color
: red
;
position
: relative
;
top
:0;
left
:0;
}
</style
>
<body
>
<input type
="button" value
="按钮" id
="btn">
<div
></div
>
<script
>
$(function(){
$('#btn').on('click',function(){
$('div').animate({
width
:100,
height
:100,
left
: 800,
backgroundColor
:'green'
},2000)
})
})
</script
>
</body
>
25.3 省市联动 distpicker插件
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<script src
="distpicker.data.js"></script
>
<script src
="distpicker.js"></script
>
</head
>
<body
>
<div id
="one">
<select name
=""></select
>
<select name
=""></select
>
<select name
=""></select
>
</div
>
<script
>
$(function(){
$('#one').distpicker({
province
:"福建省",
city
:"厦门市",
district
:"湖里区"
});
})
</script
>
</body
>
25.4 jQuery UI插件的使用
下载插件（jq22.com）-- 引入插件 -- 复制需要的文件到自己的项目中 -- 在下载的插件文件index.html中查看原代码，
复制框架到自己的项目中并修改---复制调用代码到自己项目中
25.5 自己封装jQuery插件（bgColor）
<script src
="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script
>
<script src
="jQuery-bgColor.js"></script
>
</head
>
<body
>
<div
></div
>
<p
></p
>
<script
>
$(function(){
$('div').width(100).height(100).bgColor('red');
})
</script
>
</body
>
(function($
){
$
.fn
.bgColor = function(yanse
){
this.css('backgroundColor',yanse
)
return this;
}
}(jQuery
))
