[code]<script src="../js/jquery-1.11.0.min.js"></script>
<body>
<input type="text" id="username" value="jack"/>
</body>
<script>
//通过原生js
//alert(document.getElementById("username").value)

//通过jquery 获取jquery对象
var $username=$("#username");
//var $username=jQuery("#username");
alert($username.val());
</script>

dom对象和jquery对象之间的转换

dom对象===>jquery对象
$(dom对象)

[code]	<script>
//dom >>>>jquery   $(dom对象)
//1.获取dom对象
var obj=document.getElementById("username");
//2.转化
var $user=$(obj);
alert($user.val());
//alert($user.value);错误的
</script>

jquery对象===>dom对象
方式1:
jquery对象[index]

[code]	<script>
//jquery>>>>dom
//1.获取jquery独享
var $u=$("#username");
//2.转换
//方式1
var obj = $u[0];
alert(obj.value);
</script>

方式2:
jquery对象.get(index)

[code]	<script>
//jquery>>>>dom
//1.获取jquery独享
var $u=$("#username");
//2.转换
//方式2
var obj=$u.get(0);
alert(obj.value);
</script>

页面加载:

js:
window.οnlοad=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次
方式1:
$(function(){...})
方式2:
$(document).ready(function(){...});
[code]		<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
onload=function(){
alert(12);
}

/*onload=function(){
alert(34);
}*/

$(function(){
alert("abc");
})

$(function(){
alert("ab1c");
})

$(function(){
alert("ab3c");
})
</script>

派发事件:

$("选择器").click(function(){...});//去掉 on οnclick=>click
等价于原生js中
dom对象.οnclick=function(){....}
[code]		<script type="text/javascript">
$(function(){
//派发事件
$("#bId").click(function(){
alert(123)
});
});
</script>

掌握事件:

focus
blur
submit
change
click

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#e01")
.blur(function(){
$("#textMsg").html("文本框失去焦点：blur");
})
.focus(function(){
$("#textMsg").html("文本框获得焦点：focus");
})
.keydown(function(){
$("#textMsg").append("键盘按下：keydown");
})
.keypress(function(event){
$("#textMsg").append("键盘按：keypress");
})
.keyup(function(){
$("#textMsg").append("键盘弹起：keyup");
});

var i = 0;
$("#e02").mouseover(function(){
$("#divMsg").html("鼠标移上：mouseover");
}).mousemove(function(){
//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
}).mouseout(function(){
$("#divMsg").html("鼠标移出：mouseout");
}).mousedown(function(){
$("#divMsg").html("鼠标按下：mousedown");
}).mouseup(function(){
$("#divMsg").html("鼠标弹起：mouseup");
});

$("#e03").click(function(){
$("#buttonMsg").html("单击：click");
}).dblclick(function(){
$("#buttonMsg").html("双击：dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span> <br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>

jquery中效果

隐藏或展示

show(毫秒数)

hide(毫秒数)

toggle(毫秒数) //切换

滑入或滑出

slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出

淡入或淡出

fadeIn(int):淡入
fadeOut(int):淡出

[code]	<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
//藏b1div
$("#b1").click(function(){
//$("#b1Div").hide(1000);

//$("#b1Div").hide();

//切换
$("#b1Div").toggle(1000);
});

//滑出/滑入b2Div
$("#b2").click(function(){
//$("#b2Div").slideUp(2000);

$("#b2Div").slideToggle(1000);
});

//出/淡入b3Div
$("#b3").click(function(){
$("#b3Div").fadeOut(1000);
});
})
</script>

<body>
<input type="button" id="b1" value="显示/隐藏 b1Div" />
<div id="b1Div"></div> <br/>
<input type="button" id="b2" value="滑出/滑入b2Div"/>
<div id="b2Div"></div> <br/>
<input type="button" id="b3" value="淡出/淡入b3Div" />
<div id="b3Div"></div>
</body>

案例1-弹出广告

步骤分析：

1.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();

2.编写展示广告方法

获取div,然后调用效果方法
设置另一个定时器隐藏

3.编写隐藏广告的方法

获取div,然后调用效果方法

[code]		<script src="../js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
//开启一个定时器 2秒之后展示div
setTimeout(showAd,2000);
});

//编写展示的方法
function showAd(){
//获取div,调用效果
//$("#ad").show(1000);
//$("#ad").slideDown(1000);
$("#ad").fadeIn(1000);
//开启另一个隐藏的定时器
setTimeout("hideAd()",3000);
}

//编写隐藏方法
function hideAd(){
//$("#ad").hide(1000);
//$("#ad").slideUp(1000);
$("#ad").fadeOut(1000);
}
</script>

<div id="ad" style="width:100%;display: none;">
<img src="../img/ad_.jpg" width="100%" />
</div>

选择器总结

