JQuery
一、jQuery概述
1.为什么使用jQuery(遇到问题)
(1)选择器功能弱
(2)DOM操作繁琐之极
(3)浏览器兼容性不好
(4)动画效果不好
2.什么是jQuery(概念)
(1)jQuery(javaScriptQuery)JavaScript代码库
(2)官方网站:http//jquery.com/
3.目前jQuery有三个版本:
(1)兼容ie678,使用最为广泛的,官方制作BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4(2016年5月20日)
(2)不兼容ie678,很少人使用,官方只做BUG维护,功能不再增长。如果不考虑兼容低版本的浏览器就可以使用2.x,最终版本:2.2.4(2016年5月20日)
4.jQuery就相当于将javacript做成了一个包(功能函数)
eg:(1)创建一个html文件(同时与js文件建立连接联系):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
<script>
var div =document.getElementById("div");
var div2=$("div");#和上边那一段代码功能一致:div2=div1
</script>
</head>
<body>
</body>
</html>
(2)创建一个js文件(文件中写一个功能函数提供给html调用):
function $(id){
var dom=document.getElementById("id");
return dom;
}
认识jQury的$
一、jQuery中$的含义($相当于jQuery):
1. 作用1:$(function)
1.相当于window.onload=function(){}
2.功能比window.onload更强大
(1)window onload一个页面只能写一个,但是可以写多个$()而不冲突
(2)window onload要等整个页面加载完后再执行(包括图片、超链接、音频),但是$的执行时间
要早。
二、jQuery中5种选择器
1.id选择器# 只能获得一个标签
a.$(function(){
#js方法获得对象
var tr=decoment.ElementById("tr");
#jq方法获得对象的集合,#代表id选择器
var tr=$("#tr");
alert(tr);
#jq方法获得对象,#表示id选择器
var tr=$("#tr");
alert(tr[0])
})
2.元素选择器
var tr=$('tr');
3.类选择器
var tr=$('.tr')
4.通用选择器(页面的所有元素)
var tr=$('*').css("background-color","greenyellow");
5.分组选择器
HTML代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery代码:
$("div,span,p.myClass")
6、层级选择器
$(function(){
#获得div下面包含的所有span标签
a.$(div span).css("backgroundColor","green");
#获得div的直系标签
b.$(div>span).css("background","color");
#获得与sp1紧挨着的标签
c.$(#sp1 +span).css("background","color");
#获得指定元素的同级标签
d.$(#sp1~span).css("backgroud","color")
})
7.几种以":"指定索引下标获取对象的选择器
• $(function(){
• #只有第一行变颜色
• $('ul li:first').css("background-color","red");
• $('ul li').first().css("background-color","red");
• #只有最后一行变色
• $('u1 li: last').css("background-color","red");
• $('ul li').last().css("background-color","red");
• #获得索引是奇数对象,索引从0开始
• $('ul li:odd').css("background-color","red");
• #获得索引是偶数对象,索引从0开始
• $('ul li:even').css("background-color","red");
• #获得指定索引下标的对象
• $('ul li:eq(3)).css("background-color","red");
#获得大于指定索引下标的对象
$('ul li:gt(3)').css("background-color","red");
#获得小于指定索引下标的随想
$('ul li:lt(3)').css("background-color","red");
• })
8.子选择器
9.属性选择器
a.
10. a.表单选择器
b.表单对象选择器
11.内容选择器
js实现数据的单双行颜色:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
jQuery创建方法的三种方式_$的含义:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
js和jQuery获得元素_JS和JQ对象之间的转化:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
JQ中5种选择器:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
以冒号获得某个单标签的普通选择器:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
几种获得单项的普通选择器:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
子选择器:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
jQuery中的6种属性选择器:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
表单选择器及表单对象属性选择器:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
内容选择器:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
操作页面元素的样式
一、操作页面样式
1.操作页面样式第1种方法
a.导入jQuery
b.head中创建一组style
<style>
#div{
width:100px;
height:100px;
border:1px solid red;
}
</style>
c.head中创建一个jQuery函数
$(function(){
#创建一个click事件
$("#but").click(function(){
#创建div的对象
var div2=$("#div1");
#获得css样式
var wid=div2.css("width");
var hei=div2.css("height");
#操作元素对象的样式
div2.css("width","1000");
div2.css("backgroudColor","red");#驼峰式
div2.css("backgroud-color","red");
#以上内容综合
div2.css({"backgroudColor":"yellow","width":"deepred"});
})
})
d:body中
<input type="button" id="but" value="更新样式"/>
<div id="div1"></div>
2.操作页面样式第2种方法
a.style标签创建一个类属性
.class{
width:100px;
height:100px;
border:1px solid red;
}
b.head中创建一个jQuery函数
$(function(){
#创建一个click事件
$("#but").click(function(){
#获得div对象 ----通过天津爱类的方式添加css样式.
$("#div1").attr("class","div");#和下边那条语句同义.
$("#div1").addClass("div");#和上边那条语句同义.
c:body中
<input type="button" id="but" value="更新样式"/>
<div id="div1"></div>
jQuery操作元素对象的样式:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
jQuery操作元素对象的样式第二种方法调用类用于同时添加多个样式:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
jQuery操作元素对象的样式第二种方法_调用类class代码:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
操作页面元素的属性
一、操作页面元素属性的第一种方法
1.通过创建对象获得元素属性和元素属性的值
a.创建一个函数和一个click单击事件
$(function(){
$("#but1").click(function(){
#获得div对象
var tex=$("#tex");
#获得对象的属性
var val=tex.attr("value")
console.log(tex,value)
})
})
b.body中
<input type="button" id="but" value="更新样式"/>
<input type="text" id="tex" value="请输入:"/>
<div id="div1"></div>
2.将属性替换成另一个属性
a.创建一个函数并创建一个单击事件:
$(function(){
$("#but1").click(function(){
#获得div对象
var tex=$("#tex");
#替换对象的属性
var val=tex.attr("value","我要代替原来的value属性的值")
var val1=tex.attr("type","button")#将原来的type属性的值text替换成button
console.log(tex,value)
})
})
b.body中
<input type="button" id="but" value="更新样式"/>
<input type="text" id="tex" value="请输入:"/>
<div id="div1"></div>
操作页面元素的属性:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
操作页面元素的属性的代码:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
替换元素属性_prop返回true或false并让checkbox是否打钩:
![0ac1dac9827e238e43d6711985b116a8.png](https://i-blog.csdnimg.cn/blog_migrate/5030f656a63c8ffd1ca39e57d4c2f836.png)
操作页面的文本和值1:
一、