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區(qū)別：
<div id="div1"><p>我是一名學員</p></div>
? ? <script src="./jquery-1.12.4.js"></script>
? ? <script>
? ? ? ? ?/* html和text的區(qū)別 */
? ? ? ? ?/* 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.節(jié)點操作：
<div>123</div>
? ? <script src="./jquery-1.12.4.js"></script>
? ? <script>
? ? ? ? /* 通過選擇器獲取節(jié)點 */
? ? ? ? console.log($('div'));
? ? ? ? /* 把dom節(jié)點轉換為jQuery節(jié)點 */
? ? ? ? /* let div1 = document.getElementsByTagName('div')[0];
? ? ? ? console.log($(div1)); */
? ? ? ? /* 使用HTML字符串創(chuàng)建jQuery節(jié)點 */
? ? ? ? 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.插入節(jié)點操作：
<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中 */
? ? ? ? ? ?/* 原生只能插入節(jié)點 */
? ? ? ? ? ?let li = $('<li>我是li</li>')
? ? ? ? ? /* ?$('ul').append(li) */
? ? ? ? ? /* append還能插入字符串 */
? ? ? ? ? $('ul').append('<li>我是li</li>')
? ? ? ? ? /* 被插入撵溃，功能一樣 */
? ? ? ? ? $('<li>我是li</li>').appendTo($('ul'))
? ? ? ?})
? ? </script>
插入節(jié)點練習：
<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.同級插入節(jié)點：
<div>我是div1</div>
? ? <script src="./jquery-1.12.4.js"></script>
? ? <script>
? ? ? ? ?/* 元素外部插入同輩節(jié)點 */
? ? ? ? /* ★ after和before都是在自身的后面添加巾兆，并不是最后面添加 */
? ? ? ? $('div').click(function(){
? ? ? ? ? ? //$(a).after(b) ?將b插入a之后
? ? ? ? ? ? $(this).after($('<h1>愛愛愛</h1>'))
? ? ? ? ? ? //$(b).insertAfter(a) ?將b插入a之后
? ? ? ? ? ? $(this).before($('<h1>我我我</h1>'))
? ? ? ? })
? ? </script>
