2. 程式人生 > 其它 >子串首次出現的位置

子串首次出現的位置

阿新 • • 發佈：2021-01-27

技術標籤：Java Web

1.jQuery簡介

1.1 什麼是jQuery

jQuery: JavaScript Query JS查詢
jQuery是一門輕量的、免費開源的JS函式庫（就是JS的簡單框架）
jQuery可以極大的簡化JS程式碼
jQuery的核心思想：“寫的更少，但做的更多”

輕量的：是指一個技術或框架對程式碼或程式的侵入程度是比較低的。
或者說程式碼對該技術依賴程度越低，這個技術越輕。對該技術的依賴程度越高，這個技術越重。
jQuery本質就是一個包含了很多函式的JS檔案，如果要在某一個HTML中使用這個JS檔案中的函式，就必須得將JS檔案引入到HTML中*（想使用jQuery，就得引入jQuery的函式庫檔案，就是一個JS檔案）

1.2 jQuery的優勢

(1) 可以極大的簡化JS程式碼
(2) 可以像CSS選擇器一樣獲取html元素
css中獲取所有的div,給div新增樣式:

div{ css屬性... }

jQuery中獲取所有div,給div新增邊框樣式:

$("div").css("border", "2px solid red");

JS獲取id為div1的元素: document.getElementById("div1")
jQuery獲取id為div1的元素: $("#div1")

(3) 可以通過修改css屬性控制頁面的效果

(4) 可以相容常用的瀏覽器
比如: JS中的innerText屬性、removeNode()函式、replaceNode( )函式 這些函式在某些瀏覽器中是無法使用的。
jQuery中提供了相應的函式（ text函式、remove函式、replaceWith函式 ）
常用瀏覽器：谷歌瀏覽器、火狐瀏覽器、蘋果瀏覽器、歐朋瀏覽器等

1.3 jQuery引入

jQuery的函式庫檔案就是一個普通的JS檔案，引入jQuery和引入JS檔案的方式一樣

<!-- 在使用jQuery之前，必須先引入jQuery的函式庫檔案 -->
<script src="js/jquery-1.8.3.js"
 
></script>

在引入jQuery函式庫檔案時，如果檔案引入路徑錯誤，則會導致檔案引入失敗，如下圖：
在這裡插入圖片描述

1.4 文件就緒時間函式

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必須先引入jQuery的函式庫檔案 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	//1.獲取id為demo的h1元素
	var h1 = document.getElementById( "demo" );
	//2.獲取h1元素中的內容( innerHTML )
	alert( h1.innerHTML );
</script>
</head>
<body>
	<h1 id="demo">jQuery的引入示例...</h1>
</body>

問題描述：上面的程式碼在執行時，會報一個錯誤：
在這裡插入圖片描述

1.4.1 解決方式一

將script標籤移到body內部，也就是h1元素的後面
這樣瀏覽器在載入時，會先載入h1元素，再執行獲取h1元素的程式碼，由於在獲取h1元素之前，h1元素已經被瀏覽器載入過了，所以後面再獲取就能夠獲取到！
程式碼示例：

<body>
	<h1 id="demo">jQuery的引入示例...</h1>
	<script>
		//1.獲取id為demo的h1元素
		var h1 = document.getElementById( "demo" );
		//2.獲取h1元素中的內容( innerHTML )
		alert( h1.innerHTML );
	</script>
</body>

1.4.2 解決方式二

將獲取元素的程式碼放在文件就緒事件函式中，文件就緒事件函式會在瀏覽器載入完所有的html元素後（也就是載入完最後一個html元素時）立即執行
由於當前網頁中的所有元素都被載入了，h1元素肯定也被載入了，此時再獲取h1元素就一定能獲取到

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必須先引入jQuery的函式庫檔案 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	$(function(){
		//1.獲取id為demo的h1元素
		var h1 = document.getElementById( "demo" );
		//2.獲取h1元素中的內容( innerHTML )
		alert( h1.innerHTML );
	});
