JQuery語法規則

阿新 • • 發佈：2019-01-12

1.JQuery語法：文件就緒函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--匯入JQuery檔案-->
    <script src="../../js/jquery-3.1.1.min.js">

    </script>
    <script>
        //文件就緒函式
//        $(document).ready(function(){
//            //隱藏元素
//            $('p').hide();
//        });

        //簡化版文件就緒函式
        $(function(){
            //隱藏元素
            $('p').hide();
        })
    </script>
    <title>Title</title>
</head>
<body>
    <p>nneeee</p>
    <p>sakdl;a</p>
</body>
</html>

2.JQuery語法中的滑鼠事件及在其中新增一個類和刪除一個類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img{
            margin: 10px 10px;
            border: 1px solid grey;
        }
        .a{
            border: 3px solid orange;
        }
    </style>
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            //選擇元素,新增事件
            $('img').mouseover(function(){
//                $(this).css('border','3px solid orange')
                //新增一個類
                $(this).addClass('a');
            }).mouseout(function(){
//                $(this).css('border','1px solid grey')
                //刪除一個類9-
                $(this).removeClass('a');
            });
        })
    </script>
    <title>Title</title>
</head>
<body>
    <img src="../../img/new_01" alt="">
    <img src="../../img/new_02" alt="">
    <img src="../../img/new_03" alt="">
</body>
</html>

3.DOM物件與JQuery物件的相互轉換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        //原生DOM物件（JS物件）轉化成JQuery物件   $(原生物件)
        $(function(){
            var d = document.getElementById('d');
//            d.innerText('sdada');
//            var d = $('#d');
            $(d).html('asdas');
            //JQuery物件轉原生物件：1、$(....)[0]
            var e = $('#e');
            e[0].innerText = 'sadaa';
            //2、$(...).get(0)
            e.get(0).innerText = 'sadaa';
        })
    </script>
    <title>DOM物件與JQuery物件的相互轉換</title>
</head>
<body>
    <div id="d">
    </div>
<div id="e">
</div>
</body>
</html>

4.JQuery語法中經常用的$符號，當有好幾個庫，有$符號衝突時，放棄$符號

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            jQuery.noConflict();
//            $('#a').html('sdfassddasd');
            jQuery('#a').html('sdfassddasd')
        })
    </script>
    <title>Title</title>
</head>
<body>
    <div id="a">
    </div>
</body>
</html>

5.用JQuery語言獲取標籤元素以及修改標籤的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            //獲取div標籤內部的元素
           alert($('#d').html());

            //修改div標籤裡的內容
            $('#d').html('<span>把p標修改為span標籤</span><h1>h1標籤</h1>');

            //獲取div標籤內部的文字：
            alert($('#d').text());

            //修改div標籤裡的文字
            $('#d').text('text')

            //獲取輸入框的value
            alert($('#t').val());

            //修改輸入框裡的value值
            $('#t').val('asdada')
        })
    </script>
    <title>Title</title>
</head>
<body>
    <div id="d">
        <p>sadadasda</p>
        <a href="">sdad</a>
        <!--把標籤當做普通文字進行解析-->
        <xmp><p>ssadlfka</p></xmp>
        sfaerwevsv
        <input type="text" id="t" value="input">
    </div>
</body>
</html>

6.通過JQuery修改CSS樣式

<script>
        $(function(){
            $('div').css({'background-color':'blue','font-size':'25px','color':'red'})
        })
    </script>

7.toggleClass：在刪除與新增類操作不停切換時，推薦使用toggleClass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .a{
            background-color: orangered;
        }
    </style>
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){

            $('#d').mouseover(function(){
                $(this).toggleClass('a')
            }).mouseout(function(){
                $(this).toggleClass('a')
            })
        })
    </script>
    <title>Title</title>
</head>
<body>
<div id="d">asda</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .a{
            background-color: orangered;
        }
    </style>
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){

            $('#d').click(function(){
                $(this).toggleClass('a')
            })
        })
    </script>
    <title>Title</title>
</head>
<body>
<div id="d">toggleClass</div>
</body>
</html>

8.JQuery語法克隆（複製）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            var table = $('<table border="1"><tr><td>123</td></tr></table>')
            $('div').append(table);
           //table.remove();
            table.clone().appendTo($('div'))
        })
    </script>
    <title>Title</title>
</head>
<body>
    <div>

    </div>
</body>
</html>

JQuery語法規則

1.JQuery語法：文件就緒函式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

eclipse使用與java語法規則

javaeclipse的使用1、運行點擊“三角圖標”或右鍵Run As運行2、3、java語法規範1、括號要成對出現2、每句代碼應該有分號結束3、java語法區分大小寫4、一個文件只能寫一個帶有public的class聲明，還必須和文件名一致。一個文件中不可以有多個帶有public的修飾符號5、名稱寫的時候不

XML 語法規則

可讀性 color blog version div bsp 出現 odin 不能 CDATA區當大量的轉義字符出現在xml文檔中時，會使xml文檔的可讀性大幅度降低，這時如果使用CDATA段就會好一些。在CDATA段中出現的“<”、“>”、“"”、

