jQuery(入门)

一、什么是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>

<script src="js/jquery-3.3.1.min.js" text/javascript">
</script>

<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>

jQuery(入门)相关推荐

Jquery入门详解
JQuery 入门介绍 1.JQuery概述:Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器(I ...
jQuery——入门（四）JQuery 事件
jQuery--入门(四)JQuery 事件一.事件初探加载文档完成触发: window.onload = function(){} //js $(window).load(function( ...
jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
jQuery——入门（二）动画
jQuery -- 入门(二)动画/效果一.案例解析 hide([speed,[easing],[fn]]) []:意思表示的方括号中的东西是可选的,可有可无的: []中,会有对应的参数名称[变量名 ...
jQuery——入门（一）JQuery的简介与基本选择器的使用
JQuery入门(一)-- 基本简介与基本选择器的使用一.jQuery简介 jquery是2006年1月由美国人John Resig在纽约barcamp发布,目前已经成为辅助javascript开发 ...
jQuery入门[1]－构造函数
jQuery入门[1]-构造函数 jQuery入门[2]-选择器 jQuery入门[3]-事件 jQuery入门[4]-链式代码 jQuery入门[5]-AJAX jQuery入门[6]-动画 JQu ...
jQuery入门选择器
Hilo Everybody wellcometo my channel ! 今天Lion带大家初步认识一下 jQuery(jquery01) 首先第一个我们来聊聊 & ...
jQuery入门 jQuery入门第三天
jQuery入门 jQuery入门第三天老师:黑马程序员文章目录 jQuery入门 jQuery入门第三天老师:黑马程序员 3. jQuery事件 3.1 jQuery事件注册 3.1.1 单个 ...
JQuery入门(1) - 选择器
JQuery入门(1) - 选择器 $("元素") // 选取元素 $("元素.类名") // 选取元素中class为"类名"的元素 $(& ...
jQuery入门案例
jQuery入门案例 html内容如下: <!DOCTYPE html> <html lang="en"> <head><meta cha ...

jQuery(入门)

jQuery(入门)相关推荐

最新文章

热门文章