1、jQuery导入与简单操作
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery导入与jQuery对象</title>
</head>
<body>
<ul>
<li>这是列表项目</li>
<li>这是列表项目</li>
<li>这是列表项目</li>
<li>这是列表项目</li>
<li>这是列表项目</li>
</ul>
<!--导入jQuery函数库-->
<script src="lib/jquery.js"></script>
<script>
// 将整个javascript包装成jQuery函数库，比如$(document)就是将整个document包装成jQuery对象
// 利用jQuery的ready()就可以访问全部文档内容
$(document).ready(function () {
console.log($);
console.log(typeof $);
console.log($());//返回jQuery对象
console.log($('li'));//返回所有文档中的Li元素
});
//只有将dom元素通过$()函数转换后才可以使用jQuery对象后，才可以使用jQuery提供的功能
let li = $('li')[1];
//通过jQuery函数提供的功能找到li中的第二个元素，将第二个元列中更新内容
li.innerHTML = '<span style="color: red">我是插入的新元素</span>'
//同样的，还可以将li转换成jQuery对象，这时候又可以使用jquery中的方法了
$('li').eq(1).html('<span style="color: green">我又回来了</span>');
$(function () {//匿名函数直接简写$()在里面调用函数
let li = $('li').get(4);
li.innerHTML = '<span>我是通过原生的dom来改变的</span>';
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQueyr对象的核心访求与属性</title>
</head>
<body>
<script src="./lib/jquery.js"></script>
<script>
$('<ul class="list"></ul>').appendTo('body');
$('.list').append('<li>今年的IPONE SE好贵，我卖不起了！</li>');
//再创建一个新元素
$('.list').append('<li class="ten">我的***还多得很</li>');
//each(function)来执行一下，回调处理每一个CSS
//$(this)就是选择当前的DOM元素,而非对象
$('li').each(function () {
$(this).css('background-color','red');
});
//index()是返回当家的索引值//返回Li下面class为ten元素的索引值，为1
console.log($('li.ten').index());
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常用的属性操作</title>
</head>
<body>
<ul class="list">
<li class="item1">我是列表项目01</li>
<li class="item2">我是列表项目02</li>
<li class="item3">我是列表项目03</li>
<li class="item4">我是列表项目04</li>
<li class="item5">我是列表项目05</li>
</ul>
<script src="lib/jquery.js"></script>
<script>
//attr()和rmoveAttr()进行查询，设置，删除操作.attr()里面有两个参数，如果只设置一个就是查询，设置第二个元素就是设置
console.log($('li').eq(2).attr('class'));// 查看class属性//记住是eq不是ep
$('li').eq(0).attr('class','id');
$('li:eq(0)').removeAttr('class');//移出属性class
//因为class非常的特别，针对class有一个专门的属性设置方法
$('li:first-child').addClass('item1');//给class添加class属性
$('li:last-child').removeClass();//移除class样式
//html.text.val三个参数的设置
$('li').eq(1).html('<span>我是新来的人员</span>');
$('li:last-child').append('<input type="text">').find('input').val('请输入内容');
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JQuery中的css操作</title>
</head>
<body>
<script src="./lib/jquery.js"></script>
<script>
$('<div>').attr('class','box').appendTo('body');
// $('.box').width(200);
// $('.box').height(200);
// $('.box').css('backgroundColor','green');
// $('.box').width(200).height(200).css('backgroundColor','yellow');//链式调用方法
$('.box').css({
width: '200px',
height: '200px',
backgroundColor: 'red'//如果要使用css语法，必须要用''将css语法包起来，如果不用就用驼峰法就行了。
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery中常用的选择器</title>
<style>
.box {
background-color: red;
font-size: 1.5rem;
}
</style>
</head>
<body>
<ul>
<li>php
<ul>
<li>php对象</li>
<li class="itme1">php基础</li>
</ul>
</li>
<li>JS
<ul>
<li id="tem1">javascript</li>
<li>JSON</li>
</ul>
</li>
<li>Ajax</li>
<li>HTML</li>
<li>java</li>
</ul>
性别：<input type="radio" name="sex" id="sex" checked>女<input type="radio" name="sex" id="sex">男<br>
兴趣：
<input type="checkbox" name="happy">游泳
<input type="checkbox" name="happy">打篮球
<input type="checkbox" name="happy">打游戏
<br>
学历：<select>
<option>大专</option>
<option>小学</option>
<option>高中</option>
<option>初中</option>
</select><br>
邮箱：<input type="text" name="email" id="email"><br>
密码：<input type="password" name="password" id="password"><br>
<button type="button">提交</button>
<script src="./lib/jquery.js"></script>
<script>
// $('*').addClass('box');//选中所有元素，把addClass的样式加上去
// $('li').addClass('box');//选中li元素，加上样式
// $('.itme1').addClass('box');//选中class属性为.itme1的元素
// $('#tem1').addClass('box');//选中id属性为tem1的元素
// $('li:first li').addClass('box');//选中第一个Li下面的所有li元素加空格是下面的所有子元素
// $('li:first > ul > li').addClass('box');//选中第一个li下面ul下面的所有li元素它跟上面的特别就是，这个是按下一级来选择的。
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的DOM操作</title>
<style>
</style>
</head>
<body>
<ul>
<li>我的项目列表</li>
<li>我的项目列表</li>
<li>我的项目列表</li>
<li>我的项目列表</li>
<li>我的项目列表</li>
</ul>
<script src="./lib/jquery.js"></script>
<script>
//append与appendTo的区别是，append是先选择再插入，appendTo是先创建再选择插入
$('li').eq(1).css({
backgroundColor: 'red'
});
$('<li class="new">我是新播放的元素</li>').appendTo('ul');
$('ul').append('<li>我是第二次插入的元素</li>');
//prepend与prependTo是添加的意思，添加到什么位置
$('ul').prepend('<li>我又来了</li>');
$('<li>再来一个哦</li>').prependTo('ul');
//在选中的元素的后面添加内容
$('li:last').after('<li>再来添加一个元素到后面</li>');
$('<li>我再来添加一个元素</li>').insertAfter('li:last');
//在元素的前面添加内容
$('li').eq(0).before('<li>我在前面来插入一下</li>');
$('<li>我在前面再插入一个吧</li>').insertBefore('li:eq(0)');//在后面插入东西的里面，一定要把eq来到里面
//replaceWith和replaceAll是来替换掉内容 的
$('li').eq(0).replaceWith('<li>去是来替换掉内容的</li>');
$('<li>去是来替换掉内容的</li>').replaceAll('li:last');
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
