jQuery_01入门

一、了解什么是jQuery

1.解释： j:javascript Query: 查询

2.jQuery是JavaScript的类库：封装了很多JS代码

3.官方地址：jQuery

4.查看官方jQueryLOGO：write less，do more（写得少，做得多）

二、jQuery的作用

为了简化JavaScript开发
提供了大量的选择器，更加方便地获取元素
CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

三、使用jQuery的步骤

1.下载jQuery库

开发版本：jquery-3.3.1.js（所占内存较大，电脑负荷大）

生产版本：jquery-3.3.1.min.js（所占内存较小，电脑负荷比较小）

2.引入：将js文件复制到项目中

3.使用

通过script标签的src属性引用

注：如果一个script标签中有src属性并且有值，那么该标签中不能再次编写代码

4.CDN远程服务的导入

减轻当前程序服务器的压力

(1).在主页搜素jQuery

(2).选择版本复制<script>标签

(3).通过script标签的src属性引用

四、js与jQuery的对比

Js获取输入框的值（代码使用过多）

2 . jQuery获取输入框的值（减少代码的使用）

五、基本选择器

1.ID选择器：#ID

// id选择器的使用设置单个对象

例：$("#odiv").css("background","red");

//为多个对象设置css样式

例：$("#odiv").css({"background":"yellow","width":"100px","height":"80px"})

2.类选择器：.class

// 类选择器的使用

例：$(".oli").css("background","orange");

3.元素选择器:element

// 标签选择器的使用

例： $("p").css("background","blue");

4.通配符：*

// 通配符选择器

例：$("*").css("background","green");

5.多个选择器(并集)：selector1,selector2

//并集选择器中的选择器可以是多样的（分组选择器）
例： $(".obox1,.obox2,p").css("background","green");

6.多个选择器(交集)：selector1 selector2

// 交集选择器（后代选择器）
例： $(".obox1 p").css("background","red");

7. 结合使用
例：$(".obox1 span,obox2").css("background","yellow");

六、层次选择器

1.层次选择器的使用（层次后代选择器）
例： $("#mydemo li").css("background","pink");
2. 层次选择器的使用（层次子代选择器）
例： $("#mydemo>li").css("background","pink");

七、过滤选择器

1.获取第一个子节点
例： $("#mydemo>li:first").css("background","blue");

8
2. 获取最后个子节点
例：$("#mydemo>li:last").css("background","red");

3.获取所有个子节点
例：$("#mydemo:last").css("background","red");

4.根据下标获取指定的子元素eq()
例：$("#mydemo>li:eq(1)").css("background","red");

5. even匹配首页索引值为偶数的元素，元素位置为奇数
例： $("#mydemo>li:even").css("background","yellow");

6.odd匹配首页索引值为奇数的元素，元素位置为偶数
例： $("#mydemo>li:odd").css("background","pink");

7. &gt大于 &lt小于
// 设置tr下标大于2的所有tr设置背景颜色
例： $("table tr:gt(2)").css("background","pink");
// 设置tr下标小于4的所有tr设置背景颜色
例： $("table tr:lt(4)").css("background","green");

8.表格隔行换颜色
$("table tr:even").css("background","yellow");
$("table tr:odd").css("background","pink");

(1.)// 设置tr下标小于4的所有tr设置背景颜色
// $("table tr:lt(4)").css("background","green");

(2.) // 设置tr下标大于2小于4的所有tr设置背景颜色
// $("table tr:lt(4):gt(2)").css("background", "green");

(3.) 注：如果是区间先大于的情况下会再次排布下标
$("table tr:gt(2):lt(4)").css("background", "green");

完整代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 导入jQuery库 --><script src="js/jquery-3.3.1.min.js" type="text/javascript"></script><script type="text/javascript">// jQuery中提供了很多选择器为了更加方便的获取元素// 加载函数$(function() {// id选择器的使用// $("#odiv").css("background","red");//为多个对象设置css样式// $("#odiv").css({"background":"yellow","width":"100px","height":"80px"})// 类选择器的使用// $(".oli").css("background","orange");// 标签选择器的使用// $("p").css("background","blue");// 通配符选择器// $("*").css("background","green");//并集选择器中的选择器可以是多样的（分组选择器）// $(".obox1,.obox2,p").css("background","green");// 交集选择器（后代选择器）// $(".obox1 p").css("background","red");// 结合使用// $(".obox1 span,obox2").css("background","yellow");// 层次选择器的使用（层次后代选择器）// $("#mydemo li").css("background","pink");// 层次选择器的使用（层次子代选择器）// $("#mydemo>li").css("background","pink");// jQuery中的过滤选择器// 获取第一个子节点// $("#mydemo>li:first").css("background","blue");// 获取最后个子节点// $("#mydemo>li:last").css("background","red");// 获取所有个子节点// $("#mydemo:last").css("background","red");// 根据下标获取指定的子元素eq()// $("#mydemo>li:eq(1)").css("background","red");// even匹配首页索引值为偶数的元素，元素位置为奇数// $("#mydemo>li:even").css("background","yellow");// odd匹配首页索引值为奇数的元素，元素位置为偶数// $("#mydemo>li:odd").css("background","pink");// 表格隔行换颜色// $("table tr:even").css("background","yellow");// $("table tr:odd").css("background","pink");// &gt大于 &lt小于// 设置tr下标大于2的所有tr设置背景颜色// $("table tr:gt(2)").css("background","pink");// 设置tr下标小于4的所有tr设置背景颜色// $("table tr:lt(4)").css("background","green");// 设置tr下标大于2小于4的所有tr设置背景颜色// $("table tr:lt(4):gt(2)").css("background", "green");// 注：如果是区间先大于的情况下会再次排布下标$("table tr:gt(2):lt(4)").css("background", "green");})</script></head><body><div id="odiv">我是div内容</div><p>p段落标签</p><br><ul><li>item1</li><li class="oli">item2</li><li>item3</li><li class="oli">item4</li><li class="oli">item5</li></ul><hr><div class="obox1">1<p>0<span>span内容</span></p><span>9</span><p>8</p></div><hr><div class="obox2">2</div><hr><ul id="mydemo"><li>1</li><li>2</li><li>3</li><span>4</span><p>5</p><ol><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ol></ul><hr><table border="1" width="100%" height="300px"><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></body>
</html>