</script>
</head>
<body>
	<h1 id="demo">jQuery的引入示例...</h1>
</body>

1.4.3 解決方式三

將獲取元素的程式碼放在一個自定義的函式中，並將該函式繫結在h1元素的點選事件上，當我們點選h1元素時會執行自定義的函式，函式執行時才獲取h1元素，此時就能夠獲取到h1元素

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必須先引入jQuery的函式庫檔案 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	function fn1(){
		//1.獲取id為demo的h1元素
		var h1 = document.getElementById( "demo" );
		//2.獲取h1元素中的內容( innerHTML )
		alert( h1.innerHTML );
	}
</script>
</head>
<body>
	<h1 id="demo" onclick="fn1()">jQuery的引入示例...</h1>
</body>

總結：什麼時候該使用文件就緒事件函式?
如果在獲取元素時，獲取元素的程式碼執行的時機，比元素本身載入的時間還要早，如果元素還沒有載入就獲取，必然是獲取不到的。
可以將獲取元素的程式碼放在文件就緒事件函式中，等瀏覽器載入完整個網頁後，文件就緒事件函式才會執行，此時所有的元素都被載入了，再獲取任何元素都能獲取到！
jQuery提供的文件就緒事件函式（簡寫形式）：

<script>
	$(function(){
		//在瀏覽器載入完整個html網頁後立即執行
	});
</script>

其完整寫法為：

<script>
	$(document).ready(function(){
		//在瀏覽器載入完整個html網頁後立即執行
	});
</script>

JS也為我們提供了文件就緒事件函式，其寫法為：

<script>
	window.onload = function(){
		//在瀏覽器載入完整個html網頁後立即執行
	}
</script>

2.jQuery選擇器

2.1 基本選擇器

(1)元素名選擇器
$("div") -- 選中所有的div元素
$("span") -- 選中所有的span元素

(2)class/類選擇器
$(".s1") -- 選中所有class值為s1的元素(class值為s1的元素可能是任何元素)
$("span.s1") -- 選中所有class值為s1的span元素

(3)id選擇器
$("#one") -- 選中id為one的元素

(4)多元素選擇器
$("div,span,.s1,#one") -- 選中所有的div元素,以及所有的span元素,以及所有class值為s1的元素,以及id為one的元素

2.2 層級選擇器

$("div span") -- 選中所有div內部的所有span元素
$("#one span") -- 選中id為one的元素內部的所有span元素

$("#two+span") -- 選中id為two的元素後面緊鄰的span兄弟元素
$("#two").next("span") -- 選中id為two的元素後面緊鄰的span兄弟元素
$("#two").prev("span") -- 選中id為two的元素前面緊鄰的span兄弟元素

$("#two~span") -- 選中id為two的元素後面所有的span兄弟元素
$("#two").nextAll("span") -- 選中id為two的元素後面所有的span兄弟元素
$("#two").prevAll("span") -- 選中id為two的元素前面所有的span兄弟元素

$("#two").siblings("span") -- 選中id為two的元素前、後所有的span兄弟元素

2.3 基本過濾選擇器

(1) 選中第一個div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)

(2) 選中最後一個div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)

(3) 選中第n+1個div元素(n從零開始)
$("div:eq(n)")
$("div").eq(n)

3.綜合案例

3.1 建立表格元素

3.1.1 建立單行單列的表格

function createTable1(){
	//1.建立一個table元素
	var $tab = $("<table></table>");
	//2.建立一個tr元素
	var $tr = $("<tr></tr>");
	//3.建立一個td元素, 併為td新增內容
	var $td = $("<td></td>");
	$td.html("Hello TD~~");
	//4.將td新增到tr元素內部
	$tr.append( $td );
	//5.將tr新增到table元素內部
	$tab.append( $tr );
	//6.將table新增到body元素內部
	$("body").append( $tab ); 
	//$("body").append( "<table><tr><td>Hello~~TD...</td></tr></table>" );
}

3.1.2 練習2：建立單行6列的表格

