目录
一、初步认识jQuery
1、之前的js,会发现onload事件在写是时候，只能写一次
<script>
window.onload = function(){
alert("one")
}
window.onload = function(){
alert("two")
}
function fun01(){
alert("我是第一个函数")
}
function fun02(){
alert("我是第二个函数")
}
window.onload =fun
window.onload = fun02
</script>结论：window.onload事件只能书写一次。如果，现在fun01与fun02都需要执行，怎么办？可以更改代码
1.1 jQuery使用
如果需要使用jQuery需要导入jQuery的库，就是一个js文件
<script src="js/jquery-1.12.4.js"></script>基本语法
<script>
//window.onload
$(function(){
alert("one")
})
//
$(document).ready(function(){
alert("two")
})
jQuery(function(){
alert("three")
})
jQuery(document).ready(function(){
alert("four")
})
$(function(){
fun01()
})
function fun01(){
alert("函数1")
}
</script>| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 |
| 编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
| 简化写法 | 无 | $(function(){ //执行代码}) ; |
1.2 节点类型
元素节点 文本节点 属性节点
1.3 Dom对象和jQuery对象
之前在js的时候，获取元素节点，全部是获取的Dom对象 document.getElementXXXX全部获取的都是Dom对象，Dom对象只能使用Dom的属性和方法
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
var v = $("#div").html()
console.log(v)
})
</script>说明: $("#div") 选择器 如何使用jQuery快速的定位元素
1.4 jQuery语法
$(选择器).方法()
$()称为工厂函数
dom对象和jQuery对象的相互转换
<script>
//window.onload
$(function(){
$("h1").css("background-color","red")
//$("h1")是jQuery对象，此时获取的元素是一个集合，可以从中拿到想要的元素，调用get方法，传递索引，获取的对象是Dom对象
var h1Ele = $("h1").get(0)//获取第一个h1标签，此时获取的标签的类型是dom对象
h1Ele.style.backgroundColor="blue"//只能使用dom的方法
//document.getElementXXX获取的是dom元素
var pEle = document.getElementsByTagName("p")[0];//dom元素
var $p = $(pEle)//工厂函数将一个dom对象转换为jQuery对象
$p.css("background-color","orange")//可以使用jQuery的方法
})
</script> 页面中有个按钮，点击按钮的时候，给页面中的h1标签添加已经定义好的风格
二、选择器
2.1 基本选择器
| 名称 | 语法构成 | 描述 | 示例 |
|---|---|---|---|
| 标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
| 类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
| ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
| 并集选择器 | s1,s2……sn | 将每个选择器匹配的元素合并 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
| 交集选择器 | Ele.class或ele#id | 匹配指定clss或id的某个元素 | $("h2.title")选取所有拥有class为title的h2元素 |
| 全局选贼 | * | 匹配所有元素 | $("*" )选取所有元素 |
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//$("*").css("background-color","red") //* 全局选择器
/*$("h1").css("background-color","red") //标签选择器
$(".one").css("color","orange") //类选择器，通过.命名的
$("#one").css("color","blue") //id选择器，id选择器是通过#命名的*/
//$("h1.one").css("color","red")//交集选择器
$("div,.one").css("color","red")//并集选择器
})
</script>
</head>
<body>
<h1 class="one">标题1</h1>
<p class="one">段落</p>
<div>div</div>
<h1 id="one">标题1</h1>
<h1 class="two">标题1</h1>
</body>2.2 后代选择器
| 名称 | 语法构成 | 描述 | 示例 |
|---|---|---|---|
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant（后代）元素 | $("#menu span" )选取#menu下的<span>元素 |
| 子选择器 | parent>child | 选取parent元素下的child（子）元素 | $(" #menu>span" )选取#menu的子元素<span> |
| 相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> |
| 同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl> |
2.3 属性选择器
| 名称 | 语法构成 | 描述 | 示例 |
|---|---|---|---|
| 属性选择器 | [attribute] | 选取包含给定属性的元素 | $(" [href]" )选取含有href属性的元素 |
| [attribute=value] | 选取等于给定属性是某个特定值的元素 | $(" [href ='#']" )选取href属性值为“#”的元素 | |
| [attribute !=value] | 选取不等于给定属性是某个特定值的元素 | $(" [href !='#']" )选取href属性值不为“#”的元素 | |
| [attribute ^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^='en']" )选取href属性值以en开头的元素 | |
| [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素 | |
| [attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* ='txt']" )选取href属性值中含有txt的元素 | |
| [selector] [selector2] [selectorN] | 选取满足多个条件的复合属性的元素 | $("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素 |
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
// $("#menu span").css("color","red") // #menu下的所有的span元素
// $("#menu>span").css("color","red") //#menu下的子元素
// $(".one+h2").css("color","red")//相邻兄弟选择器，往后，找相邻
//$("h2.one~h2").css("color","red")//同辈兄弟选择器，往后找。
//$("a[href][title='one']").css("background-color","red") //a标签，有href属性的，而且title属性的值=one
//$("a[title][title!='one']").css("background-color","red")//注意区分a[title!='one']区别在于a[title!='one'] 如果标签中不包含title属性也是满足条件的。a[title][title!='one']a标签，而且要有title属性，并且title属性的值不能是one
//$("a[title^='f']").css("background-color","red")//a标签中有title属性并且属性的值以f开头
//$("a[title$='e']").css("background-color","red")//以e结尾的
$("a[title*='o']").css("background-color","red")//包含字母o
})
</script>
</head>
<body>
<div id="menu">
aa
<span class="one">商品查看列表</span>
<dl>
<dt>生活用品<span>特价</span></dt>
<dd><a name="mark">mark</a> <a href="#" title="one">最低价格</a> <a href="#" title="two">最多折扣</a> <a href="#"><span>销量最多</span></a></dd>
</dl>
<h2>全部产品分类</h2>
<dl>
<dt>生活用品<span>特价</span></dt>
<dd><a href="#">最低价格</a> <a href="#" title="three">最多折扣</a> <a href="#"><span>销量最多</span></a></dd>
</dl>
<dl id="#test">
<dt>烟酒</dt>
<dd><a href="#">茅台</a> <a href="#">西凤</a> <a href="#">五粮液</a></dd>
<dd><a href="#">高端</a> <a href="#" title="four">最受欢迎</a></dd>
</dl>
<div>
<dl id="test">
<dt>水果</dt>
<dd><a href="#">香蕉</a> <a href="#" title="five">香蕉</a> <a href="#">香蕉</a></dd>
<dd><a href="#">香蕉</a> <a href="#">香蕉</a></dd>
</dl>
</div>
<span id="one">这个是span</span>
<span>更多分类</span>
<h2>h2</h2>
<h2 class="one">这个是h2</h2>
<h2 id="two">ID=two</h2>
<span>更多分类</span>
<h2>h2</h2>
</div>
</body>
</html>2.4 伪类选择器
| 语法构成 | 描述 | 示例 |
|---|---|---|
| :first | 选取第一个元素 | $(" li:first" )选取所有<li>元素中的第一个<li>元素 |
| :last | 选取最后一个元素 | $(" li:last" )选取所有<li>元素中的最后一个<li>元素 |
| :even | 选取索引是偶数的所有元素（index从0开始） | $(" li:even" )选取索引是偶数的所有<li>元素 |
| :odd | 选取索引是奇数的所有元素（index从0开始） | $(" li:odd" )选取索引是奇数的所有<li>元素 |
| :eq(index) | 选取索引等于index的元素（index从0开始） | $("li:eq(1)" )选取索引等于1的<li>元素 |
| :gt(index) | 选取索引大于index的元素（index从0开始） | $(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1 |
| :lt(index) | 选取索引小于index的元素（index从0开始） | $(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1） |
| :nth-child | $("ul li:nth-child(2)"):ul下的第二个儿子是li的。必须保证类型和数匹配 | |
| :nth-of-type | $("ul li:nth-of-type(1)"):ul下的类型是li的第一个元素 | |
| :only-child | 只有一个儿子的元素 |
<ul>
<div>div</div>
<li>这个是孙子列表0</li>
<li>这个是孙子列表1</li>
<li>这个是孙子列表2</li>
<li>这个是孙子列表3</li>
<li>这个是孙子列表4</li>
</ul>
<script>
$(function(){
//$("ul li:odd").css("background-color","red") 奇数
// $("ul li:eq(0)").css("background-color","red") 等于0
// $("ul li:gt(0):odd").css("background-color","red") 大于0取奇数，从0开始
// $("ul li:lt(4):odd").css("background-color","red") 小于4
// $("ul li:not(:first)").css("background-color","red") 不是第一个
$("ul li").eq(0).css("background-color","red")
})
</script>:parent $("ul li:parent").html("OK") 匹配 li里面有文本或子元素的li元素
.parent() $("li").parent() :找li的父元素，直接父元素，只找一级
.parents() $("li").parents() :找li的所有的父元素，找到根
.parents() $("li").parents("div") :找li的所有的父元素，只要div的
2.5 基本过滤选择器
| 语法构成 | 描述 | 示例 |
|---|---|---|
| :not(selector) | 选取去除所有与给定选择器匹配的元素 | $(" li:not(.three)" )选取class不是three的元素 |
| :header | 选取所有标题元素，如h1~h6 | $(":header" )选取网页中所有标题元素 |
2.6 可见性过滤选择器
| 语法构成 | 描述 | 示例 |
|---|---|---|
| :visible | 选取所有可见的元素 | $(":visible" )选取所有可见的元素 |
| :hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
2.7 表单选择器以及表单属性选择器
具体见帮助文档
$(function(){
//$(":input").css("background-color","red") 获取所有的input
// $("input[type='text']").css("background-color","red") 获取文本框
//$(":text").css("background-color","red")
//获取所有的checked="checked"元素的值
/*
.each()//循环每个元素
*/
$("input:checked").each(function(i,v){//i,代表的是索引，v代表的循环出的每个元素，该元素是dom对象
var val = $(v).val()
console.log(val)
})
})三、事件
3.1 鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：
| 方法 | 描述 | 执行时机 |
|---|---|---|
| click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
| mouseover( ) | 触发或将函数绑定到指定元素的mouse over事件 | 鼠标移过时 |
| mouseout( ) | 触发或将函数绑定到指定元素的mouse out事件 | 鼠标移出时 |
对应mouseover以及mouseout有一个复合试卷hover事件
$("input[type='button']").hover(function(){
},function(){
})3.2 键盘事件
| 方法 | 描述 | 执行时机 |
|---|---|---|
| keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
| keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
| keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
<script>
$(function(){
$("input[type=text]").keydown(function(){
var v = $("div").html()//取到原来的值
$("div").html(v+"keydown")
}).keyup(function(e){
$("div").html($("div").html()+"keyup")
var code = e.keyCode//获取值 键盘对应 a:65 b:66
console.log(code)
if(code==13){
alert("做表单提交")
}
}).keypress(function(){
$("div").html($("div").html()+"keypress")
})
})
</script>
</head>
<body>
<input type="text" />
<div></div>
</body>3.3 表达事件
| 方法 | 描述 | 执行时机 |
|---|---|---|
| focus( ) | 触发或将函数绑定到指定元素的focus事件 | 获得焦点 |
| blur( ) | 触发或将函数绑定到指定元素的blur事件 | 失去焦点 |
3.4 绑定事件
bind事件
<script>
$(function(){
/* $("input[type='button']").click(function(){
alert("ok")
})*/
//绑定事件
$("input[type='button']:first").bind("click",function(){
alert("ok")
})
$("input[type='button']:last").click(function(){
$(this).prev().unbind("click")//接触绑定事件
})
})
</script>
</head>
<body>
<input type="button" value="点击" />
<input type="button" value="取消" />
</body>绑定多个事件
$("ul li").bind({
mouseover:function(){
console.log("mouseover")
},
mouseout:function(){
console.log("mouseout")
}
})
$("input[type='button']").click(function(){
$("ul li").unbind("mouseout")
})bind绑定的事件对于新添加的元素不起效果的
<html>
<head>
<meta charset="UTF-8">
<title>绑定多个事件</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
/* $("ul li").on({
mouseover:function(){
$(this).css("background-color","orange")
},
mouseout:function(){
$(this).css("background-color","green")
}
})*/
$("ul").on("mouseover","li",function(){
$(this).css("background-color","orange")
})
$("ul").on("mouseout","li",function(){
$(this).css("background-color","green")
})
$("input[type='button']:first").click(function(){
$("ul li").unbind("mouseout")
})
$("input[type='button']:last").click(function(){
var $li = $("<li>5</li>")
$("ul").append($li)
})
})
</script>
</head>
<body>
<input type="button" value="解除" />
<input type="button" value="追加元素" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>对于新添加的元素，需要使用on事件。请注意使用语法
$(parent).on("事件名","具体的子元素",function(){
})3.5 复合事件
hover()方法相当于mouseover与mouseout事件的组合
<script type="text/javascript">
$(document).ready(function(){
$("#myaccound").hover(function(){
$("#menu_1").css("display","block");
},
function(){
$("#menu_1").css("display","none");
});
});
</script>四、动画
1、显示及隐藏元素
$(document).ready(function(){
$("#show").click(function(){
$("div").show(2000);
});
$("#hidden").click(function(){
$("div").hide("fast");
});
});toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态
$("#togg").click(function(){
$("div").toggle();
});fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
$("#in").click(function(){
$("div").fadeIn("slow");
});
$("#out").click(function(){
$("div").fadeOut(2000);
});slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏
$("#down").click(function(){
$("div").slideDown("slow");
});
$("#up").click(function(){
$("div").slideUp("slow");
});五、jQuery操作Dom
5.1 、操作CSS
1、css来改变样式
选择器.css("属性名","值").css("属性名","值")
选择器.css({"属性名":"值","属性名":"值"})
<script>
$(function(){
$("p").css("color","white").css("text-indent","2em")
$("p").css({"font-size":"16px","background-color":"orange","line-height":"35px"})
})
</script>
<body>
<p>我是一个段落</p>
</body>2、addClass，removeClass的使用
选择器.addClass("className1 className2")
选择器.removeClass("className1 className2")
$(function(){
$("p").css("color","white").css("text-indent","2em")
$("p").css({"font-size":"16px","background-color":"orange","line-height":"35px"})
$("div").addClass("two one")// 可以添添加一个样式也可以用空格隔开添加多个样式
$("div").mouseover(function(){
$(this).removeClass("two").addClass("three")
}).mouseout(function(){
$(this).removeClass("three").addClass("two")
})
})3、 toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
toggleClass(class)
5.2 内容以及value属性
内容：html()以及text()
可以借助html()来获取元素中的内容，包含html的内容。也可以借助改方法给元素内部添加信息
可以借助text()获取元素内部的文本信息。
<body>
<p>我是一个段落</p>
<div>
我的一个div <input type="checkbox" />java
</div>
<div>
<input type="button" value="GET" /> <!--点击按钮，获取div的内容，文本框和文本区域框的内容-->
<input type="text" name="username" />
<textarea name="intro">我的兴趣爱好是.....</textarea>
</div>
</body>
$("input[type='button']").click(function(){
var v = $("div:first").text()
console.log(v)
$("div:first").html("<input type='radio'/>男")
$("div:first").text("<input type='radio'/>男")
})| 语法 | 参数 | 功能 |
|---|---|---|
| html() | 无参数 | 用于获取第一个匹配元素的HTML内容或文本内容 |
| html(content) | content参数为元素的HTML内容 | 用于设置所有匹配元素的HTML内容或文本内容 |
| text() | 无参数 | 用于获取所有匹配元素的文本内容 |
| text (content) | content参数为元素的文本内容 | 用于设置所有匹配元素的文本内容 |
val()可以获取或设置元素的value属性值
$("input[type='button']").click(function(){
var v = $("div:first").text()
console.log(v)
$("div:eq(1)").html("<input type='radio'/>男")
// $("div:first").text("<input type='radio'/>男")
var name = $("input[name='username']").val()
console.log(name)
var intro = $("[name='intro']").val()
console.log(intro)
})获取其他属性的值 attr
var src = $("img").attr("src")//获取属性值src
$("img").attr("src","images/meiri.gif")//给img标签的src属性重新赋值如何获取select框的值
//如果是一个值
var $selectedop = $("[name='address']").children(":selected")//选中的option的选项
var address = $selectedop.val();
console.log(address)
//如果是多个值，获取的是一个集合，需要循环
$("[name='address']").children(":selected").each(function(i,v){
var v = $(v).val()
console.log(v)
})
如何获取单选框是否选中
//获取是否选中，不能使用attr属性，要使用prop获取是否选中的结果
// $("[name='sex']") 应该是一个集合，如果直接$([name='sex']").prop("checked") 值判断了第一个元素
/* var ch = $("[name='sex']").prop("checked")
console.log(ch)*/
var b = false;
var sex = "";
$("[name='sex']").each(function(i,ele){
var c = $(ele).prop("checked")
if(c){
b=true
sex = $(ele).val()
}
})
console.log(b+"---"+sex)多选框同单选框
var tec = new Array()
$("[name='tec']").each(function(i,ele){
var c = $(ele).prop("checked")
if(c){
tec.push($(ele).val())
}
})
console.log(tec)5.3 节点操作
5.3.1 创建节点
$(html)：使用HTML字符串创建jQuery节点 如: var $newNode2=$(“<li title='tit'>海贼王</li>”);
5.3.2 追加子节点
插入子节点 元素内部插入子节点
| 语法 | 功能 |
|---|---|
| append(content) | $(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1); |
| appendTo(content) | $(B).appendTo(A)表示把B追加到A中 如：$newNode1.appendTo("ul"); |
| prepend(content) | $(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1); |
| prependTo(content) | $(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul"); |
$(function(){
$("[type='button']").click(function(){
var $li = $("<li>li新</li>")
//$("ul").append($li) 等价下面一行 都是再ul元素的内部追加li节点
//$li.appendTo($("ul"))
//$("ul").prepend($li) 等价下面一行，也是再ul的内部在前面追加li节点
$li.prependTo($("ul"))
})
})插入同辈节点
| 语法 | 功能 |
|---|---|
| after(content) | $(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1); |
| insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul"); |
| before(content) | $(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1); |
| insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul"); |
<script>
$(function(){
$("[type='button']").click(function(){
var $li = $("<li>li新</li>")
//$("ul").append($li)
//$li.appendTo($("ul"))
//$("ul").prepend($li)
// $li.prependTo($("ul"))
// $("ul li:eq(1)").after($li)//在第二个li后面追加元素，此时追加的是与li平级的元素 等价下一行
// $li.insertAfter( $("ul li:eq(1)"))
// $("ul li:eq(1)").before($li)//在第二个li前面追加一个元素此时追加的是与li平级的元素等价下一行
$li.insertBefore($("ul li:eq(1)"))
})
})
</script>
</head>
<body>
<input type="button" value="添加"/>
<ul>
<li>节点1</li>
<li>节点2</li>
<li>节点3</li>
<li>节点4</li>
<li>节点5</li>
</ul>
</body>5.3.3 替换节点
$("ul li:eq(1)").replaceWith($li) //等价下面的代码
$li.replaceAll($("ul li:eq(1)"))5.3.4 克隆节点
复制节点
clone()用于复制某个节点（true:指示事件处理函数是会被复制,false:不会赋值）
var $newli = $("ul li:eq(0)").clone(true)
$("ul").append($newli)）5.3.5 刪除節點
remove()：删除整个节点 (该方法会保留当前jquery对象，该方法会有返回值类型，是该节点)
detach()：删除整个节点，保留元素的绑定事件、附加的数据
empty()：清空节点内容 【不多】
5.3.6 移除元素的属性
removeAttr()用来删除元素的属性
| 语法 | 功能 |
|---|---|
| css() | 设置或返回匹配元素的样式属性 |
| height([value]) | 设置或返回匹配元素的高度 |
| width([value]) | 设置或返回匹配元素的宽度 |
| offset([value]) | 返回以像素为单位的top和left坐标。此方法仅对可见元素有效 |
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