八、表单选择器

1. 表单的使用
例：$("form input:input").css("background","red");
例： $(":text").css("background","yellow");

2.获取单选按钮设置value属性
例：$(":radio").val("女");

3./获取选中的单选val
例：console.log($("#odiv input:checked").val());

4.获取所有复选框的vaule属性值
例： var cks = $(".obox input:checkbox").val();

5.jQuery中遍历方式
               例：$.each(cks,function(){
                  console.log($(this).val())
                 })
               $.each(cks,function(){
                  if($(this).prop('checked'==true)){
                  console.log($(this).val())
                  }
               })

6.获取下拉框的值选中的值
例：$(".obox2 select option").each(function(){
                       if($(this).prop('selected')==true){
                               console.log($(this).val());
                           }
               });

完整代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// 在一个语句中不能同时存在js和jquery的语法// 加载函数$(document).ready(function(){// 表单的使用// $("form input:input").css("background","red");// $(":text").css("background","yellow");// 获取单选按钮设置value属性// $(":radio").val("女");//获取选中的单选val// console.log($("#odiv input:checked").val());// 获取所有复选框的vaule属性值// var cks = $(".obox input:checkbox").val();//jQuery中遍历方式// $.each(cks,function(){//     console.log($(this).val())// })// $.each(cks,function(){//  if($(this).prop('checked'==true)){//        console.log($(this).val())//    }// })// var ckss = $(".obox input:checkbox:checked");// $.each(ckss,function(){//   if($(this).prop('checked')==true){//        console.log($(this).val())//    }// });// 获取复选框选中的值// $(".obox2 select option").each(function(){//        console.log($(this).val())// });// console.log($(".obox2 select option:selected").val());// 获取下拉框的值选中的值$(".obox2 select option").each(function(){if($(this).prop('selected')==true){console.log($(this).val());}});});</script></head><body><form action="" method="post"><input type="text" /><input type="text" /><input type="password" /><input type="radio" value="男"/>男<input type="checkbox" /><input type="file" /><input type="image" /><input type="submit" /></form><div id="" style="width: 100px; height: 50px; border:1px  solid aqua;"></div><div id="odiv"><input checked="checked" type="radio" name="sex"  />男<input type="radio" name="sex"  />女</div><div class="obox"><input type="checkbox" value="1" />1<input checked="checked" type="checkbox" value="2" />2<input type="checkbox" value="3" />3<input checked="checked" type="checkbox" value="4" />4<input type="checkbox" value="5" />5</div><div class="obox2"><select name=""><option value="1">1</option><option value="2">2</option><option selected="selected" value="3">3</option><option value="4">4</option></select></div></body>
</html>

jQuery_01入门相关推荐

用Construct 2制作入门小游戏~
今天在软导课上了解到了Construct 2这个神器,本零基础菜鸟决定尝试做一个简单的小游戏(实际上是入门的教程啊= = 首先呢,肯定是到官网下载软件啊,点击我下载~ 等安装完毕后我便按照新手教程开始 ...
Docker入门六部曲——Swarm
原文链接:http://www.dubby.cn/detail.html?id=8738 准备工作安装Docker(版本最低1.13). 安装好Docker Compose,上一篇文章介绍过的. 安 ...
Docker入门六部曲——Stack
原文链接:http://www.dubby.cn/detail.html?id=8739 准备知识安装Docker(版本最低1.13). 阅读完Docker入门六部曲--Swarm,并且完成其中介绍 ...
Docker入门六部曲——服务
原文链接:http://www.dubby.cn/detail.html?id=8735 准备已经安装好Docker 1.13或者以上的版本. 安装好Docker Compose.如果你是用的是Do ...
【springboot】入门
简介: springBoot是spring团队为了整合spring全家桶中的系列框架做研究出来的一个轻量级框架.随着spring4.0推出而推出,springBoot可以説是J2SEE的一站式解决方案 ...
SpringBoot (一) ：入门篇 Hello World
什么是SpringBoot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...
入门指南目录页 -PaddlePaddle 飞桨入门指南 FAQ合集-深度学习问题
入门指南目录页 -PaddlePaddle 飞桨入门指南 FAQ合集 GT_Zhang关注 0.1012019.08.01 18:43:34字数 1,874阅读 795 Hi,欢迎各位来自Paddl ...
5 分钟入门 Google 最强NLP模型：BERT
BERT (Bidirectional Encoder Representations from Transformers) 10月11日,Google AI Language 发布了论文 BERT: ...
命名实体识别入门教程（必看）
关于开发自己的命名实体识别先期思路: 虽然网上有很多相关代码,但实际如何入门材料较少,故整理下: CRF:先期可以用人民日报语料库去做,步骤如下: https://blog.csdn.net/hude ...

jQuery_01入门

jQuery_01入门

jQuery_01入门相关推荐

最新文章

热门文章