前端之JQuery
jquery框架
#一、what:
jQuery是對js進行的二次封裝的工具包
二次封裝：比js使用起來便捷了，操做比就是綜合了(寫一句jq能夠實現多句js邏輯)，底層就是原生js
工具包：jq就是一堆函數的集合體，經過jq對象來調用(jQuery)
#二、why：
跟快速使用js
#三、where：
使用js的地方均可以使用jq
#四、how：
1.官網下載：https://jquery.com/download/
jquery-3.4.1.js | jquery-3.4.1.min.js
2.在 須要jq環境的頁面中 使用jq
<script src="js/jquery-3.4.1.js"></script>
<script>
// $ 就是jQuery對象，可使用jQuery的全部功能
</script>
3.根據API學習jq：http://jquery.cuishifeng.cn/
jq引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// js - ES語法 | 瀏覽器(BOM) window.* | 文檔(DOM window.document) document.*
// window.alert('js code');
// window.document.write(123)
// window.print()
// 如何寫jq代碼 jQuery至關於$
console.log(jQuery);
console.log($);
window.owen = 'Owen';
console.log(window.owen);
console.log(owen);
console.log($owen);
</script>
</html>
jq操做頁面
// 總結：
`
1. $('css3選擇器語法') 就是jq選擇器，得到的是jq對象，jq對象能夠理解爲存放了js對象的數組 （存放了幾個js對象不須要關心）
2. jq對象轉換爲js對象 - jq對象[js對象所在索引] - 可使用js的語法
3. js對象轉換爲jq對象 - $(js對象) - 可使用jq的語法
；
// 操做頁面的三步驟
// 1.獲取標籤
// 2.綁定事件
// 3.操做標籤
// 文本
// $div.text() 文本內容
// $div.html() 標籤內容
// $inp.val() 表單內容
#案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>標題</h1>
<p class="p1">p11111111111111111111111111</p>
<p class="p2">p22222222222222222222222222</p>
<div>
<b>div的加粗內容</b>
</div>
<form action="">
<input type="text">
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// 1.jq選擇器 - 獲得的是jq對象 - jq對象能夠調用jq庫的全部功能
// $('css語法選擇器')
let h1 = $('h1');
console.log(h1);
let p1 = $('.p1');
let p2 = $('p:nth-of-type(2)');
console.log(p1, p2);
// 想經過js對象獲取第2個p的文本內容
let ps = $('p');
console.log(ps);
let _p2 = ps[1]; // jq對象能夠理解爲存放了js對象的數組
console.log(_p2.innerText);
// 想經過jq對象獲取第2個p的文本內容
p2 = $(_p2);
console.log(p2.text());
// 總結：
`
1. $('css3選擇器語法') 就是jq選擇器，得到的是jq對象，jq對象能夠理解爲存放了js對象的數組 （存放了幾個js對象不須要關心）
2. jq對象轉換爲js對象 - jq對象[js對象所在索引] - 可使用js的語法
3. js對象轉換爲jq對象 - $(js對象) - 可使用jq的語法
`;
</script>
<script>
// 操做頁面的三步驟
// 1.獲取標籤
// 2.綁定事件
// 3.操做標籤
// $('h1').click(function (ev) {
// // jq的事件對象，但對js事件對象作了徹底兼容
// console.log(ev);
// 點擊座標
// console.log(ev.clientX);
// console.log(ev.clientY);
// })
// $('h1').on('click', function (ev) {
// console.log(ev);
// })
$('p').click(function () {
// 在jq事件中的this仍是js對象，若是要使用jq功能，須要將this轉換爲jq對象
console.log($(this));
console.log($(this).text());
});
// 文本
// $div.text() 文本內容
// $div.html() 標籤內容
// $inp.val() 表單內容
// 需求1：點擊h1獲取 自身文本內容、div的標籤內容、input的表單內容
$('h1').click(function () {
console.log($(this).text());
console.log($('div').html());
console.log($('input').val());
})
</script>
</html>
jq經常使用操做
// 1、文本操做
// $div.text() 文本內容
// $div.html() 標籤內容
// $inp.val() 表單內容
// 2、樣式操做
// 獲取樣式: $div.css('css中的樣式屬性名')
// 設置樣式:
`
$div.css('css中的樣式屬性名', '屬性值'); // 單一設置
$div.css({
'屬性1': '值1',
...
'屬性n': '值n',
});
$div.css('屬性', function (index, oldValue) {
console.log(oldValue);
// $(this) 能夠拿到調用者對象
return 返回值就是要設置的值(能夠與自身其餘屬性，或是頁面其餘標籤，或是自定義邏輯有關係);
})
// 3、類名 - 能夠一次性獲取提早設置好的一套樣式
`
增長類名：$div.addClass('類名')
刪除類名：$div.removeClass('類名')
切換類名：$div.toggleClass('類名') 沒有就添加 存在就刪除
// 4、屬性
`
獲取屬性值：$div.attr('屬性名')
設置屬性值：$div.attr('屬性名', '屬性值或函數')
刪除屬性值：$div.attr('屬性名', '')
//案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
h1 {
font-size: 36px;
text-align: center;
}
.box {
width: 200px;
height: 200px;
background-color: orange;
}
.red {
background-color: red;
border-radius: 50%;
}
.yellow {
width: 400px;
border-radius: 100px;
background-color: yellow;
}
.blue {
width: 400px;
border-radius: 50%;
background-color: blue;
}
</style>
</head>
<body>
<h1 id="h1" style="color: red">標題</h1>
<img src="" alt="">
<button class="btn1">紅</button>
<button class="btn2">黃</button>
<button class="btn3">藍</button>
<div class="box"></div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
$('h1').click(function () {
//click 和on都是點擊事件
//$(this)獲取一個jq對象----$this----- 這個對象變量名可自定義
let $this = $(this);
//經過jq對象獲取顏色屬性
let color = $this .css('color');
//經過jq對象獲取字體大小屬性
let fs = $this.css('font-size');
//經過jq對象獲取位置屬性
let ta = $this.css('text-align');
//parseInt(fs)能夠獲得取整數值 去除單位
console.log(color, parseInt(fs), ta);
//經過對象設置背景顏色
$this.css('background-color', 'orange');
$this.css({
'background-color': 'pink',
'border-radius': '10px',
'width': '200px',
});
//設置高度，爲寬度的一半
$this.css('height', function (index, oldValue) {
console.log(oldValue);
let w = $(this).width();
return w / 2;
})
})
//點擊紅色按鈕 變爲紅色，由於添加了紅色css樣式
$('.btn1').click(function () {
$('.box').addClass('red');
$('.box').removeClass('yellow');
$('.box').removeClass('blue');
// $('.box').toggleClass('red'); // 無red類添加，反之去除
});
//點擊黃色按鈕 變爲紅色，由於添加了黃色css樣式
$('.btn2').click(function () {
let $box = $('.box');
//會覆蓋寫
$box[0].className = 'box';
$box.addClass('yellow');
});
//點擊藍色按鈕 變爲紅色，由於添加了藍色css樣式
$('.btn3').click(function () {
$('.box').addClass('blue');
});
$('h1').click(function () {
//獲取屬性值
let h1_id = $(this).attr('id');
console.log(h1_id);
//設置屬性值
$('img').attr('src', function () {
return 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg'
});
//刪除屬性值
$(this).attr('id', '');
})
</script>
</html>
jq鏈式操做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>標題</h1>
</body>
<script src="js/jquery-3.4.1.js"></script>
<!--之後項目線上可直接外聯到： CDN服務器 | 官網服務器可能會變化 -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
<script>
// 經過$('h1') jq對象設置屬性
// let _self = $('h1').css('color','orange')
//
// _self = _self.click(function () {
// console.log(this)
// });
// //設置背景顏色
// _self = _self.css('background','red');
//鏈式設置屬性
$('h1').css('color','orange').css('background','red').click(function () {
console.log(this)
}).text('修改標題');
</script>
</html>
jq操做文檔
// 1、快速定位到某一個jq對象
`
// 1）在jq集合中快速拿到某一個jq對象: jq對象.eq(index)
// $('.d:eq(1)') == $('.d').eq(1)
// $('.d').eq(1).click(function () {
// alert(123)
// })
// 2）在jq集合中都具備系統事件，在事件中如何區別每個jq對象
// $(this) | 索引
$('.d').click(function () {
// 標籤所在層級的索引，不是在jq對象數組中的索引
let index = $(this).index();
console.log(index)
});
// 2、經過自身快速定位到 "親戚"
`上兄弟(們) prev(All)
下兄弟(們) next(All)
兄弟們 siblings
孩子們 children
父親(們)
`;
// 3、動態生成頁面結構
// let $table = $('<table></table>');
// $table.css({
// border: '1px'
// });
// $('body').append($table); // 加入到body最後
// $('body').prepend($table); // 加入到body最後
// $('p').before($table); // 加入到p以前
// $('p').after($table); // 加入到p以後
//4、案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操做文檔</title>
<style>
.d {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
內容：<input type="text">
行：<input type="text">
列：<input type="text">
<p>表格</p>
<div>
<div class="d d1"></div>
<div class="d d2">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class="d d3"></div>
<div class="d d4"></div>
</div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
let $d2 = $('.d2');
console.log($d2);
//找下一個
let next = $d2.next();
console.log(next);
//找下面全部兄弟們
let nexts = $d2.nextAll();
console.log(nexts);
//找前一個
let prev = $d2.prev();
console.log(prev);
//找兄弟
let siblings = $d2.siblings();
console.log(siblings);
//找孩子們
let children = $d2.children();
console.log(children);
//找長輩們
let parent = $d2.parent();
console.log(parent);
`;
// 需求：點擊表格，在以後插入指定寬高的表格
$('p').click(function () {
let inps = $('input');
// 表
let table = $('<table border="1"></table>');
//獲取第二個輸入框輸入的值
let row = inps.eq(1).val();
console.log(typeof(inps.eq(1).val()));
//獲取第三個輸入框輸入的值
let col = inps.eq(2).val();
// 行
for (let i = 0; i < row; i++) {
let tr = $('<tr></tr>');
table.append(tr);
// 列
for (let j = 0; j < col; j++) {
let td = $('<td>' + inps.eq(0).val() + '</td>');
tr.append(td);
}
}
$(this).after(table);
})
</script>
</html>
相關文章
- 1. 前端之Jquery
- 2. 前端 之 jQuery
- 3. 前端之jQuery
- 4. 前端之JQuery
- 5. python15-前端之jQuery
- 6. DAY13-前端之jQuery
- 7. Part15 – 前端之jQuery
- 8. python前端之JQuery
- 9. 前端神器之jquery
- 10. 前端基礎之jQuery
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • XSLT - 在客戶端 - XSLT 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端之Jquery
- 2. 前端 之 jQuery
- 3. 前端之jQuery
- 4. 前端之JQuery
- 5. python15-前端之jQuery
- 6. DAY13-前端之jQuery
- 7. Part15 – 前端之jQuery
- 8. python前端之JQuery
- 9. 前端神器之jquery
- 10. 前端基礎之jQuery