基本选择器★

$("#id值") $(".class值") $("标签名")

了解:$("*") 所有

理解:获取多个选择器用逗号隔开

$("#id值,.class值")

[code] <script type="text/javascript">
$(function(){
//<input type="button" value="选择 id为 one 的元素." id="btn1"/>
$("#btn1").click(function(){
$("#one").css("background-color","#ff0");
});
//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
$("#btn2").click(function(){
$(".mini").css("background-color","#ff0");
});
// <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
$("#btn3").click(function(){
$("div").css("background-color","#ff0");
});
// <input type="button" value="选择 所有的元素." id="btn4"/>
$("#btn4").click(function(){
$("*").css("background-color","#ff0");
});
//<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
$("#btn5").click(function(){
$("span,#two").css("background-color","#ff0");
});
})
</script>

层次选择器 ★

a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟

[code] <script type="text/javascript">
$(function(){
// 		<input type="button" value="选择 body内的所有div元素." id="btn1"/>
$("#btn1").click(function(){
$("body div").css("background-color","#f0f");
});
//		<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
$("#btn2").click(function(){
$("body>div").css("background-color","#f0f");
});
//		<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
$("#btn3").click(function(){
$("#one+div").css("background-color","#f0f");
});
//		<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
$("#btn4").click(function(){
$("#two~div").css("background-color","#f0f");
});
})
</script>

基本过滤选择器:★

:frist 第一个——div:first
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <

[code] <script type="text/javascript">
$(function(){
// 		 <input type="button" value="选择第一个div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:first").css("background-color","#0f0");
});
//		  <input type="button" value="选择最后一个div元素." id="btn2"/>
$("#btn2").click(function(){
$("div:last").css("background-color","#0f0");
});
//		  <input type="button" value="选择索引值为偶数 的div元素." id="btn3"/>
$("#btn3").click(function(){
$("div:even").css("background-color","#0f0");
});
//		  <input type="button" value="选择索引值为奇数 的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:odd").css("background-color","#0f0");
});
//		  <input type="button" value="选择索引值等于3的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div:eq(3)").css("background-color","#0f0");
});
//		  <input type="button" value="选择索引值大于3的div元素." id="btn6"/>
$("#btn6").click(function(){
$("div:gt(3)").css("background-color","#0f0");
});
});
</script>

内容过滤:

:has("选择器"):包含指定选择器的元素

[code] <script type="text/javascript">
// <input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/>
$(function(){
$("#btn1").click(function(){
$("div:has('.mini')").css("background-color","#0ff");
});
});
</script>

可见过滤:

:hidden 在页面不展示元素一般指 input type="hidden" 和样式中display:none
:visible

[code] <script type="text/javascript">
$(function(){
// 		 <input type="button" value=" 选取所有可见的div元素"  id="b1"/>
$("#b1").click(function(){
$("div:visible").css("background-color","#f0f");
});
//		<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
$("#b2").click(function(){
$("div:hidden").css("background-color","#f0f").show(1000);
});
});
</script>

属性过滤器:★

[属性名]
[属性名="值"] （!= ^= *= $=）

[code] <script type="text/javascript">
$(function(){
// 		<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
$("#btn1").click(function(){
$("div[title]").css("background-color","#ff0");
});
//		<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
$("#btn2").click(function(){
$("div[title='test']").css("background-color","#ff0");
});
});
</script>

表单过滤:

:input 所有的表单子标签 input select textarea button
input 只要input 标签

[code] <script type="text/javascript">
$(function(){
//<input type="button" value="选取所有的表单子元素" id="btn1"/>
$("#btn1").click(function(){
//alert($("#form1 :input").size());  16
//alert($("#form1 :input").length);
alert($("#form1 input").size());//去掉不是input 的 个数
});
});
</script>

案例2-隔行换色

技术分析:

1.页面加载成功
2.获取所有的（大于0行的）奇数行添加一个css
3.获取所有的（大于0行的）偶数行添加一个css
[code]		<script>
$(function(){
/*$("tr:odd").css("background-color","#BCD68D");
$("tr:even").css("background-color","#FFFFCC");*/

/*$("tr:gt(0):odd").css("background-color","#BCD68D");
$("tr:gt(0):even").css("background-color","#FFFFCC");*/

$("tr:gt(0):odd").addClass("odd");
$("tr:gt(0):even").addClass("even");
})
</script>

属性和css操作总结

对属性的操作

attr():设置或者获取元素的属性

方式1:获取

attr("属性名称")

方式2:设置一个属性

attr("属性名称","值");

方式3:设置多个属性 json

attr({
"属性1":"值1",
"属性2":"值2"
})

removeAttr("属性名称"):移除指定属性

添加class属性的时候

1、attr("class","值");

2、addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
removeClass("指定的样式值");

对css操作

