只是学习笔记,存在错误也不奇怪,欢迎指错,进行交流学习!!!
jQuery 是JavaScript扩展库,继承了HTML, css ,Java script ,DOM,和Ajax等功能;
下载:=>
1,官网:
2,Github:
压缩版:去掉了代码的注释和代码样式,这样的文件体积很小,加载所有的宽带更少,特别适合线上环境使用;
未压缩版:保留了代码注释和代码样式,方便阅读源码,适合开发环境使用
引入:<script type=”text/JavaScript” src=”jQuery文件路径”>
优化原则:
1,将CSS文件在页面的头部引入(<head></head>);
2,将js文件在页面尾部引入(</body>之前);
语法:=>
基础:
基本语法:->逻辑:先获取HTML元素,然后再执行操作;
->$(‘选择器’).动作:$()jQuery对象;
文档就绪:$(document).ready(匿名函数声明方法 function (){//jQuery代码});
简写方式:$(匿名函数function(){//jQuery代码});
<body>
//引入JS文件
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
//编写JS代码
<script type=”text/javascript”>
//就绪函数
$(document).ready(function() {
console.log(‘准备就绪!’);
});
//就绪函数简写方式
$(function() {
console.log(‘简写方式就绪!’);
})
</script>
</body>
——————————————————————-
选择器:=>
->基本选择器:
通配选择器:$(‘*’).action();
代码演示:=>
<body>
<div>层标记</div>
<p>段落标记</p>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//通配选择器
//css(样式名,样式值)
$(‘*’).css(‘color’, ‘red’);
})
</script>
标签选择器:$(‘HTML标签’).action();
ID选择器:$(‘#ID名称’).action();
类选择器:$(‘.类名称’).action();
群组选择器:$(‘选择器1,选择器2,…’).action();
代码演示:=>
<body>
<div>层标签</div>
<p class=”a” id=”p1″>段落1</p>
<p class=”a”>段落2</p>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
// 标签选择器
$(‘div’).css(‘color’, ‘red’);
//类选择器
$(‘.a’).css(‘background-color’, ‘#DDCCFF’);
//ID选择器
$(‘#p1’).css(‘color’, ‘green’);
//群组选择器
$(‘div,#p1’).css(‘border’, ‘2px solid blue’);
})
</script>
</body>
————————————————–
->层次选择器:
后代选择器(空格分隔):$(‘选择器1 选择器2 …’)action();
子代选择器(>分隔):$(‘选择器1>选择器2’).action();
兄弟选择器(+分隔):$(‘选择器1+选择器2’).action();兄弟选择器表示当前节点的下一个兄弟;
泛兄弟选择器(~分隔):$(‘prev~next’).action();表示当前兄弟节点的下面所有的兄弟;
代码演示:=>
<body>
<div>
<p>段落1</p>
<p>段落2</p>
<span>
<p>段落3</p>
<p>段落4</p>
</span>
<p>段落5</p>
<p>段落6</p>
</div>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
// 后代选择器
$(‘div p’).css(‘color’, ‘red’);
//子代选择器
$(‘div>p’).css(‘background-color’, ‘#FFDDAA’);
//兄弟选择器
$(‘span+p’).css(‘font-style’, ‘italic’);
//泛兄弟选择器
$(‘span~p’).css(‘font-style’, ‘italic’);
})
</script>
</body>
————————————————–
->过滤选择器:
获取第一个元素(first):$(‘HTML标签:first’).action();
$(‘HTML标签’).first().action();
获取最后一个元素(last):$(‘HTML标签:last’).action();
$(‘HTML标签’).last().action();
获取指定索引的元素(eq):$(‘HTML标签:eq(索引)’).action();
$(‘HTML标签’).eq(索引).action();
获取小于索引的元素(lt):$(‘HTML标签:lt(索引)’).action();
获取大于索引的元素(gt):$(‘HTML标签:gt(索引)’).action();
代码演示:=>
<body>
<ul>
<li>[0]标题1</li>
<li>[1]标题2</li>
<li>[2]标题3</li>
<li>[3]标题4</li>
<li>[4]标题5</li>
<li>[5]标题6</li>
</ul>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//获取第一个元素
$(‘li:first’).css(‘color’, ‘red’);
$(‘li’).first().css(‘border’, ‘2px solid pink’);
//获取最后一个元素
$(‘li:last’).css(‘color’, ‘green’);
$(‘li’).last().css(‘border’, ‘2px solid blue’);
//获取指定索引的元素
$(‘li:eq(2)’).css(‘font-size’, ’20px’);
$(‘li’).eq(2).css(‘border’, ‘2px solid blue’);
//获取小于2的元素
$(‘li:lt(2)’).css(‘background-color’, ‘#AABBCC’);
//获取索引大于2的元素
$(‘li:gt(2)’).css(‘background-color’, ‘#CCDDEE’);
});
</script>
</body>
———————————————————————-
奇数选择器(odd):$(‘HTML标签:odd’).action();
偶数选择器(even):$(‘HTML标签:even’).action();
声明:奇数偶数针对索引而言的!!
代码演示:=>
<body>
<table>
<tr>
< td >ID</td>
<td>用户名</td>
<td>手机号</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>13333333336</td>
</tr>
<tr>
<td>2</td>
<td>张三丰</td>
<td>13555555556</td>
</tr>
<tr>
<td>3</td>
<td>张无忌</td>
<td>13585555557</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>13585595657</td>
</tr>
</table>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
// 获取奇数元素
$(‘tr:odd’).css(‘background-color’, ‘#BBCCFF’);
//获取偶数元素
$(‘tr:even’).css(‘background-color’, ‘#AAEEFF’);
})
</script>
</body>
—————————————————————-
排他选择器:
$(‘HTML标签:not(选择器)’).action();
$(‘HTML标签’).not(选择器).action();
代码演示:=>
<body>
<ul>
<li>[0]标题1</li>
<li id=”second”>[1]标题2</li>
<li>[2]标题3</li>
<li>[3]标题4</li>
<li>[4]标题5</li>
<li>[5]标题6</li>
</ul>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
$(function() {
// 排他选择器
$(‘li:not(“#second”)’).css(‘background-color’, ‘#FFAABB’);
$(‘li’).not(“#second”).css(‘border’, ‘2px solid #AABBCC’);
});
</script>
</body>
————————————————–
->属性选择器:
$(‘[属性名称]’).action();获取包含属性名称的元素
$(‘[属性名称=属性值]’).action();获取属性名称等于属性值的元素;例:$(‘input[type=text]’).css();
$(‘[属性名称!=属性值]’).action();获取属性名称不等于属性值得元素
$(‘[属性名称^=属性值]’).action();获取开头等于属性值的元素(应用到正则表达式);例如:匹配https开头网址;
$(‘[属性名称$=属性值]’).action();获取结尾等于属性值的元素(应用到正则表达式);例如匹配以.html结尾的链
接;
代码演示:=>
<body>
<a href=”index.php”>首页</a>
<a href=””>百度</a>
<p>段落</p>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//属性选择器
$(‘a[href]’).css(‘border’, ‘2px solid red’);
//属性名称=属性值的元素
$(‘[href=”index.php”]’).css(‘font-size’, ’40px’);
})
</script>
</body>
————————————————–
->孩子选择器:
:first-child 匹配第一个孩子;
:last-child 匹配最后一个孩子;
————————————————–
->表单相关的选择器:
:input
:text
:password
:file
:submit
…
————————————————–
属性操作:=>
attr():
获取(读)属性 $(选择器).attr(属性名称);
设置属性:
单个属性赋值:$(选择器).attr(属性名称,属性值);
多个属性赋值:$(选择器).attr({属性名称1:属性值1,属性名称2:属性值2;…});
删除属性:$(选择器).removeAttr(属性名称);
prop()
获取(读)属性 $(选择器).prop(属性名称);
设置属性: 单个属性赋值:$(选择器).prop(属性名称,属性值);
多个属性赋值:$(选择器).prop({属性名称1:属性值1,属性名称2:属性值2;…});
Prop 删除属性:$(选择
器).removeProp(属性名称);
代码演示:=>
<body>
<a href=”index.php”>首页</a>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//获取a标签的href属性
console.log($(‘a’).attr(‘href’));
// 设置属性
$(‘a’).attr(‘href’, ‘
// 设置target属性,跳转页在新页面打开
$(‘a’).attr(‘target’, ‘_black’);
//设置多个属性
$(‘a[href]’).attr({
‘id’: ‘home’,
‘class’: ‘link’
})
//删除属性
$(‘a[href]’).removeAttr(‘class’);
})
</script>
</body>
声明:
attr()和prop()区别:
1,HTML标签本身固有的属性,建议使用prop()方法来操作,返回值是boolean型,HTML标签自定义的属性,建议使用
attr()方法操作,返回值是字符串或者是undefined;
——————————————————-
样式操作:=>
获取(读)样式:$(选择器).css(样式名称);
设置样式:写单个样式:$(‘选择器’).css(‘样式名称’,’样式值’);
写多个样式:$(‘选择器’).css({‘样式名称1′:’样式值1′,’样式名称2’:’样式值2’…})
删除样式:$(‘选择器’).css(‘样式名称’,”);
代码演示:=>
<body>
<a href=”#” style=”color:red; font-size: 20px;”>首页</a>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//读样式
console.log($(‘a’).css(‘color’));
//写单个样式
$(‘a’).css(‘font-style’, ‘italic’);
//写多个样式
$(‘a’).css({
‘background-color’: ‘#FFAACC’,
‘border’: ‘2px solid blue’
})
//删除样式
$(‘a’).css(‘color’, ”);
})
</script>
</body>
——————————————————-
->样式类操作:
添加样式类:$(‘选择器’).addClass(‘类名’);
删除样式类:$(‘选择器’).removeClass(‘类名’);
切换样式类:$(‘选择器’).toggleClass(‘类名’);如果当前元素有没有指定的类名称,则添加该类名称,如果当前元
素有类名称,则删除该类名称
代码演示:=>
<body>
<a href=”#”>首页</a>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//添加样式类
$(‘a’).addClass(‘link’);
//删除样式类
$(‘a’).removeClass(‘link’);
// 切换样式类
$(‘a’).toggleClass(‘link’);
})
</script>
</body>