思维导图

一、笔记：

1. jQuery是什么？jQuery是一个快速、简洁的JavaScript框架。

2.为什么要学jQuery?倡导写更少的代码量，做更多的事情。

3.jQuery里如何动态设置样式css的？单个属性和多个属性的区别？

$（"div"）.css("color","red"); $("div").css({键：值，键：值})。

4.jQuery的事件？失焦事件？该如何表示？

$("#btn").click(function(){});简便的点击事件

$("document"). ready(function(){}); 这个也是点击事件但简便的更方便

5.哪些情况下适合用？中型网站开发、jQuery是一些前端的基础，比如EasyUI、Bootstrap。

6.开发工具：HBuilder 使用步骤：①.下载jQuery库 ②.引入，将js文件复制到项目中 ③.使用

案例1：点击按钮获取输入框中的值（对比js和jQuery）
jQuery选择器

一、.基础选择器：1、ID选择器：#id 2、类选择器：.class 3、元素选择器：element

4、通配符：* 5、多个选择器：交集：selector 1 selector 2 并集：selector 1,selector 2

案例2：使用基本选择器，改变元素的背景颜色和字体颜色（div p span）

二、层次选择器：查找使用元素，查询子元素

案例3：使用层次选择器，选中某个元素下面的所有元素和子元素

三、过滤选择器：获取第一个元素：first 获取最后一个元素：last

获取偶数下标：even 获取奇数下标：odd

获取某一范围元素：gl大于 gt小于

案例4：使用过滤选择器，选择li中元素
案例5：表格隔行换色
表单选择器

案例6：获取表单中的单选、多选、下拉框

一、代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">/* window.onload=function(){//拿到按钮var btn = document.getElementById("btn");//给按钮添加点击事件btn.onclick=function(){//匿名函数//拿到文本框  的值var a = document.getElementById("aa") .value;alert(a);}} */</script><!-- 引入外部js=jQuery的类库 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个script块 --><script type="text/javascript">//页面载入函数 加载DOM$(function(){//相当于window.onload//案例1/* var b = $("#btnb");//拿到按钮//给按钮添加点击事件b.click(function(){var a = $("#aa").val();//拿到文本框的值alert(a);}) *///2.1 基本选择器// $("#xx").css("background","yellow");//id选择器// $(".yy").css({"background":"yellow","color":"red"});//类选择器// $("div").css("background","pink");//标签选择器=元素选择器// $("*").css("background".,"yellow");//标签选择器=元素选择器// $("p,span").css("background","yellow");//并集// $("div span").css("background","yellow");//交集 后代标签span// $("div>span").css("background","yellow");//父子关系 // $("p>span").css("background","yellow");//p 标签的儿子span// $("p+span").css("background","yellow");//兄弟关系 p后面紧跟着的span//2.3 过滤选择器// $("ul>li:first").css("background","yellow");//第一个// $("ul>li:last").css("background","yellow");//最后一个// $("ul>li:even").css("background","yellow");//偶数下标// $("ul>li:odd").css("background","yellow");//奇数下标// $("ul>li:gt(0)").css("background","yellow");//大于零// $("ul>li:lt(4)").css("background","yellow");//小于四//0>x>4    先小于后大于//     $("ul>li:lt(4):gt(0)").css("background","yellow");//案例5 隔行换色// $("table tr:even").css("background","pink");// $("table tr:odd").css("background","yellow");//2.4 表单选择器$("#ok").click(function(){//拿性别var sex = $("#myForm input:radio:checked").val();console.info(sex);//拿爱好//     $("#myForm input:checkbox:checked").each(function(){//         console.info($(this).val());//     })//地址// var address = $("#myFrom select option:selected").val();//     console.info(address);})})</script></head><body><h2>jQuery入门&选择器</h2><h3>一、jQuery入门</h3><h4>案例1:点击按钮弹出文本框的值</h4><input type="text" id="aa" /><input id="btna" type="button" value="点击[js方式]" /><input id="btnb" type="button" value="点击[jQuery方式]" /><h3>二、jQuery选择器</h3><h4>2.1-2.2 基本选择器&层次选择器</h4><div id="xx"><p>这是第一个div中的段落&nbsp;<span>单身张强羡慕</span></p><span>谢立波和张文成的内部爱情故事</span></div><div class="yy">这是第二个div</div><p>这是第一个外面的段落</p><span>麻拐和蛤蟆的外部爱情故事</span><h4>2.3 过滤选择器</h4><ul><li>0-单身张强</li><li>1-好男人</li><li>2-高冷男翔</li><li>3-逗比利波</li><li>4-清高小刘</li></ul><h4>案例5：表格隔行换色</h4><table border="1px" width="50%"><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table><h4>2.4 表单选择器</h4><form action="" id="myForm">性别:<input type="radio" name="ssex" value="男"/>男<input type="radio" name="ssex" value="女"/>女<br />爱好:<input type="checkbox" value="打王者"/>打王者<input type="checkbox" value="看美女"/>看美女<input type="checkbox" value="看帅哥"/>看帅哥<input type="checkbox" value="装清高"/>装清高<br />地址:<select><option value ="湖南省">湖南省</option><option value ="浙江省">浙江省</option><option value ="广东省">广东省</option></select><br /><input type="button" value="提交" id="ok"/></form><pre></pre></body>
</html>

jQUery第一课（入门选择器）相关推荐

创客基地oDrive第一课入门配置
淘宝套装链接 B站视频链接 *** 特别注意 *** 请勿带电拔插主板上的所有接口接线,特别是USB接口. 请勿带电拔插主板上的所有接口接线,特别是USB接口. 请勿带电拔插主板上的所有接口接线,特别 ...
Asp.Net Web API 2第一课——入门
前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎任何的平台都会有HTTP服务库.HTTP服务可以涉及到 ...
重生之我要学C++第一课
时隔三月,继C语言之后,博主学成C++归来,欲重开博客,与诸位分享经验,共同学习,今天就开始我们的c++第一课--入门篇. 既然要开始学习c++,就要了解什么是c++: C 语言是结构化和模 ...
jQuery入门选择器
Hilo Everybody wellcometo my channel ! 今天Lion带大家初步认识一下 jQuery(jquery01) 首先第一个我们来聊聊 & ...
python编程入门第一课_python入门前的第一课 python怎样入门
人工智能时代的到来,很多文章说这么一句:"不会python,就不要说自己是程序员",这说的有点夸张了,但确实觉得目前python这个语言值得学习,而且会python是高薪程序员的必 ...
入门 | 机器学习第一课：决策树学习概述与实现
基于树的学习算法在数据科学竞赛中相当常见.这些算法给预测模型赋予了准确性.稳定性以及易解释性.其中,决策树算法也是引人关注的「随机森林」算法的基础构造模块.本文介绍了决策树的概念和简单实现,使用生动的 ...
NXP KW38蓝牙开发（一）入门第一课：官网蓝牙广播和连接例程，NMI禁止
首先要下载开发使用的IDE:MCUXpresso IDE 下载链接: 进入nxp的官网,搜索KW38 向下翻看,找到Xpresso,点击进入习惯使用IAR开发的同学也可以下IAR版本,这里以Xpre ...
jQuery零基础入门——（三）层级选择器
2019独角兽企业重金招聘Python工程师标准>>> <jQuery零基础入门>系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来, ...
Opencv入门第一课打开窗口
Opencv入门第一课打开窗口一.如何打开图片(代码解释如下) Mat src = imread("D:/images/lena.jpg"); 解释:imageread图片读取 ...

jQUery第一课（入门选择器）