一、什么是JQuery?
1.J:javascript
2.Query: 查询
答:JQuery就是JavaScript脚本语言的升级版本。
二、它的作用是什么?
答:将常用的代码进行封装成为一个函数,减少代码的编写量,提高效率!
三、特点
1.JQuery是JS的类库(封装了很多函数);
2市场上有很多封装JS的插件,JQuery只是一个。
推荐使用浏览器:谷歌
推荐使用开发工具:HBuilder
推荐自学网址:
1.http://tool.oschina.net/apidocs(在线API文档)
2.http://www.w3school.com.cn/(w3school 在线教程)
————————————————
版权声明:本文为CSDN博主「m0_60786924」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_60786924/article/details/123388527
四, 如何导入?
1.内部导入
例:
script标签中
src属性:指定JQuery插件;
通过script标签的src属性将下载好的的文件路径粘贴即可
<script src="js/jquery-3.3.1.min.js" type="text/javascript">
//该区域不能编写JQuery代码
</script>
JQuery代码编写
<script type="text/javascript">
// 此处编写JQuery代码
</script>
2.外部导入:通过CDN服务导入,减轻服务器的压力(需要网络)
例:
<script src="https://www.bootcdn.cn " type="text/javascript"
到浏览器输入:https://www.bootcdn.cn 进行搜索,在搜索栏中输入JQuery后搜索,选择对应的版本然后按照自己需求进行复制:
3.内部式与外部式的区别:1.外部式:公司使用较多;
2.内部式:学习用;
4.关于版本:
开发版本
生产版本
测试版本
五、JQuery的加载函数
1.JavaScript: window.οnlοad=function(){}
2.JQuery: $(function(){});
3.JQuery完整版的加载函数: $(document).ready(function(){});
4.JQuery点击事件的关键词:click
六、什么是选择器?
答:选择器可以指定网页标签
1.选择器的作用:更加方便的获取元素。
2. JavaQuery其选择器
2.1.ID选择器: 例子:$("#id属性名"); 符号:# (属性:id)
2.2.类选择器: 例子:$(".类属性名"); 符号:. (属性:class)
2.3.标签选择器: 例子:$("元素"); 符号:无 (属性:)
特点:根据不同的属性获取不指定的标签对象
2.4.与Javascript不同的地方:
2.4.1.JavaScript: document.getElementById("元素");
2.4.2.JavaScript通过此类方式来获取对象,JavaQuery的广泛性也更强。
七、JQuery获取value属性的方法:val();
1.如何用jQuery去获取文本框的值?
1.1.JavaScript:document.getElementById().value;
1.2.JQuery:$("选择器").val();
八、JQuery里如何动态设置样式css的? 单个属性和多个属性的区别?
css();设置样式
例:
oDiv.style.width = "100px";
oDiv.style.height = "100px";
$("#oDiv").css("width","100px");
对象的定义语法
var stu = {};
$("#oDiv").css({"width":"100px","":""});
```
九、其他的选择器:
1.ID选择器: $("#id属性名");
2.类选择器: $(".类属性名");
3.标签选择: $("元素");
4.通配符选择器: $("*") 特点:设置全部
5.并集选择器(逗号隔开): $("元素1","元素2");
例:
jQuery 代码:
$("div,span,p.myClass"); 结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
特点:多样的,可以指定多个。
6.交集(后代)选择器(空格隔开)
$("元素1" 子元素);
例:
jQuery 代码:
$("form input"); 结果:
[ <input name="name" />, <input name="newsletter" /> ]
特点:里面的子类标签。
并集和交集结合使用
例:
jQuery 代码:
$("Table,form input"); 结果:
[<Table></Table> <input name="name" />, <input name="newsletter" /> ]
8.层次选择器(层次后代选择器)
例:
jQuery 代码:
$("#oDiv li"); 结果:
[<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li><ol><li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li></ol>
</li>
</ul>]
设置样式:$("#oDiv li").css("background","pink");
8.1.层次选择器(层次子代选择器)
例:
jQuery 代码:
$("#oDiv>li"); 结果:
[<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li><ol><li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li></ol>
</li>
</ul>]
9.过滤选择器
first:第一个
last:最后一个
例:
jQuery 代码:
获取第一个子节点
$("#oDiv>li:first"); 结果:
jQuery 代码:
获取最后一个子节点
$("#oDiv>li:last"); 结果:
[<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li><ol><li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li></ol>
</li>
</ul>]
9.1.根据下标获取指定元素
eq(index);
index:下标
例:
jQuery 代码:
$("#oDiv>li:eq(index)"); 结果:
[<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li><ol><li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li></ol>
</li>
</ul>]
9.2.even匹配所有素引值为偶数的元素,元素的位置:奇数
例:
jQuery 代码:
$("#oDiv>li:even")
9.3.odd匹配所有素引值为奇数的元素,元素的位置:偶数
例:
jQuery 代码:
$("#oDiv>li:odd")
十、HTML的转义字符
>:大于
<:小于
例:下标大于2,小于4的设置背景颜色为:黄色
答:
jQuery 代码:
$("table tr:lt(4):gt(2)").css("background","yellow"); 结果:
<table border="" cellspacing="" cellpadding="" width="100px" height="400px">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
注意事项:如果是区间 先大于的情况下 会再次排布下标
十一、表单选择器的使用
1.:input 拿到所有的input属性的标签
2.:text 拿到所有文本框标签
3.:password 拿到所有密码标签
4.:radio 拿到所有单选框标签
5.:checkbox 拿到所有复选框标签
6.:submit 拿到所有提交按钮标签
7.:image 拿到所有图片按钮标签
8.:reset 拿到所有重置按钮标签
9.:button 拿到所有按钮标签
10.:file 拿到所有文件按钮标签
11.:hidden 拿到所有隐藏按钮标签
jQuery 代码:
$(":input")结果:
[
<input type="button" value="Input Button"/>,
<input type="checkbox" />,
<input type="file" />,
<input type="hidden" />,
<input type="image" />,
<input type="password" />,
<input type="radio" />,
<input type="reset" />,
<input type="submit" />,
<input type="text" />,
<select><option>Option</option></select>,
<textarea></textarea>,
<button>Button</button>,
十二、JQuery的遍历方式
语法:$.each(数组,funciton(){}
十三、网页案例代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页例子</title>
<!-- 导入JQuery插件 -->
<script src="js/jquery-3.3.1.min.js" text/javascript">
</script>
<!-- JQuery代码 -->
<script type="text/javascript">
//加载函数
$(function(){
//一、获取所有复选框中的value属性值
var cks = $("#oBox input:checkbox");
//由于拿到的是一个数组所以需要进行遍历,通过$工具进行遍历
$.each(cks,funciton(){
console.log($(this).val());
});
//二、获取选中的复选框中的value值
var ckss = $("#oBox input:checkbox:checked");
$.each(ckss,function(){
console.log($(this).val());
});
//三、获取下拉框中的value值
$(".Optn select option").each(function(){
console.log($(this).val());
})
</script>
//四、获取下拉框中选中的value值
console.log($(".Optn select option:selected").val());
});
</head>
<body>
<div id="oBox">
<input type="checkbox">Item1
<input type="checkbox" checked="checked">Item2
<input type="checkbox">Item3
<input type="checkbox" checked="checked">Item4
<input type="checkbox">Item5
</div>
<select class="oPtn">
<option value="">001</option>
<option selected="selected" value="">002</option>
<option value="">003</option>
</select>
</body>
</html>