function createTable2(){
	//1.建立一個table元素
	var $tab = $("<table></table>");
	//2.建立一個tr元素
	var $tr = $("<tr></tr>");
	for(var i=0;i<6;i++){ 
		//3.建立一個td元素, 併為td新增內容
		var $td = $("<td></td>");
		$td.html("Hello TD~~");
		//4.將td新增到tr元素內部
		$tr.append( $td );
	}
	//5.將tr新增到table元素內部
	$tab.append( $tr );
	//6.將table新增到body元素內部
	$("body").append( $tab ); 
}

3.1.3 練習3：建立5行6列的表格

function createTable2(){
	//1.建立一個table元素
	var $tab = $("<table></table>");
	for(var j=0;j<5;j++){ //外層迴圈:控制行數
		//2.建立一個tr元素
		var $tr = $("<tr></tr>");
		for(var i=0;i<6;i++){ //內層迴圈:控制列數
			//3.建立一個td元素, 併為td新增內容
			var $td = $("<td></td>");
			$td.html("Hello TD~~");
			//4.將td新增到tr元素內部
			$tr.append( $td );
		}
		//5.將tr新增到table元素內部
		$tab.append( $tr );
	}
	//6.將table新增到body元素內部
	$("body").append( $tab ); 
}

3.1.4 練習4：建立指定行和列的表格

function createTable3(){
	//獲取使用者輸入的行數和列數(js方式)
	//var rows = document.getElementById("rows").value;
	//var cols = document.getElementById("cols").value;
	var rows = $("#rows").val();
	var cols = $("#cols").val();
	console.log(rows+" : "+cols);
	//1.建立一個table元素
	var $tab = $("<table></table>");
	for(var j=0;j<rows;j++){ //外層迴圈:控制行數
		//2.建立一個tr元素
		var $tr = $("<tr></tr>");
		for(var i=0;i<cols;i++){ //內層迴圈:控制列數
			//3.建立一個td元素, 併為td新增內容
			var $td = $("<td></td>");
			$td.html("Hello TD~~");
			//4.將td新增到tr元素內部
			$tr.append( $td );
		}
		//5.將tr新增到table元素內部
		$tab.append( $tr );
	}
	//6.將table新增到body元素內部
	$("body").append( $tab ); 
}

3.2 仿QQ好友列表

/** 通過jQuery實現仿QQ列表好友列表 */
function openDiv(thisobj){ //thisobj是一個js物件 --轉成--> jQuery物件
	//先將其他三個分組關閉( 將其他三個分組內的div設定為隱藏 )
	$("table span").not(thisobj).next("div").hide(); //css("display", "none")
	//根據被點選的分組找到分組內的好友列表, 切換好友列表的展示狀態
	$(thisobj).next("div").toggle(); //如果元素顯示則切換為隱藏, 如果隱藏則切換為顯示
}

3.3 模擬員工資訊管理系統

3.3.1 練習1：新增員工資訊