操作元素的style属性

css():获取或者设置css样式

方式1:获取

css("属性名")

方式2:设置一个属性

css("属性名","值")

方式3:设置多个

css({
"属性1":"值1",
"属性2":"值2"
});

获取元素的位置和尺寸

offset()

width()
height()

[code]	<script type="text/javascript">
$(document).ready(function(){
//1.1给username添加title属性
var $username=$("[name='username']");
$username.attr("title","姓名");

//1.2获取username的title属性
alert($username.attr("title"));

//1.3给username添加value和class属性
$username.attr({
"value":"许多多",
"class":"textClass"
});

//1.4删除username的class属性
$username.removeAttr("class");

//2.1给username添加一个名为textClass的样式
$username.addClass("textClass");

//2.2删除username的名为textClass的样式
$username.removeClass("textClass");

//4.1 给div添加边框样式
var $div=$("div");
$div.css("border","1px solid red");

//4.2 获取div的表框样式
//alert($div.css("border"));

//4.3 给div添加多种样式
$div.css({
"width":"100px",
"height":"100px",
"background-color":"#ff0"
});

//5 获取div的位置
alert($div.offset().left)

//6 获取div的高和宽
alert($div.width());
});
</script>

案例3-全选或者全不选

需求:

就是将内容中复选框的选中状态和最上面的复选框状态保持一致

步骤分析:

1.确定事件复选框的单击事件
2.函数中
a.获取当前复选框的选中状态 attr(获取不了checked属性)|prop
b.获取所有的复选框修改他们的状态

注意:

若jquery版本>1.6 统一使用 prop操作元素的属性

[code] 	<script type="text/javascript">
$(function(){
$("#selectAll").click(function(){
//1.获取当前元素的选中状态 this在funcation中代表的是当前dom对象
//alert(this.checked);

//jQuery对象，获取属性
//alert($(this).attr("checked"));//获取undefined
//alert($(this).prop("checked"));

//2.获取所有的复选框 让其状态和 当前元素的选中状态保持一致
$(".itemSelect").prop("checked",$(this).prop("checked"));
});

});
</script>

jQuery数据遍历、val设置、标签设置、元素创建

遍历数组

数组.each(function(){});——用 this 或者参数对属性进行操作
[code]  <script type="text/javascript">
$(function(){
$("#b1").click(function(){
//1.获取文本隐藏
//alert($("input:hidden").size())

$("input:hidden").each(function(index,dom){
//function不带参数时，用this
//alert(this.value)
//alert($(this).val());

//function带有参数时，第一个为索引，第二个为dom对象
alert(index)//索引
alert(dom.value)
});
});
</script>
$.each(数组对象,function(){});
[code] <script>
$("#b2").click(function(){
$.each($("input:hidden"), function() {
alert($(this).val());
});
});
});
</script>
注意:

each的function中可以加两个参数 index和dom
index是当前遍历的索引值
dom指代的是当前遍历的dom对象(开发中一般使用this即可)

设置或者获取value属性

jquery对象.val():获取
jquery对象.val("...."):设置

[code]	<script type="text/javascript">
$(document).ready(function(){

var $username=$("[name='username']");
$username.prop("value","许木木");

//3.1 获取 username的value属性的值
//alert($username.val());

//3.2 设置 username的默认值为"许多多"
$username.val("许多多")

</script>

设置获取获取标签体的内容

html()
text()

xxxxx():获取标签体的内容
xxxxx("....."):设置标签体的内容

[code]	<script type="text/javascript">

//3.3通过html获取div标签体的内容
var $div=$("div");
alert($div.html());

//3.4通过html设置div标签体的内容
$div.html("已满18,请带墨镜");

//3.5通过text获取div标签体的内容
alert($div.text());

//3.6通过text设置div标签体的内容
$div.text("已满18,请带墨镜");

</script>

设置的区别:

html:会把字符串解析
text:只做为普通的字符串

获取的区别:

html:获取的html源码
text:获取只是页面展示的内容

[code]
<script type="text/javascript">

//3.7 两者设置值的区别
$div.html("<a href='#'>我是一个连接</a>");//就是一个超链接
$div.text("<a href='#'>我是一个连接</a>");//表括号里面的内容作为普通的字符串

//3.8 两者获取值的区别
alert($("#sp").html());//获取源码 外span<a href='#'>内超链</a></span>
alert($("#sp").text());//获取只是展示的内容  外span内超链

</script>

创建一个元素: $("<标签></标签>")

[code]	<script type="text/javascript">

//创建一个元素: $("<标签></标签>")
$div.html($("<a href='#'>").html("我"));
});
</script>

追加元素——文档操作

内部插入

