jquery find 找到frame select_jQuery基礎文法

一、jQuer介紹及安裝

1、jQuery介紹

jQuery是一個快速、簡潔的JavaScript架構，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript架構），極大簡化了JavaScript 程式設計。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax互動。

jQuery的核心特性可以總結為：具有獨特的鍊式文法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴充；擁有便捷的插件擴充機制和豐富的插件。jQuery相容各種主流浏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2、jQuery使用

下載下傳位址：jQuery CDN

壓縮版：https://code.jquery.com/jquery-1.12.4.min.js

正常版：https://code.jquery.com/jquery-1.12.4.js

jquery操作文檔：jQuery API 中文文檔 | jQuery API 中文線上手冊 | jquery api 下載下傳 | jquery api chm

這裡我們使用正常版來做實驗（友善檢視），壓縮版的适用于生産，版本使用1.12版本相容之前版本浏覽器。

（1）把 `jquery-1.12.4.js` 複制到同級目錄

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1">dream</div>
<script src="jquery-1.12.4.js"></script>
<script>
    //jQuery('#1');或者下面那種調用方法
    $('#1');
</script>
</body>
</html>

（2）轉換

jquery對象[0]   ===>> Dom對象
$(Dom對象)      ===>> jquery對象

jquery find 找到frame select_jQuery基礎文法

二、查找元素

1、基本選擇器

$('#id') ###查找id

$('.class') ###查找class

$('element') ###查找所有指定标簽

$('*') ###查找所有

$('a,p,...') ###查找多個标簽

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1" class="c1">
        <a>1</a>
        <a>1</a>
    </div>
    <div class="c1">
        <a>1</a>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

jquery find 找到frame select_jQuery基礎文法

2、層級選擇器

$('#i1 a')                 ###擷取id為i1下面的所有a标簽
$('#i1>a')                 ###父子，隻會一層

3、基本篩選器

（1）指令說明

$('li:first'); ###找出第一個 $('li:last'); ###找出最後一個 $('tr:eq(index)'); ###通過index查找

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script src="jquery-1.12.4.js"></script>
</body>
</html>

jquery find 找到frame select_jQuery基礎文法

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
<script src="jquery-1.12.4.js"></script>
</body>
</html>

jquery find 找到frame select_jQuery基礎文法

（2）層級和first疊加使用

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div  class="c1">
        <div>
            <a>2</a>
        </div>
        <a>1</a>                 //找出這個
        <a>1</a>
        <a>1</a>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

$('.c1>a:first') ###我們可以進行疊加使用

4、屬性

$('[attribute]')               ###具有attribute屬性的所有标簽
$('[attribute="value"]')       ###attribute屬性等于value的

5、選擇執行個體

$('#tb :checkbox').prop('checked');            ###擷取值
$('#tb :checkbox').prop('checked',true);       ###設定值

jQuery内置循環：$('#tb :checkbox').xxx

$('#tb :checkbox').each(function(k){
	//k目前索引值
	//this，DOM，目前循環得元素 $(this)
})


eg：
三元運算：var v = 條件? 真值:假值
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全選" onclick="CheckAll();" />
<input type="button" value="取消" onclick="Cancel();"/>
<input type="button" value="反選" onclick="Reverse();" />
<table >
    <thead>
        <tr>
            <th>選擇</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td><input type='checkbox'/></td>
            <td>dream</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td><input type='checkbox'/></td>
            <td>dream1</td>
            <td>男</td>
            <td>21</td>
        </tr>
        <tr>
            <td><input type='checkbox'/></td>
            <td>dream2</td>
            <td>男</td>
            <td>22</td>
        </tr>
    </tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
    function CheckAll() {
        $('#tb :checkbox').prop('checked',true);
    }
    function Cancel() {
        $('#tb :checkbox').prop('checked',false);
    }
        function Reverse() {
        $('#tb :checkbox').each(function () {
            //還可以通過this.checked判斷
            //this目前循環得每個元素
            //三元運算 var v = 條件? 真值:假值;
            var v = $(this).prop('checked')?false:true;
            $(this).prop('checked',v);
        })
    }
</script>
</body>
</html>

6、樣式操作

$(#id).addClass('hide') ###添加class $(#id).removeClass('hide') ###删除class $(#id).toggleClass('hide') ###對設定或移除被選元素的一個或多個類進行切換

開關：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id='i1' type="button" value="開關" />
    <div class="c1 hide">dreamya</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            //上面這幾條等于下面一條
            // if($('.c1').hasClass('hide')){
            //     $('.c1').removeClass('hide');
            // }else {
            //     $('.c1').addClass('hide');
            // }
            $('.c1').toggleClass('hide');
        })
    </script>