function addEmp(){
	//1.獲取要新增的員工資訊(id, name, email, salary)
	var id = $("#box1 input[name='id']").val().trim();
	var name = $("#box1 input[name='name']").val().trim();
	var email = $("#box1 input[name='email']").val().trim();
	var salary = $("#box1 input[name='salary']").val().trim();
	console.log(id+" : "+name+" : "+email+" : "+salary);
	
	//2.校驗員工資訊
	//2.1.新增的員工資訊不能為空!
	if( id == "" || name == "" || email == "" || salary == "" ){
		alert( "新增的員工資訊不能為空!" );
		return;
	}
	
	//2.2.新增的員工id不能重複! (id=3)
	//獲取所有的tr元素, 並遍歷所有的tr元素
	var flag = false; //false表示id是不存在的!!!
	$("table tr").each(function(){ //this(JS物件)表示當前被遍歷的元素 
		// this --轉換為jQuery物件--> $( this ) 
		var _id = $(this).find("td:eq(1)").text();
		//拿著使用者輸入的id和當前員工的id進行比較
		if( id == _id ){ //只要有一個相等,就說明id已存在,則停止新增
			alert("您輸入的員工ID已存在, 請重新新增!");
			flag = true; //true表示id已存在!!
			//return; 放在這裡的return不能終止程式的執行
		}
	});
	if( flag ){ //true表示id已存在!!
		return;
	}
	//3.將員工資訊新增到頁面上(新增到table中)
	//>>建立一個tr元素
	var $tr = $("<tr></tr>");
	//>>建立5個td元素,並將員工資訊新增到td中
	var $td1 = $("<td><input type='checkbox'/></td>"); //複選框
	var $td2 = $("<td>"+id+"</td>"); //ID
	var $td3 = $("<td>"+name+"</td>"); //name
	var $td4 = $("<td>"+email+"</td>"); //email
	var $td5 = $("<td>"+salary+"</td>"); //email
	//>>將td元素新增到tr中
	$tr.append( $td1 ).append( $td2 ).append( $td3 ).append( $td4 ).append( $td5 );
			
	//>>將tr元素新增到table中
	$("table").append( $tr );
}

3.3.2 練習2：刪除員工資訊

function delEmp(){
	//1.獲取所選中員工所在的tr行 (獲取所有被選中的複選框)
	//$("input:checked").parents("tr").remove(); //會連線表頭一起刪除
	$("input:checked").parent("td").parent("tr").remove();
}

3.3.3 練習3：實現全選或全不選

function checkAll(){
	//1.獲取全選複選框的選中狀態( 選中(true)?  沒選中(false)? )
	var isCheck = $("#all").prop("checked"); //true|false
	//2.獲取所有普通複選框, 將全選框的選中狀態設定給所有普通複選框
	$("input[type='checkbox'][id!='all']").prop("checked",isCheck);
}

4.jQuery總結

4.1 html元素操作

4.1.1 建立元素

$("<div></div>") -- 建立一個div元素，返回的是一個jQuery物件,表示建立的div元素
$("<div>xxxx</div>") -- 建立一個包含內容的div元素，返回的是一個jQuery物件,表示建立的div元素

4.1.2 新增子元素

$parent.append( $child ) -- 父元素呼叫方法新增子元素
$("body").append( "<div>我是新來的...</div>" ); -- 往body元素內部追加一個div子元素

4.1.3 刪除元素

$("div").remove() -- 刪除所有的div元素

JS刪除所有div元素：
//獲取所有的div元素(返回的是所有div組成的陣列)
var divArr = document.getElementsByTagName("div"); //div陣列
//遍歷div陣列,依次刪除每一個div元素
var len = divArr.length;
for(var i=0;i<len;i++){
    //通過當前元素的父元素刪除當前元素(始終刪除第一個)
    divArr[0].parentNode.removeChild( divArr[0] );
}

4.1.4 替換元素

$("div").replaceWith("<p>我是來替換的…</p>")

4.2 html元素內容和值的操作

<div>
  	這是一個div11元素
    <span>這是一個span元素</span>
    這是一個div1111元素
</div>
<input type="text" name="user"/>

4.2.1 html()函式(類似於js中的innerHTML屬性)

用於獲取或設定元素的內容，比如為div、span、p、h1~h6、table、tr、td、form等元素設定內容

$("div").html() -- 獲取所有div中的第一個div的內容
$("div").html("xxxx") -- 為所有div設定內容

4.2.2 text()函式 (類似於js中的innerText屬性，innerText在部分瀏覽器中不相容)

用於獲取或設定元素的文字內容

$("div").text() -- 獲取所有div中的所有文字內容
$("div").text("xxxx") -- 為所有div設定文字內容

4.2.3 val()函式(類似於js中的value屬性)

獲取或設定表單項元素的value值(input/select/option/textarea)

$("input").val() -- 獲取所有input元素中的第一個input元素的value值
$("input").val(值) -- 為所有的input元素設定value值

