前端jquery
1.节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
B2C business consumer
C2C
B2B2C
-->
<div id="d1">
</div>
<script>
// img标签
// 1. 创建img标签
// var img = document.createElement('img'); // <img>
// var div = document.getElementById('d1')
//
// // 2. 设置属性, 点语法只能添加标签自带的属性
// img.src = '1234.png';
// img.alt = '1234.png';
//
// // 添加自定义属性需要用setAttribute
// img.setAttribute('username', 'ly')
// img.removeAttribute('username')
// console.log(img.getAttribute('username'))
//
// // 3. 把img标签放到div里面
// div.append(img)
// console.log(img)
// 创建a标签
// 1. 创建标签
var div = document.getElementById('d1');
var a = document.createElement('a');
// 2. 设置属性
a.href = 'http://www.baidu.com';
a.target = '_blank';
// 3. 给a标签添加文本
// 把所有的内容都当成文本了
// a.innerText = '<span>点我哦</span>'; //
// 也可以识别标签
a.innerHTML = '<span>点我哦</span>'; //
// 把a标签放到div中
div.append(a);
console.log(a)
</script>
</body>
</html>
2.获取值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
用户名：<input type="text" id="d1" value="egon">
</p>
<p>
密码：<input type="password" id="d2" value="123546">
</p>
<select name="" id="city">
<option value="北京">北京</option>
<option value="上海" selected>上海</option>
</select>
<textarea name="" id="textarea" cols="30" rows="10">
textarea
</textarea>
<script>
// 获取值操作
var username = document.getElementById('d1').value;
console.log(username)
var password = document.getElementById('d2').value;
console.log(password)
var city = document.getElementById('city').value;
console.log(city)
var textarea = document.getElementById('textarea').value;
console.log(textarea)
</script>
</body>
</html>
3.class的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1" class="c2"></div>
<script>
// 先找到标签
var div = document.getElementById('d1')
// 增加class
// div.classList.add('c1')
// 删除
// div.classList.remove('c2')
// contains, 判断是否有该class
// console.log(div.classList.contains('c3'))
// 有就删除，无则添加
div.classList.toggle('c2')
div.classList.toggle('c2')
div.classList.toggle('c2')
</script>
</body>
</html>
4.指定CSS操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1" class="">div</div>
<script>
var div = document.getElementsByTagName('div')[0]
div.style.color = 'red'
div.style.fontSize = '34px'
// div.style.border = '3px solid red'
div.style.borderLeft = '3px solid red'
</script>
</body>
</html>
5.事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var btn = document.getElementsByClassName('btn')[0];
btn.onclick = function () {
alert(123)
}
}
</script>
</head>
<body>
<!--<button onclick="f1()">点我</button>-->
<button class="btn">点我</button>
<script>
// 事件的两种绑定方式
// function f1() {
// alert(123)
// }
// 第二种
// var btn = document.getElementsByClassName('btn')[0];
// btn.onclick = function () {
// alert(123)
// }
</script>
</body>
</html>
6.开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
width: 200px;
height: 200px;
border-radius: 50%;
}
.bg_green {
background: green;
}
.bg_red {
background: red;
}
</style>
</head>
<body>
<div id="d1" class="bg_green bg_red"></div>
<button class="btn">点击</button>
<script>
var btn = document.getElementsByClassName('btn')[0]
var div = document.getElementById('d1')
btn.onclick = function () {
if (div.classList.contains('bg_red')) {
div.classList.toggle('bg_red')
}
div.classList.toggle('bg_red')
}
</script>
</body>
</html>
7.失去焦点和获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1" value="老板消费吗？">
<script>
var inp = document.getElementById('d1')
// 获取焦点事件
inp.onfocus = function () {
// inp.value = ''
this.value = ''
console.log(this)
}
// 失去焦点事件
inp.onblur = function () {
inp.value = '没钱，不去'
}
// xss攻击 <script>while (true) {alert(123)}<//script>
// SQL注入
// csrf
</script>
</body>
</html>
8.省市下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="pro">
</select>
<select name="" id="city">
</select>
<script>
var pro = document.getElementById('pro')
var city = document.getElementById('city')
var data = {
"河北省": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
};
for (var key in data) {
// key => 河北省,北京,山东
// 创建省的option
var option = document.createElement('option'); // <option ></option>
// 设置属性
option.value = key; // // <option value='河北省'></option>
option.innerText = key;// <option value='河北省'>河北省</option>
// 把option放到select中， id=pro
pro.append(option)
}
pro.onchange = function () {
// 拿到当前的省
var currentPro = this.value;
var currentCityList = data[currentPro]; // ["朝阳区", "海淀区"]
city.innerText = ''
for (var i = 0; i < currentCityList.length; i++) {
var option = document.createElement('option'); // <option ></option>
// 设置属性
option.value = currentCityList[i]; // ["朝阳区", "海淀区"]
option.innerText = currentCityList[i];// <option value='河北省'>河北省</option>
// 把option放到select中， id=pro
city.append(option)
}
}
</script>
</body>
</html>
9.jq的引入方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>--> <script src="../../BaiduNetdiskDownload/代码%2035%20前端jQuery/jquery.min.js"></script></head><body></body></html>
10.jq的简单使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style>
11.基本筛选器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul><script> // .style.color = 'red' // $("ul li").css('color', 'red') // $("ul li:first").css('color', 'red') // $("ul li:last").css('color', 'red') // $("ul li:eq(2)").css('color', 'red') // $("ul li:odd").css('color', 'red') // $("ul li:even").css('color', 'red') // $("ul li:lt(3)").css('color', 'red') // $("ul li:gt(3)").css('color', 'red') //</script></body></html>
12.属性选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> [username] { } [username='ly'] { } div[username='ly'] { } </style></head><body><div username="egon">div</div><script> $('[username]').css('') $('[username="ly"]') $('div[username="ly"]')</script></body></html>
13.表单选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option></select><input type="checkbox" >1<input type="checkbox" checked> 2<input type="checkbox"> 3<input type="radio" name="gender1">1<input type="radio" name="gender2" checked> 2<input type="radio" name="gender" > 3<input type="radio" name="gender">1<input type="radio" name="gender"> 2<input type="radio" name="gender" checked> 3<script> // console.log($(":selected")) // 找到所有被选中的option // console.log($("[type='checkbox']:checked")) // 找到所有被选中的option console.log($("[name='gender']:checked")) // 找到所有被选中的option</script></body></html>
14.筛选器方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div id="d1"> <span class="c1"></span></div><div id="d2"> <span class="c1"></span></div><div id="d3"></div><div id="d4"></div><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul><script> // console.log($("#d1").next()) // console.log($("#d1").nextAll()) // console.log($("#d4").prev()) // prev => previous // document.getElementsByClassName('c1').parentElement.parentElement.parentElement.parentElement // console.log($(".c1").parent().parent()) // console.log($("#d2").children()) // // $('div span') // $("div").find("span") console.log($('ul li').eq(2))</script></body></html>
15.jq操作class
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div id="d1" class="c2"></div><script> // js // document.getElementById('d1').classList.add('c1') // jq $('#d1').addClass('c1') // $('#d1').removeClass('c2') // console.log($('#d1').hasClass('c2')) console.log($("#d1").toggleClass('c2')) console.log($("#d1").toggleClass('c2')) console.log($("#d1").toggleClass('c2')) console.log($("#d1").toggleClass('c2')) console.log($("#d1").toggleClass('c2'))</script></body></html>
16.文本操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div class="c1"></div><input type="text" id="d1" value="123"><script> // js // document.getElementsByClassName('c1')[0].innerHTML = '宝贝' // jq // $('.c1').html('<h1>宝贝</h1>') // $('.c1').text('宝贝') // 获取值操作 // js // document.getElementById('d1').value; // jq // console.log($('#d1').val()) // 获取值 // console.log($('#d1').val('456')) // 设置值</script></body></html>
17.属性操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div class="c1" >div <span></span></div><span class="c1" >div</span><script> // 属性操作 // js // document.getElementsByClassName('c1')[0].setAttribute('username', 'ly') // jq 设置属性 // console.log($('.c1').last()) $('.c1').last().attr('username', 'ly') // 链式操作 // 获取属性 console.log($('.c1').last().attr('username')) $('.c1').last().removeAttr('username') // $('span').parent().parent().parent().parent().parent()</script></body></html>
18.事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> .btn { width: 100px; height: 100px; background: orange; } </style></head><body><button class="btn"> 漂亮小姐姐，点击就送</button><script> // 第一种 // $('.btn').click(function () { // alert(123) // }) // 第二种 // $('.btn').on('click', function () { // alert(345) // }) // 克隆事件 $('.btn').click(function () { // 克隆事件 // console.log(this) // $('body').append($(this).clone()) // 默认不克隆事件 // $('body').append($(this).clone(true)) // 克隆事件 })</script></body></html>
19.左侧菜单栏案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> .left { position: fixed; width: 20%; height: 100%; background: darkgray; } .title { text-align: center; border: 1px solid green; } .hide { display: none; } </style></head><body><div class="left"> <div class="menu"> <div class="title">菜单一 <div class="item">11111</div> <div class="item">22222</div> <div class="item">33333</div> <div class="item">44444</div> </div> <div class="title"> 菜单二 <div class="item">11111</div> <div class="item">22222</div> <div class="item">33333</div> <div class="item">44444</div> </div> <div class="title">菜单三 <div class="item">11111</div> <div class="item">22222</div> <div class="item">33333</div> <div class="item">44444</div> </div> </div> <script> $('.title').click(function () { $('.item').addClass('hide') $(this).children().removeClass('hide') }) </script></div></body></html>
