jQuery_01 快速入门 了解&选择器
目录
例 : script标签中 src属性：指定JQuery插件；
1.JavaScript： window.οnlοad=function(){};
3.JQuery完整版的加载函数: $(document).ready(function(){}); 4.JQuery点击事件的关键词：click
2.1.ID选择器： 例子：$("#id属性名"); 符号：# （属性：id）;
2.2.类选择器： 例子：$(".类属性名"); 符号：. （属性：class）;
2.3.标签选择器： 例子：$("元素"); 符号：无 （属性：）
1.1.JavaScript:document.getElementById().value; 1.2.JQuery:$("选择器").val();
九、JQuery里如何动态设置样式css的? 单个属性和多个属性的区别?
一、什么是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 在线教程)
四、 如何下载JQuery插件
步骤一：打开浏览器在地址栏中搜索：jQuery.com
步骤二：进入此界面点击下载
步骤三：点击下载之后，会出现此界面，选择自己需要的版本进行下载即可
五、如何导入？
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="复制的链接" type="text/javascript">到浏览器输入：https://www.bootcdn.cn 进行搜索，在搜索栏中输入JQuery后搜索，选择对应的版本然后按照自己需求进行复制：
3.内部式与外部式的区别：
1.外部式：公司使用较多；
2.内部式：学习用；
4.关于版本：
1.开发版本
2.生产版本
3.测试版本
六、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的? 单个属性和多个属性的区别?
1.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" /> ]特点：里面的子类标签。
7.并集和交集结合使用
//例：
//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的遍历方式
//1.简写版
//语法：
$.(funciton(){
});
//完整版
//语法：
$.(document).ready(function(){
});十四、网页案例代码示例
<!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> 