4.3 元素屬性和css屬性操作

<input type="text" name="username" id="inp"/>

4.3.1 prop()函式 – 用於獲取或設定元素的屬性值

在jQuery1.6版本之後才有這個函式，1.6之前版本的jQuery可以使用attr()函式

$("input[type='checkbox']").prop("checked")
// 獲取input複選框的選中狀態, 返回true表示複選框為選中狀態,返回false表示複選框為取消選中狀態
$("input[type='checkbox']").prop("checked", true)
// 設定所匹配的複選框元素為選中狀態

$("#inp").prop("name"); //獲取id為inp元素的name屬性值, 返回useranme
$("#inp").prop("name","user"); //為id為inp的元素設定name屬性值, name屬性值就會變成user

4.3.2 css()函式 – 用於獲取或設定元素的css屬性值

$("#div1").css("width") -- 獲取id為div1元素的寬度
$("#div1").css("width","200px") -- 設定id為div1元素的寬度為200px
$("#div1").css({
	"width" : "200px",
	"height" : "150px",
	"border" : "5px solid red",
	"background" : "pink"
}); // 為id為div1的元素設定寬度為200px、高度為150px、邊框以及背景顏色等樣式

4.4 其他函式

4.4.1 each()函式

$(selector).each(function( index,element ){})
// each()函式可以遍歷$(selector)選擇器選中的所有元素(即每次都選擇器選中的元素中獲取一個元素,並執行function 函式)
// function中的index -- 表示遍歷的元素的下標
// function中的element -- 表示當前正在遍歷的元素(也可以通過this獲取)

示例：

$("table tr").each(function(){
	//從當前行中獲取第二個單元格的內容(當前行的id值)
	var tempId = $(this).find("td").eq(1).html();
	//拿著使用者輸入的id 和 每一行中的id值進行比較
	if( id == tempId ){
		alert("新增失敗，id已存在！");
		flag = true; //id存在，更新flag的值，true表示已存在！
	}
});

4.4.2 show()/hide()函式

show() – 設定元素由隱藏變為顯示

$("div").show() -- 設定所有的div元素為顯示

等價於:

$("div").css("display", "block");

hide() – 設定元素由顯示變為隱藏

$("div").hide() -- 設定所有的div元素為隱藏

等價於：

$("div").css("display", "none");

4.4.3 toggle()/slideToggle()

toggle() – 切換元素的顯示狀態, 如果元素是顯示的, 則切換為隱藏, 否則切換為顯示
slidToggle() --切換元素的顯示狀態, 如果元素是顯示的, 則切換為隱藏，否則切換為顯示，切換為顯示為下拉狀態，隱藏為收縮狀態

5.擴充套件內容

5.1 為元素繫結點選事件

以點選事件為例，為元素繫結點選事件的方式為:
方式1(js版)：

<script>
  function fn(){
    alert("input按鈕被點選了...");
  }
</script>
<body>
	<input onclick="fn()" type="button" value="點我~!" />
</body>

方式2(js版)：

<script>
	window.onload = function(){
		//獲取id為btn的元素
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			alert("input按鈕被點選了...");
		}
	}
</script>
<body>
	<input id="btn" type="button" value="點我~!" />
</body>

方式3(jQuery版)：

<script>
$(function(){
    //當點選btn按鈕時,觸發點選事件執行其中的函式
    $("#btn").click( function(){
        alert("input按鈕被點選了...");
    });
});
</script>
<body>
	<input id="btn" type="button" value="點我~!" />
</body>

5.2 js物件和jQuery物件的互相轉換

通過JS的方式獲取元素，返回的是JS物件，JS物件只能呼叫JS的屬性或函式
通過jQuery選擇器獲取元素，返回的是jQuery物件（結構像一個集合），jQuery物件只能呼叫jQuery的屬性或函式
如果現有JS物件，但我們需要呼叫jQuery的屬性或函式，可以將JS物件轉成jQuery物件
如果現有jQuery物件，但我們需要呼叫JS的屬性或函式，可以將jQuery物件轉成JS物件
在這裡插入圖片描述

