jQuery Lấy nội dung bằng text (), html (), val () và attr () – lấy văn bản từ jquery phần tử

Bởi

Các phương thức jquery get content như text (), html (), val () và attr () có thể được sử dụng để lấy nội dung của phần tử HTML. Các phương thức này khi gọi phương thức getter của jquery, không chứa đối số bên trong hàm. Dưới đây là giải thích của từng phương pháp chỉ với một ví dụ hữu ích. jQuery Lấy nội dung bằng text () …

Bạn đang xem: lấy văn bản từ phần tử jquery

Phương thức truy vấn nội dung lấy nội dung như text (), html (), val () và attr () có thể được sử dụng để lấy nội dung của phần tử HTML. Các phương thức này khi gọi phương thức getter của jquery, không chứa đối số bên trong hàm.

Dưới đây là giải thích về jQuery get content đơn giản với một ví dụ hữu ích.

jQuery Lấy nội dung văn bản bằng text ()

Bạn có thể lấy nội dung văn bản bên trong của phần tử HTML bằng phương thức jQuery text (). Nếu phần tử lại chứa các thẻ HTML bên trong nó, thì hàm sẽ chỉ nhận và hiển thị nội dung văn bản chứ không phải tên thẻ. Nếu bạn muốn lấy văn bản bên trong cũng như các thẻ HTML, bạn có thể sử dụng html ().

Kiểm tra trực tiếp

1

2

3

4

5

6

7

8

9

10

& lt; script & gt;

$

(

tài liệu

)

.

sẵn sàng

(

chức năng

(

)

{

$

(

“# btn-txt”

)

.

nhấp vào

(

chức năng

(

)

{

var

ptext

=

$

(

“# my-para”

)

.

text

(

)

;

alert

(

ptext

)

;

}

)

;

}

)

;

& lt; / script & gt;

& lt;

nút

gõ

=

” nút “

id

=

“btn-txt”

& gt;

Nhận

Văn bản

Nội dung

& lt;

/

nút < / p>

& gt;

& lt;

p

id

=

” my-para “

& gt;

Đây

là

a

đoạn

thành

Hiển thị

jQuery

text

method

.

& lt;

/

p

& gt;

Đầu ra

Đây là đoạn để Hiển thị phương thức văn bản jQuery.

Ví dụ này chứa đoạn văn có thẻ mạnh bên trong để làm cho văn bản được in đậm. Khi bạn nhấp vào nút, một thông báo cảnh báo sẽ xuất hiện, chỉ chứa văn bản chứ không phải thẻ mạnh. Đây là phương thức jQuery get content để lấy văn bản của nội dung bằng cách sử dụng jquery.

jQuery Lấy nội dung HTML bằng html ()

Nếu bạn muốn lấy nội dung bên trong của phần tử HTML với các tên thẻ, bạn phải sử dụng phương thức jQuery html (). Hàm là hàm get content của jQuery được sử dụng để lấy nội dung HTML.

Kiểm tra trực tiếp

Xem Thêm  Trình lặp trong Java - java cho trình lặp vòng lặp

1

2

3

4

5

6

7

8

9

10

& lt; script & gt;

$

(

tài liệu

)

.

sẵn sàng

(

chức năng

(

)

{

$

(

“# btn-html”

)

.

nhấp vào

(

chức năng

(

)

{

var

phtml

=

$

(

“# my-parahtml”

)

.

html

(

)

;

alert

(

phtml

)

;

}

)

;

}

)

;

& lt; / script & gt;

& lt;

nút

gõ

=

” nút “

id

=

“btn-html”

& gt;

Nhận

HTML

content

& lt;

/

button < / p>

& gt;

& lt;

p

id

=

” my-parahtml “

& gt;

& lt;

span

& gt;

là

a < / p>

đoạn

đến

lấy

nội dung

& lt;

em

& gt;

sử dụng

jQuery

HTML

phương pháp

& lt;

/

em

& gt;

& lt;

/

span

& gt;

& lt;

/

p

& gt;

Đầu ra

Đây là đoạn lấy nội dung bằng phương thức jQuery HTML

Ví dụ trên cung cấp nội dung HTML với các thẻ HTML được cảnh báo. Nhấp vào nút được cung cấp để tải nội dung bằng jQuery.

Cách nhận giá trị bằng val ()

