标签：radius height 隔行换色 页面 log ons blank 处理 代码
jQuery是一个兼容多浏览器的JavaScript库，封装了开发过程中常用的一些功能，类似Python模块
jQuery就是用JS写的，JS是基础
jQuery写起来简单，开发效率高，兼容性好
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/
注意：官网里面有两个版本，一个是压缩版，供生产环境使用，一个是没有压缩的，供开发使用
你进去把它复制下来，放到一个以js结尾的文件就能使用了（如jquery-3.3.1.js）
引入包 <script type="text/javascript" src="jquery-3.3.1.js"></script>
定义入口函数 $(document).ready(function(){ ---})
事件处理 oBtn.click(function(){---})
简单使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<!-- 引入js -->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 根据标签名获取dom元素
var oBtn = $(‘button‘);
var oDiv = $(‘div‘);
oBtn.click(function(){
// 显示盒子，可以添加显示的时间，2s渐变的显示出来效果
oDiv.show(2000);
// 设置内容
oDiv.html(‘666‘);
// oDiv.show(1000).html(‘666‘);
});
})
</script>
<button>操作</button>
<div></div>
<div></div>
<div></div>
</body>
</html>
原生js入口函数：只能出现一次，出现多次会存在事件覆盖情况
//原生 js 的入口函数。页面上所有内容加载完毕，才执行。 //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。 window.onload = function () { alert(1); }
jQuery入口函数：可以出现任意次，不会发生覆盖
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(document).ready(function () { alert(1); })
或者
//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。 $(window).ready(function () { alert(1); })
jQuery使用$符是因为它的书写简单，在打印的时候，会发现他两其实结果一样，它实际上表示的是一个函数名
$(); // 调用上面我们自定义的函数$ $(document）.ready(function(){}); // 调用入口函数 $(function(){}); // 调用入口函数 $(“div”) // 获取所有的div标签元素
div结构
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
原生js获取这些元素节点
<script type="text/javascript">
var myBox = document.getElementById("app"); //通过 id 获取单个元素
console.log(myBox);
var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组
console.log(boxArr);
var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组
console.log(divArr);
</script>
效果：
通过jQuery获取这些元素节点（都是数组）：
<script type="text/javascript">
//注意书写方式，必须有$符
console.log($(‘#app‘));
console.log($(‘.box‘));
console.log($(‘div‘));
</script>
效果：
jQuery自带了css（）方法可以直接在代码中给div设置css属性
$(‘div‘).css({ ‘width‘: ‘200px‘, ‘height‘: ‘200px‘, "background-color":‘red‘, ‘margin-top‘:‘20px‘ })
jQuery对象是包装DOM对象后产生的，但是两者却不能混用，DOM对象才能使用DOM方法，jQuery对象才能使用jQuery方法
DOM对象转换为jQuery对象（默认已经导入库）
<body>
<input type="text" name="username" id="username" value="王老师" />
<script>
//获取DOM对象
var username=document.getElementById("username");
alert(username.value);
//转换为jquery对象 转换后就可以使用jQuery中的方法了
var $username=$(username);
alert("^^^"+$username.val());
</script>
</body>
jQuery对象转换为DOM对象
<body>
<input type="text" name="username" id="username" value="小王老师" />
<script>
//获取jQuery对象
var $username=$("#username");
alert($username.val());
//转换成DOM对象
//(1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象
var username=$username[0];
alert(username.value);
//jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
//转化为DOM对象
var username1 = $username.get(0);
alert(username1.value);
</script>
</body>
下面看看例子
利用jQuery实现隔行换色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<ul style="list-style: none;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</head>
<body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//调用入口函数
$(document).ready(function(){
//声明变量
var lis = $(‘li‘);
for(var i=0;i<lis.length;i++){
if(i%2===0){lis[i].style.backgroundColor = "green";}
else {lis[i].style.backgroundColor = "yellow";}}})
</script>
</body>
</html>
利用jQuery实现开关一键换色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开关</title>
<style>
.c1{
width: 200px;
height: 200px;
border :1px solid grey;
border-radius: 50%;
margin-top: 50px;
margin: 0 auto;
}
.c2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="c1"></div>
<button class="btn" style="margin-left: 50%;">点击我</button>
<script src="jquery-3.3.1.js"></script>
<script>
// 找到button添加事件
$(".btn").on(‘click‘,function () {
//当点击的时候让变色
$(".c1").toggleClass(‘c2‘)
});
</script>
</body>
</html>
下面来看看海燕整理的作业题:
标签：radius height 隔行换色 页面 log ons blank 处理 代码
原文地址：https://www.cnblogs.com/LearningOnline/p/9126426.html