相關推薦

子串首次出現的位置

技術標籤：資料結構與演算法 查詢子串首次出現的位置，如：原串abccbaxzabc 子串為axz 結果為5

查詢子串(字元出現重疊時如何處理)

本題在pta上的測試資料較鬆,可以發現一些問題 採用初始版本和改良版都可以過,但明顯初始版是存在問題的,改良後則無問題

1297. 子串的最大出現次數

給你一個字串s ，請你返回滿足以下條件且出現次數最大的任意子串的出現次數：

C# IndexOf求子串位置

IndexOf使用方法 1static void Main(string[] args) 2{ 3string a, b; 4char aa = \'D\'; 5char bb = \'5\';

b_51_最長01相等串長度（map記錄相同字首和出現位置，0特殊處理）

給定一個0-1串，請找到一個儘可能長的子串，其中包含的0與1的個數相等。 思路：map記錄相同字首和數值相同的位置，但沒能一次寫對，下面是錯的程式

Java 字串 提取子串，記錄子串出現的次數

技術標籤：Javajava字串 字串問題中，常出現的查詢字串在一指定字串中出現的次數，可以用contains()函式解答。其程式碼如下：

天池 線上程式設計 最頻繁出現的子串（字串雜湊）

技術標籤：LintCode及其他OJ 文章目錄 1. 題目2. 解題 1. 題目 給定一個字串，我們想知道滿足以下兩個條件的子串最多出現了多少次：

求字串中的子串出現的次數

技術標籤：java基礎 求字串中的子串出現的次數 package com.ycy3; public class Test04 { public static void main(String[] args) {

重複次數最多的 子串_利用雙指標解LeetCode第1297題：子串的最大出現次數

技術標籤：重複次數最多的 子串 題目描述（難度中等） 給你一個字串 s ，請你返回滿足以下條件且出現次數最大的任意子串的出現次數：

[LeetCode] 1297. Maximum Number of Occurrences of a Substring 子串的最大出現次數

Given a string s, return the maximum number of ocurrences of any substring under the following rules:

python 判斷txt每行內容中是否包含子串並重新寫入儲存的例項

假設需要批量處理多個txt檔案，然後將包含子串的內容寫入一個txt檔案中,這裡假設我的子串為\"_9\"和“_10”

AcWing 1490. 最長上升子串 模擬優化

地址https://www.acwing.com/solution/content/15094/ 給出一個長度為 n 的由正整數構成的序列，你需要從中刪除一個正整數，很顯然你有很多種刪除方式，你需要對刪除這個正整數以後的序列求其最長上升子串，請問在所

LeetCode-最長迴文子串

思路一：從中心開始擴充套件，分兩種情況判斷 public int maxLength = 1; public int start = 0;

最長迴文子串

題目：最長迴文子串 問題描述： 給定一個字串 s，找到 s 中最長的迴文子串。你可以假設 s 的最大長度為 1000。

實驗11-1-8 查詢子串

1 #include <stdio.h> 2 #define MAXS 30 3 4 char *search(char *s, char *t); 5 void ReadString( char s[] ); /* 裁判提供，細節不表 */

最長公共子序列&最長公共子串

最長公共子序列 給定兩個字串 text1 和 text2，返回這兩個字串的最長公共子序列的長度。

5.最長迴文子串

給定一個字串 s，找到 s 中最長的迴文子串。你可以假設 s 的最大長度為 1000。

KMP子串查詢演算法

問題：如何在目標字串S中，查詢是否存在子串P？ 樸素解法： int sub_str_index(const char* s, const char* p)

招銀三面手撕程式碼題（字串連續子串）

import java.util.*; /*編寫函式，找出字串中連續出現的字元 * 返回連續字元子串的陣列

leetcode-5-最長迴文子串

目錄題目分析code-暴力解決code-動態規劃code-中心擴散法你的鼓勵也是我創作的動力