Bạn có thể lấy giá trị bên trong của nội dung của phần tử HTML bằng phương thức jQuery val (). Bạn có thể lấy giá trị của bất kỳ kiểu đầu vào nào, kiểu chọn và các phần tử HTML khác. Điều này có thể hữu ích nếu bạn muốn truy cập và sử dụng giá trị của phần tử HTML.

Kiểm tra trực tiếp

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

& lt; script & gt;

$

(

tài liệu

)

.

sẵn sàng

(

chức năng

(

)

{

$

(

“# btn-val”

)

.

nhấp vào

(

chức năng

(

)

{

var

pval

=

$

(

“# my-inputval”

)

.

val

(

)

;

alert

(

pval

)

;

}

)

;

}

)

;

& lt; / script & gt;

& lt;

p

& gt;

Chọn

tùy chọn

của bạn

từ

hộp chọn

đưa ra

< p class = "crayon-e"> bên dưới

và

nhấp vào

nút

. < / p>

& lt;

/

p

& gt;

& lt;

nút

gõ

=

” nút “

id

=

” btn-val “

& gt;

Nhấp vào

tôi

để

Nhận

Giá trị

& lt;

/

nút

& gt;

& lt;

chọn

id

=

“my-inputval”

& gt;

& lt;

tùy chọn

giá trị

=

“”

& gt;

Chọn

tùy chọn

của bạn

& lt;

/ < p class = "crayon-i"> option

& gt;

& lt;

tùy chọn

& gt;

Mahendra

Dhoni

& lt;

/

tùy chọn

& gt;

& lt;

option

& gt;

V irat

Kohli

& lt;

/

option

& gt;

& lt;

tùy chọn

& gt;

Rohit

Sharma

& lt;

/ < p class = "crayon-i"> option

& gt;

& lt;

/

chọn

& gt;

Đầu ra

Chọn tùy chọn của bạn từ hộp chọn dưới đây và nhấp vào nút.

Lấy thuộc tính bằng phương thức jQuery attr ()

Nếu bạn muốn thực hiện một số sự kiện nhưng truy cập vào một phần tử HTML với thuộc tính của nó, bạn có thể làm như vậy với jQuery attr (). Giả sử bạn có một thẻ liên kết và bạn muốn lấy thuộc tính href của nó. Bạn phải chuyển thuộc tính làm đối số của attr () mà bạn muốn lấy.

Xem Thêm  Nút hình ảnh HTML - html làm cho hình ảnh thành một nút

Kiểm tra trực tiếp

1

2

3

4

5

6

7

8

9

10

11

& lt; script & gt;

$

(

tài liệu

)

.

sẵn sàng

(

chức năng

(

)

{

$

(

“# btn-attr”

)

.

nhấp vào

(

chức năng

(

)

{

var

pattr

=

$

(

“# myanchor”

)

.

< p class = "crayon-e"> attr

(

“href”

)

;

< p class = "crayon-h">

alert

(

pattr

)

;

}

)

;

}

)

;

& lt; / script & gt;

& lt;

a

href

=

“https://tutorialdeep.com/jquery/jquery-animation-effect-animate/”

target

=

“_ blank”

id

=

” myanchor “

rel

=

” noopener noreferrer “

& gt;

jQuery

Hoạt ảnh

Hiệu ứng

& lt; < / p> /

a

& gt;

& lt;

br

& gt;

& lt;

br

& gt;

& lt;

nút

type

=

“button”

< p class = "cray on-i "> id

=

” btn-attr “

& gt;

Nhấp vào

tôi

để

Nhận

Thuộc tính

& lt; /

nút

& gt;

& lt;

p

& gt; < / p>

Khi

bạn

nhấp vào

nút

,

bạn

sẽ

nhận được

giá trị

của

href

thuộc tính

của

anchor

phần tử

.

& lt;

/

p

& gt;

Đầu ra

Hiệu ứng hoạt ảnh jQuery

Khi bạn nhấp vào nút, bạn sẽ nhận được giá trị của thuộc tính href của phần tử neo.

Ví dụ trên cung cấp thuộc tính href của thẻ liên kết trong cảnh báo. Nhấp vào nút trên để nhận giá trị thuộc tính.

TẢI XUỐNG BẢNG ĐIỀU HÒA jQuery miễn phí


Xem thêm những thông tin liên quan đến chủ đề lấy văn bản từ jquery phần tử