a.append(c):将c插入到a的内部(标签体)后面——尾
a.prepend(c):将c插入到a的内部的前面——头
[code]	<script type="text/javascript">
$(document).ready(function(){
//0.获取两个元素
var $city=$("#city");
var $fk=$("#fk");

//1.在city的后面内部追加 反恐——添加到末尾
//$city.append($fk);

//2.在city的前面内部插入 反恐——添加到头部
$city.prepend($fk)
});
</script>
appendTo
prependTo

外部插入

a.after(c):将c放到a的后面
a.before(c):将c放到a的前面
[code]	<script type="text/javascript">
$(document).ready(function(){
//获取两个元素
var $city=$("#city");
var $p2=$("#p2");

//1.在 p2 的后面插入 city
$p2.after($city);

//2.在 p2 的前面插入 city
$p2.before($city);
});
</script>
a.insertAfter(c)
a.insertBefore(c)

删除

empty() 清空元素——原码中还有
remove() 删除元素
[code]	<script type="text/javascript">
$(document).ready(function(){
//1.清空ul
//$("#city").empty();

//2.移除天津 remove
$("#tj").remove();
});
</script>

案例4-省市联动

步骤分析:

1.确定事件省份的下拉选变化的时候 change

2.编写函数

a.获取当前省份的value值

b.通过数组获取该省下的所有市返回值:数组

c.遍历数组,拼装成option元素追加到市下拉选即可 append

注意:每次改变的时候初始化市的值.
[code]	<script type="text/javascript">
$(function(){
$("[name='pro']").change(function(){
//1、获取市下拉选
var $city=$("[name='city']");
//2、先初始化 市选项
$city.html($("<option>").html("-请选择-"));

//3、省所在的数字下标
var pro=$(this).val();

//4、获取所有的市数组，转为jQuery对象
var cities=$(arr[pro]);
//alert(cities);

//遍历数组,拼装成option 追加到市下拉选中
cities.each(function(){
$city.append("<option>"+this+"</option>");
//$city.html("<option>"+this+"</option>"); //每次只写一个
});
});
});
</script>

选择器——表单对象属性过滤选择器

:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选)

案例5-左右移动

步骤分析:

1.确定事件单击事件
2.编写函数:
移动一个:
右边的下拉选追加一个左边的选中的第一个
移动多个:
左边选中的追加到右边的下拉选中
移动全部:
将左边的所有option追加到右边的下拉选中
[code]	<script type="text/javascript">
$(function(){
//移动一个
$("#toRight1").click(function(){
//儿子选择器 ">"
$("#left>option:selected:first").appendTo($("#right"));
});

//移动多个
$("#toRight2").click(function(){
//后代选择器 " "
$("#right").append($("#left option:selected"));
});

//移动全部
$("#toRight3").click(function(){
$("#right").append($("#left option"));
});
})
</script>

总结

js类库:
对常见的方法和对象进行了封装,方便开发.
jquery和html的整合
script标签的src属性导入即可
获取jquery对象
$("选择器") jQuery("选择器")
dom对象和jquery对象之间的转换
dom>>>jquery
$(dom对象)
jquery>>>dom
方式1:
jquery对象[index]
方式2:
jquery对象.get(index)
jquery中的选择器:
基本选择器★
$("#id值") $(".class值") $("标签名") $("#one,#two,.mini")
层次选择器★
a b:后代
a>b:孩子
a+b:大弟弟
a~b:弟弟们

基本过滤选择器
:frist :last
:odd :even
:eq(index) :gt|lt..
内容过滤
:has(选择器)
可见性过滤
:visible
:hidden 指代是 input type=hidden 和 display:none
表单的过滤
:input
属性选择器:
[属性]
[属性=值]
表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
★:selected 选中的(针对于下拉选)

派发事件:
jquery对象.事件(function(){.....});
例如:
$("#btn1").click(function(){.....});

页面加载成功
$(function(){
......
})

$(document).ready(function(){
////
});

属性和css
attr():设置或者获取属性(1.6版本之前)
attr("属性名"):获取
attr("属性名","值"):设置一个
attr({
"属性名":"值",
"属性名":"值"
})

prop():和attr用法一致(1.6版本之后)

(了解)addClass("存在的样式")

removeAttr()
(了解)removeClass()

css():设置获取获取元素的样式
css("属性"):获取
css("属性","值"):设置
css({
"":"",
"":"",
"":""
}):设置多个

width()
heigh

文档处理:
内部插入(2组方法任意掌握一组)
外部插入(2组方法任意掌握一组)
删除(empty remove)

val、html、text

val :设置或者获取values属性
html:获取或者设置标签体内容

遍历数组
方式1:
jquery对象.each(function(){});
方式1:
$.each(jquery对象,function(){});

在jquery中创建元素
$("<标签名>").prop(属性).html(内容)

附件：相关代码、文档、学习视频https://download.csdn.net/download/qq_38247809/12569224

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航