Jquery語法

祖先文檔 llb 內容進行包括 slide 語法滑動 <!doctype html>聲明HTML版本編寫指令 seo font-weight: 改變字體粗細 bold 變粗 100-800； opacity 設置元素的透明級別（0-1之間） |z-

JSX 的基本語法規則

color scrip 基本語法 class 代碼規則 spa 解析 html 標簽 JSX 的基本語法規則：遇到 HTML 標簽（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析 JSX 的基本語法

關於Java的基本語法規則

類繼承關鍵字進行改變類的屬性 log bsp 類型 get方法關鍵字+class+類名{ 　　關鍵字+關鍵字+變量名　　關鍵字+關鍵字+輸出類型+方法名（輸入類型+變量名）{ 　　} } 參數的傳遞：子類繼承父類，父類中的屬性改變，子類中調用到的父類的屬

Django模板常用語法規則

parent 命名表達 list 同時 views 轉化形式 sas Django 模板標簽 if/else 標簽 for 標簽 ifequal/ifnotequal 標簽註釋標簽過濾器 include 標簽 URL標簽模板繼承 i

jQuary教程3: jQuery語法1

AS expand -- ack 想要 ddc 樣式操作 == 1.jQuery樣式操作 1.1 設置或者修改樣式，操作的是style屬性。單樣式語法: jQuery對象.css(‘屬性名‘, ‘屬性值‘) //html <div id="box"><

CSS入門基礎基礎語法規則

不起作用 padding 如果文檔流 lap link 重疊 url vertical 基礎語法規則 CSS 規則由兩個主要的部分構成： 1.選擇器:通常是需要改變樣式的 HTML 元素 2.一條或多條聲明：由一個屬性和一個值組成。每個屬性有一個值。屬性和值被冒號分開。

Web開發——JavaScript庫（jQuery 語法 / 選擇器 / 事件）

gb2312 cto 選擇 sel color 事件處理器效果處理程序 http 　　通過 jQuery，您可以選取（查詢，query） HTML 元素，並對它們執行“操作”（actions）。 1、jQuery 語法 1.1 jQuery語法舉例 1.1.1 $(th

POM的語法規則

一、POM簡介 pom作為專案物件模型，通過使用pom.xml來實現管理maven專案，主要描述了專案的如下部分：配置檔案、開發者需要遵循的規則、缺陷管理系統、組織和licenses、專案的url、專案的依賴性和其它所有的專案相關因素。二、POM的語法規則一份比較全的pom.

Javascript和Jquery語法對比總結

目的相信大家都知道jq是js的一個類庫,是為了方便我們開發前端，但是筆者在剛開始學習js和jq時經常將兩者的語法記混和混用，所以整理下兩者實現相同功能之前的語法區別。宣告變數 javascript宣告變數語法 var + 變數名 =值；或者 let + 標量名=值；ES6新增了let命令，用於宣

jQuery語法以及應用

在應用jquery之前，我們要知道它的一些基本的語法 jQuery 語法 jQuery 語法是為 HTML 元素的選取編制的，可以對元素執行某些操作。基礎語法是：$(selector).action() 美元符號定義 jQuery 選擇符（selector）“查詢”和“

CSDN Markdown編輯器語法規則

本文記錄了CSDN原始提供的Markdown編輯器語法以及部分博主在應用過程中用到的語法規則。更新於2018.10.18。這裡寫自定義目錄標題歡迎使用Markdown編輯器新的改變功能快捷鍵合理的建立標題，有助於目錄的生

jQuery 語法

brackets 加載 itl selector his 當前 title html hid Query 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。基礎語法： $(selector).action() 美元符號定義 jQuery 選擇符（selecto

【 MAKEFILE 編程基礎之二】MAKEFILE 書寫規劃以及語法規則！

情況 log path變量介紹情況下是把一般來說 sch cpp 本站文章均為李華明Himi 原創,轉載務必在明顯處註明：轉載自【黑米GameDev街區】原文鏈接: http://www.himigame.com/gcc-makefile/768.html

Python 基本語法規則

1. try： try: tree = ET.parse(xmlFilePath) root = tree.getroot() except Exception as e: logging.warni

nginx之Location語法規則

轉載自：https://www.cnblogs.com/crazylqy/p/6892010.html 1Location語法規則 1.1 Location規則語法規則： location [=|~|~*|^~] /uri/ {… } 首先匹配 =，其次匹配^~,其次是按檔案中順序

Python基礎學習：類語法規則

【類】一、定義方式： class 類名(object): 二、呼叫方式： 1、類名() 2、物件 = 類名() #當一個變數等於一個類名() #時它就叫物件三、方法： 1、公有方法() #方法跟函式基本是類似，不同之處在

rewrite語法規則

rewrite規則格式：rewrite regex replaceent [flag] 1)rewrite配置可以在server 、location以及if配置段內生效 2）regex是用於匹配U

JQuery語法規則

相關推薦