jQuery case insensitive attribute selector

  • Tác giả: kudvenkat
  • Ngày đăng: 2015-03-28
  • Đánh giá: 4 ⭐ ( 8376 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link for all dot net and sql server video tutorial playlists
    https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

    Link for slides, code samples and text version of the video
    http://csharp-video-tutorials.blogspot.com/2015/03/jquery-case-insensitive-attribute.html

    Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
    https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

    In this video we will discuss, how to write a jQuery case-insensitive attribute value selector. Let us understand this with an example.

    The following example, only selects DIV 1. This is because jQuery attribute value selector is case-sensitive.
    [html]
    [head]
    [title][/title]
    [script src=”Scripts/jquery-1.11.2.js”][/script]
    [script type=”text/javascript”]
    $(document).ready(function () {
    $(‘div[title=”DivTitle”]’).css(‘border’, ‘3px solid red’);
    });
    [/script]
    [/head]
    [body]
    [div title=”DivTitle”]
    DIV 1
    [/div]
    [br /]
    [div title=”DIVTITLE”]
    DIV 2
    [/div]
    [br /]
    [div title=”divtitle”]
    DIV 3
    [/div]
    [/body]
    [/html]

    Use the following code to make the jQuery attribute value selector case-insensitive
    [script type=”text/javascript”]
    $(document).ready(function () {
    $(‘div[title]’).filter(function () {
    return $(this).attr(‘title’).toLowerCase() == ‘divtitle’;
    }).css(‘border’, ‘3px solid red’);
    });
    [/script]

    The above script should select all the 3 divs.

    Now let us look at an example of making attribute contains selector [name*=”value”], case-insensitive.

    The following example, selects only DIV 1 element. This is because the attribute contains selector is case-sensitive.
    [html]
    [head]
    [title][/title]
    [script src=”Scripts/jquery-1.11.2.js”][/script]
    [script type=”text/javascript”]
    $(document).ready(function () {
    $(‘div[title*=”Div”]’).css(‘border’, ‘3px solid red’);
    });
    [/script]
    [/head]
    [body]
    [div title=”DivTitle1″]
    DIV 1
    [/div]
    [br /]
    [div title=”DIVTITLE2″]
    DIV 2
    [/div]
    [br /]
    [div title=”divtitle3″]
    DIV 3
    [/div]
    [/body]
    [/html]

    To make attribute contains selector case-insensitive, use filter() method and regular expression as shown below.
    [script type=”text/javascript”]
    $(document).ready(function () {
    $(‘div[title]’).filter(function () {
    return (/Div/i).test($(this).attr(‘title’));
    }).css(‘border’, ‘3px solid red’);
    });
    [/script]

    OR

    [script type=”text/javascript”]
    $(document).ready(function () {
    $(‘div[title]’).filter(function () {
    return RegExp(‘Div’,’i’).test($(this).attr(‘title’));
    }).css(‘border’, ‘3px solid red’);
    });
    [/script]

    The above script should select all the 3 divs.

    Visual Studio Keyboard Shortcuts
    Convert Selected Text to Upper Case – CTRL + SHIFT + U
    Convert Selected Text to Lower Case – CTRL + U

Tham khảo jQuery

  • Tác giả: hocwebchuan.com
  • Đánh giá: 5 ⭐ ( 2637 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hàm jQuery giúp bạn củng cố thêm kiến thức và hiểu rõ hơn những gì bạn đã học – Học Web Chuẩn

Selector trong jQuery, cú pháp chọn phần tử trong jQuery

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 2430 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Selector trong jQuery, cú pháp chọn phần tử trong jQuery

Hiểu thêm JQuery Ajax và kiến thức cơ bản

  • Tác giả: topdev.vn
  • Đánh giá: 4 ⭐ ( 7710 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AJAX – “Asynchronous JavaScript and XML” – là một bộ công cụ cho phép load dữ liệu từ server mà không yêu cầu tải lại trang. Nó sử dụng chức năng sẵn có XMLHttpRequest(XHR) của trình duyệt để thực hiện một yêu cầu đến server và xử lý dữ liệu server trả về.

[JQuery] Phần 6: Lấy nội dung và các thuộc tính trong jQuery

  • Tác giả: www.dammio.com
  • Đánh giá: 3 ⭐ ( 5534 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Lấy nội dung văn bản của các phần tử

  • Tác giả: hiepsiit.net
  • Đánh giá: 3 ⭐ ( 4606 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phương thức offset() trong jQuery

  • Tác giả: webcoban.vn
  • Đánh giá: 4 ⭐ ( 8290 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng phương thức offset() trong jQuery để xác định vị trí của các phần tử được chọn

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Lặp lại mảng JavaScript - trình lặp javascript thành mảng