自学之jQuery
最近在公司做项目的过程中，涉及到写前端部分，因为之前一直很少写前端，所以不是很熟悉，所以，在此写一下自学jQuery的过程，以及中途遇到的坑。
首先，要想使用jQuery必须先引入jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> </head>
<body> <script type="text/javascript">
/*
alert(222)
window.onload = function(){
//window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
//如果不写window.onload() 代码的执行顺序 从上到下
var oDiv = document.getElementById('box');
console.log(oDiv);
}
*/ </script> <div id="box"> </div> </body>
<script src="./jquery-3.2.1.js"></script>
<script type="text/javascript"> //如果没有引入jquery ：$ is not defined
console.log($)
//jquery是js的一个库文件，既然是库文件，那么就会抛出来一个构造函数或者对象 //$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕
//书写jquery的方式 入口函数
$(document).ready(function(){
alert(111)
}) //等价
$(function(){
alert(222);
})
</script> </html>
对，没错，就上面那个<script src="./jquery-3.2.1.js"></script>那个
如果说没有引入jQuery使用$就会报错，没有定义，如上面的代码。
$(document).ready(function(){
alert(111)
})
这个一般用在初始化界面的时候调用，比如修改内容的时候，原来什么东西是隐藏的，就用这个，因为他是从页面加载的时候就存在的。
而下面的$(function){})就是上面的简写方式。
——————————————————————————————————————————————————————————————————————
下面是jQuery的选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#brother{
color: red;
font-size:24px;
}*/
</style>
</head>
<body>
<ul>
<li id="brother">你大爷1</li>
<li><a href="https://www.luffycity.com">你大爷2</a></li>
<li class="li3">你大爷3</li>
<li>你大爷4</li>
<li>你大爷5</li> </ul>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数
$(document).ready(function(){ //基础选择器
//1.id选择器
console.log($('#brother')); $('#brother').css('color','red'); //2.标签选择器
//设置一个值
// $('a').css('color','yellow')
// 设置多个值 设置多个值得时候使用对象存储 key:value
$('a').css({'color':'yellow','font-size':'24px'}); //3.类选择器 $('.li3').css('background','green'); //4.通配符选择器 * 使用不是很频繁 console.log($('*'));
//清空整个界面的dom元素
$('*').html(''); }) </script>
</html>
选择器的种类如上所示：分为ID选择器，标签选择器，类选择器，通配符选择器；当然这些是一种基础类型的选择器。
所需要注意的是，当一个选择器想要设置多个元素的时候采用{}的形式。
$('a').css('color','yellow')单个
$('.li3').css('background','green');
$('a').css({'color':'yellow','font-size':'24px'});多个
下面是层级选择器的使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#brother{
color: red;
font-size:24px;
}*/
</style>
</head>
<body>
<ul>
<li id="brother">你大爷1</li>
<li><a href="https://www.luffycity.com">你大爷2</a></li>
<li class="li3">你大爷3</li>
<li>你大爷4</li>
<li>你大爷5</li> </ul> <div id="box">
<p id="father">天王盖地虎</p>
<p>我是你老母</p>
<p>宝塔镇河妖</p>
<p>蘑菇放香蕉</p>
<div id="box2">
<p>小鸡炖蘑菇</p>
</div> </div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数
$(document).ready(function(){ //1.后代选择器 div p $('#box p').css('color','red'); //2.子代选择器 div > p $('#box>p').css('color','yellow') //3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +
$('#father+p').css('font-size','30px'); //4.兄弟选择器 ~
$('#father~p').css('background','blueviolet'); console.log($('li')); //5.获取第一个元素
$('li:first').css('font-size','50px'); //6.获取最后一个元素 $('li:last').css('font-size','50px'); $('li:eq(3)').css('font-size','50px'); }) </script>
</html>
子代选择器('div>p ')和后代选择器（'div p'）的最大区别就是在于子代是只选择儿子辈，后代是子子孙孙无穷尽。
而兄弟选择器('#father~p')和毗邻选择器('#father+p')最大区别在于兄弟是选择同一层级下的所有，而毗邻只是同一层级下的一个。
而
$('li:eq(3)').css('font-size','50px');
用的最多
属性选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<!--<p class="p1">我是一个段落</p>-->
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button> </form>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> $(function(){
// 标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red'); //匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px'); // 匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow'); //匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red') }) </script>
</html>
筛选选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> //获取第n个元素 数值从0开始
$('span').eq(1).css('color','#FF0000'); //获取第一个元素 :first :last 点语法 ：get方法 和set方法
console.log($('span').last());
$('span').last().css('color','greenyellow'); console.log($('span').parent('.p1'))
$('span').parent('.p1').css({"width":'300px',height:'400px',"background":'red'}); //.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red') //.find()
//查找所有的后代元素
$('div').find('button').css('background','yellow') </script>
</html>
筛选选择器的区别在于他是先选中之前的条件再去选择之后的条件：属于链式调用
自学之jQuery的更多相关文章
- [Python自学] day-17 (jQuery)
一.jQuery简介 参考文档链接:http://jquery.cuishifeng.cn/ jQuery是JS的一个类库,是对DOM.BOM等的封装,方便我们来查找和操作元素. jQuery分为1. ...
- 前端框架 EasyUI （0） 重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
- 学习javascript怎么入门,初学者5条建议
你是否已经初步掌握了html和css,但完全不知道从何入手Java?如果是,这里总结了5条建议,帮助JavaScript初学者总结学习方法,提高学习效率. 一.多看视频少看书 对初学者而言,看书的效率 ...
- jQuery:自学笔记(5)——Ajax
jQuery:自学笔记(5)——Ajax 使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML ...
- jQuery:自学笔记(4)——事件与事件对象
jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
- jQuery:自学笔记(3)——操作DOM
jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...
- jQuery:自学笔记(2)——jQuery选择器
jQuery:自学笔记(2)——jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...
- jQuery:自学笔记(1)——基础入门
jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...
- JQuery自学代码---（一）
/** * Created by wyl on 15-3-4. */ //Jquery是一个JavaScrioe库,它极大的简化了JavaScript编程 $(document).ready(func ...
随机推荐
- 爬虫--urllib模块
一.urllib库 概念:urllib是Python自带的一个用于爬虫的库,其主要作用就是可以通过代码模拟浏览器发送请求.其常被用到的子模块在Python3中的为urllib.request和urll ...
- 服务限流-令牌桶java实现
此文非常不错,抄自: https://www.cnblogs.com/googlemeoften/p/6020718.html 其他实现 https://www.cnblogs.com/LBSer/p ...
- map转换成JSON的3种方法
http://www.json.cn/JSON格式校验 1 json-lib <dependency> <groupId>net.sf.json-lib</groupId ...
- 四则运算3+PSP
题目要求: 1.要求在第二次实验(四则运算2)的基础上加上其他功能. 2.要求能够在每个运算式打印出来后,用户能够进行输入计算的答案,并且程序进行判断给出用户输入的答案的正确性. 3.要求实现四则混合 ...
- 全局异常 同时ajax或是web跳转
F8功能强大 在java代码debug的时候,F8键可直接跳到下一个类中.免去下一步 只用把之前两种方式合并即可,就是在exception包中不要ajax的异常,将其放入到web异常中,用if ...
- ArcGIS案例学习笔记-聚类点的空间统计特征
ArcGIS案例学习笔记-聚类点的空间统计特征 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:对于聚集点,根据分组字段case field,计算空间统计特征 ...
- vs2017中char* str = "1234asd56";会报错，——const char*类型的值不能用于初始化char*类型的实体
原因: "1234asd56"是常量 ,正确的写法本身就是:const char* str = "1234asd56"; 之所以之前的vs版本可以写成char* ...
- ADO.Net 综合练习题
题目: 第一部分: 新建一个数据库:ADO测试,包含下面两个数据表,使用代码创建,并保留创建的代码文本. 专业表Subject: 专业编号(SubjectCode):nvarchar类型,不能为空,主 ...
- eclipce连接数据库增删改查
1.在mysql中新建一个名为course的数据库,并在其中新建一个course数据表,包含四个字段,id,name,teacher,classname如图(注意:将id设为自动递增,否则后面新增会出 ...
- Java7/8 HashMap ConcurrentHashMap
网上关于 HashMap 和 ConcurrentHashMap 的文章确实不少,不过缺斤少两的文章比较多,所以才想自己也写一篇,把细节说清楚说透,尤其像 Java8 中的 ConcurrentHas ...