</body>
</html>

三、篩選器

1、查找

$(this).next() ###下一個

$(this).nextAll() ###所有下面的

$(this).nextUntil(#id) ###找到所有下面到id為止

$(this).prev() ###上一個

$(this).prevAll() ###所有上面的

$(this).prevUntil(#id) ###找到所有上面到id為止

$(this).parent() ###父

$(this).parents() ###祖先

$(this).parentsUntil() ###直到那個祖先

$(this). siblings() ###兄弟

$(#id).find(#id1) ###查找所有id下面的的id1标簽

2、過濾

$(this).eq(index|-index) ###選擇器選取帶有指定index值的元素

$(this).first() ###選擇器選取第一個元素

$(this).last() ###選擇器選取最後一個元素

$(this).hasClass(class) ###檢查被選元素是否包含指定的class

eg.

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: #0c0c0c;
            color: #9cc2cb;
            height: 40px;
            line-height: 40px;
            width:80px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div class="item">
            <div class="header">目錄一</div>
            <div class="content">内容一</div>
            <div class="content">内容一</div>
        </div>
        <div class="item">
            <div class="header">目錄二</div>
            <div class="content hide">内容二</div>
            <div class="content hide">内容二</div>
        </div>
        <div class="item">
            <div class="header">目錄三</div>
            <div class="content hide">内容三</div>
            <div class="content hide">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function () {
            //可以合并成（鍊式程式設計）：$(this).nextAll().removeClass('hide').parent().siblings().find('.content').addClass('hide');
            $(this).nextAll().removeClass('hide');
            $(this).parent().siblings().find('.content').addClass('hide');
        })
    </script>
</body>
</html>

文檔操作：

$(#id).text() ###擷取文本内容

$(#id).text("<a>1</a>") ###設定文本内容

$(#id).html() ###擷取html内容

$(#id).html("<a>1</a>") ###設定文本内容

Dom中有value：

$(#id).val() ###查詢值

$(#id).val("1") ###設定值

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .frame {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 600px;
            height: 400px;
            margin-left: -300px;
            margin-top: -200px;
            background-color: #0f9e60;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity:0.7;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
<input type="button" value="添加" class="edit"/>
<table >
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年齡</th>
            <th>編輯</th>
            <th>删除</th>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td>dream</td>
            <td>男</td>
            <td>20</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
        <tr>
            <td>DM</td>
            <td>男</td>
            <td>21</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
        <tr>
            <td>dreamya</td>
            <td>男</td>
            <td>22</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
    </tbody>
</table>
<div class="frame hide">
    <span>姓名：</span>
    <input name="username" type="text" />
    <br/>
    <span>性别：</span>
    <input name="gender" type="text" />
    <br/>
    <span>年齡：</span>
    <input name="age" type="text" />
    <input name='cancle' type="button" value="取消">
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.edit').click(function () {
        //删除hide
        $('.shadow,.frame').removeClass('hide');
    })
    //添加hide和指派
    $('#tb .edit').click(function () {

        $('.shadow,.frame').removeClass('hide');
        var tds = $(this).parent().prevAll();
        //進行指派
        var username = $(tds[2]).text();
        var gender = $(tds[1]).text()
        var age = $(tds[0]).text();
        $('.frame input[name="username"]').val(username);
        $('.frame input[name="gender"]').val(gender);
        $('.frame input[name="age"]').val(age);
    });

    //删除hide
    $('.frame input[name="cancle"]').click(function () {
        $('.shadow,.frame').addClass('hide');
        //清除原有的值，防止顯示錯亂
        $('.frame input[type="text"]').val('');
    })
</script>
</body>
</html>

四、屬性操作

1、用于自定義屬性

$(#id).attr(key)               ###擷取屬性
$(#id).attr(key,value)         ###設定屬性，可以
$(#id).removeattr(key)         ###删除屬性

2、專用于checkbox，radio

$(#id).prop('checked')         ####擷取值
$(#id).prop('checked',true)    ###設定值

3、示例一

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .frame {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 600px;
            height: 400px;
            margin-left: -300px;
            margin-top: -200px;
            background-color: #0f9e60;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity:0.7;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
<input type="button" value="添加" class="edit"/>
<table >
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年齡</th>
            <th>編輯</th>
            <th>删除</th>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td target="username">dream</td>
            <td target="gender">男</td>
            <td target="age">20</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
        <tr>
            <td target="username">DM</td>
            <td target="gender">男</td>
            <td target="age">21</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
        <tr>
            <td target="username">dreamya</td>
            <td target="gender">男</td>
            <td target="age">22</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
    </tbody>
</table>
<div class="frame hide">
    <span>姓名：</span>
    <input name="username" type="text" />
    <br/>
    <span>性别：</span>
    <input name="gender" type="text" />
    <br/>
    <span>年齡：</span>
    <input name="age" type="text" />
    <input name='cancle' type="button" value="取消">
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.edit').click(function () {
        //删除hide
        $('.shadow,.frame').removeClass('hide');
    })
    //添加hide和指派
    $('#tb .edit').click(function () {

        $('.shadow,.frame').removeClass('hide');
        var tds = $(this).parent().prevAll();
        //進行指派
        $(tds).each(function () {
            //擷取目前自定義target屬性值
            var n = $(this).attr('target');
            //擷取目前文本内容
            var text = $(this).text();
            var temp = '.frame input[name="' + n + '"]';
            $(temp).val(text);
        })
        // var username = $(tds[2]).text();
        // var gender = $(tds[1]).text()
        // var age = $(tds[0]).text();
        // $('.frame input[name="username"]').val(username);
        // $('.frame input[name="gender"]').val(gender);
        // $('.frame input[name="age"]').val(age);
    });

    //删除hide
    $('.frame input[name="cancle"]').click(function () {
        $('.shadow,.frame').addClass('hide');
        //清除原有的值，防止顯示錯亂
        $('.frame input[type="text"]').val('');
    })
</script>
</body>
</html>

4、菜單切換

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .active{
            color: burlywood;
            background-color: #001F3F;
        }
        .menu{
            height: 38px;
            background-color: #0c0c0c;
            color: #9cc2cb;
            line-height: 38px;
            cursor: pointer;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid rebeccapurple;
            padding: 0 10px;
        }
        .content{
            min-height: 200px;
            border: 1px solid burlywood;
        }

    </style>
</head>
<body>
<div style="width: 500px; margin: 0 auto;">
    <div class="menu">
        <div class="menu-item active" a="1">菜單一</div>
        <div class="menu-item" a="2">菜單二</div>
        <div class="menu-item" a="3">菜單三</div>
    </div>
    <div class="content">
        <div b="1">内容一</div>
        <div class="hide" b="2">内容二</div>
        <div class="hide" b="3">内容三</div>
    </div>
</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu .menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            var n = $(this).attr('a');
            $('.content ').children('[b="' + n + '"]').removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>

5、通過index實作

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .active{
            color: burlywood;
            background-color: #001F3F;
        }
        .menu{
            height: 38px;
            background-color: #0c0c0c;
            color: #9cc2cb;
            line-height: 38px;
            cursor: pointer;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid rebeccapurple;
            padding: 0 10px;
        }
        .content{
            min-height: 200px;
            border: 1px solid burlywood;
        }

    </style>
</head>
<body>
<div style="width: 500px; margin: 0 auto;">
    <div class="menu">
        <div class="menu-item active">菜單一</div>
        <div class="menu-item">菜單二</div>
        <div class="menu-item">菜單三</div>
    </div>
    <div class="content">
        <div>内容一</div>
        <div class="hide">内容二</div>
        <div class="hide">内容三</div>
    </div>
</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu .menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            // $(this).index();
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>

相信很多人在剛接觸前端或者中期時候總會遇到一些問題及瓶頸期，如學了一段時間沒有方向感或者堅持不下去一個人學習枯燥乏味有問題也不知道怎麼解決，對此我整理了一些資料喜歡我的文章想與更多資深大牛一起讨論和學習的話歡迎加入我的學習交流群907694362

jquery find 找到frame select_jQuery基礎文法

（1）把 `jquery-1.12.4.js` 複制到同級目錄

（2）轉換

二、查找元素

1、基本選擇器

2、層級選擇器

3、基本篩選器

（1）指令說明

4、屬性

1、用于自定義屬性

2、專用于checkbox，radio

繼續閱讀

addeventlistener事件參數_JavaScript 事件的傳播

append替換代碼後jquery不起作用_jQuery設計思想

jquery csv轉化為數組_什麼是jQuery？什麼是Jquery？為什麼要使用Jquery？回顧javascript

jquery 判斷是否有類名_jQuery簡單小結(1)

jquery 循環_jquery實作無限循環滾動複制下面代碼檢視效果

jquery 監聽td點選事件_React 事件 | 1. React 中的事件委托

jquery find 找到frame select_jQuery基礎文法

（1）把 jquery-1.12.4.js 複制到同級目錄

（2）轉換

二、查找元素

1、基本選擇器

2、層級選擇器

3、基本篩選器

（1）指令說明

4、屬性

1、用于自定義屬性

2、專用于checkbox，radio

繼續閱讀

（1）把 `jquery-1.12.4.js` 複制到同級目錄