1.jQuery基本操作：
<style>
.div1{
height: 200px!important;
width: 200px!important;
background-color: red;
transition: all 1s;
}
</style>
</head>
<body>
<div style="border: 1px solid #ccc;width: 100px;height: 100px;"></div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* $('div').mouseover(function(){
$(this).toggleClass('div1 ')
})
$('div').mouseout(function(){
$(this).removeClass('div1')
}) */
/* 鼠标移入有就删除class 没有就添加 */
function toggleFn(){
if($(this).hasClass('div1')){
$(this).removeClass('div1 ')
}else{
$(this).addClass('div1 ')
}
}
$('div').mouseover(function(){
toggleFn.call(this)
})
$('div').mouseout(function(){
toggleFn.apply(this)
})
/* $('div').addClass('div1')
console.log($('div').hasClass('div1'));
$('div').mouseover(function(){
if($(this).hasClass('div1')){
$(this).removeClass('div1 ')
}else{
$(this).toggleClass('div1 ')
}
})
$('div').mouseout(function(){
if($(this).hasClass('div1')){
$(this).removeClass('div1 ')
}else{
$(this).toggleClass('div1 ')
}
}) */
</script>
2.html和text区别：
<div id="div1"><p>我是一名学员</p></div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* html和text的区别 */
/* html用于获取第一个匹配元素的HTML内容或文本内容 */
/* let h = $('div').html()
console.log(h); */
let t = $('div').text
console.log(t);
/* let div1 = document.getElementById('div1')
console.log(div1.innerHTML); */
/* html()可以对HTML代码进行操作，类似于JS中的innerHTML*/
console.log($('#div1').html());
$('#div1').html('我是一名放假的学生')
/* innerHTML 和 html 设置都会把原来的替换 */
let t = $('div').text()
$('div').text('wsymxs')
</script>
3.获取表单元素的值：
<input type="text">
<button>获取</button>
<script src="./jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
/* console.log($('input').value()); */
/* console.log(document.getElementsByTagName('input')[0].value); */
/* console.log($('input').val()); */
$('input').val('我是学员')
})
</script>
获取表单元素值的练习：
<style>
.div1 {
border: red 1px solid;
padding: 10px;
width: 500px;
}
</style>
</head>
<body>
<!-- 有个div 里面还有一个input 鼠标移入显示红色边框 移出边框消失
div里面 我爱学习 学习让我自由
获取div的字 点击div 的时候 把字显示到input框中 -->
<div><input type="text"></div>
<script src="./jquery-1.12.4.js"></script>
<script>
function toggleFn() {
if ($(this).hasClass('div1')) {
$(this).removeClass('div1 ')
} else {
$(this).addClass('div1 ')
}
}
$('div').mouseover(function () {
toggleFn.call(this)
})
$('div').mouseout(function () {
toggleFn.apply(this)
})
$('div').click(function () {
$('input').val('我爱学习,学习让我自由')
})
/* 第二种方式 */
$('div').hover(function () {
/* 鼠标移入 */
$(this).toggleClass('div1')
}, function () {
/* 鼠标移出 */
$(this).toggleClass('div1')
})
/* 第三种 */
$('div').hover(function(){$(this).toggleClass('div1')});
</script>
4.节点操作：
<div>123</div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 通过选择器获取节点 */
console.log($('div'));
/* 把dom节点转换为jQuery节点 */
/* let div1 = document.getElementsByTagName('div')[0];
console.log($(div1)); */
/* 使用HTML字符串创建jQuery节点 */
let h1 = $('<h1 style = "color:red">学习JQ<h1>');
console.log(h1);
$('div').html(h1);
/* let h1 = document.createElement('h1')
h1.innerText = '学习JQ'
console.log(h1);
document.querySelector('div').innerHTML = h1.innerHTML */
</script>
5.插入节点操作：
<button>点击插入</button>
<ul style="border: 1px solid red;">
</ul>
<script src="./jquery-1.12.4.js"></script>
<script>
$('.b1').click(function(){
$(A).prepend(B)
/* 表示将b前置插入到A中 */
})
$('button').click(function(){
/* $(A).append(B)表示将B追加到A中 */
/* 原生只能插入节点 */
let li = $('<li>我是li</li>')
/* $('ul').append(li) */
/* append还能插入字符串 */
$('ul').append('<li>我是li</li>')
/* 被插入，功能一样 */
$('<li>我是li</li>').appendTo($('ul'))
})
</script>
插入节点练习：
<style>
.img1{
width: 36px;
height: 36px;
border-radius: 50%;
display: block;
}
</style>
</head>
<body>
<!-- 点击按钮随机生成一个头像 插入到div中
-->
<div style="width: 500px;border: 1px solid red;"></div>
<button class="b1">点我在前面随机生成头像</button>
<button class="b2">点我在后面随机生成头像</button>
<script src="./jquery-1.12.4.js"></script>
<script>
let arr = ['imgs/1.jpg','imgs/2.jpg','imgs/3.jpg'];
$('.b1').click(function(){
var i = Math.floor(Math.random()*(2-0+1))+0
$('div').append('<img src="'+arr[i]+'" class = "img1">');
})
$('.b2').click(function(){
var i = Math.floor(Math.random()*(2-0+1))+0
$('div').prepend('<img src="'+arr[i]+'" class = "img1">');
})
$('.b1').click(function(){
fn('向前')
})
$('.b2').click(function(){
fn('向后')
})
function fn(){
var i = Math.floor(Math.random()*(2-0+1))+0;
let img1 = $('<img src="'+arr[i]+'" class = "img1">')
if (msg=='向后') {
img1.appendTo($('div'))
}
}if (msg=='向前') {
img1.prepend($('div'))
}
</script>
6.同级插入节点：
<div>我是div1</div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 元素外部插入同辈节点 */
/* ★ after和before都是在自身的后面添加，并不是最后面添加 */
$('div').click(function(){
//$(a).after(b) 将b插入a之后
$(this).after($('<h1>爱爱爱</h1>'))
//$(b).insertAfter(a) 将b插入a之后
$(this).before($('<h1>我我我</h1>'))
})
</script>
