các tính năng của asp net 3 5

MỤC LỤC ASP.NET gì? 1.1 1.2 1.3 1.4 1.5 1.6 ASP.NET tích hợp với NET Framework ASP.NET đa ngôn ngữ ASP.NET hướng đối tượng (Object-Oriented) ASP.NET biên dịch ASP.NET lưu trữ máy Common Language Runtime ASP.NET dễ dàng triển khai cấu hình Các tính ASP.NET 3.5 2.1 2.2 2.3 2.4 2.5 2.6 ASP.NET AJAX Các Control LINQ Các Assembly ASP.NET Dynamic Data ASP.NET MVC (Model View Control) Cách tạo trang web Visual Studio 2008 3.1 3.2 3.3 Khởi động Visual Studio 2008 Visual Web Developer 2008 (hình 1) Cách tạo dự án Ví dụ Giới thiệu kiện (Event) ASP.NET 4.1 4.2 4.3 4.4 Một số tệp ASP.NET Chu kỳ sống trang web ASP.NET (ASP.NET Page Life Cycle) Một số kiện trang web (Page Event) Sự kiện ứng dụng (Event Application) 10 Tài liệu tham khảo 11 Bài mở đầu GIỚI THIỆU TỔNG QUAN VỀ ASP.NET 3.5 Bài giới thiệu tổng quan công nghệ ASP.NET 3.5 (Active Server Page) ASP.NET gì? Giới thiệu tính ASP.NET 3.5 sơ với ASP.NET 2.0 Cách tạo website Visual Studio 2008 ASP.NET gì? Trước hết, tên đầy đủ ASP.NET Active Server Pages NET (.NET NET framework) Nói đơn giản ASP.NET công nghệ có tính cách mạng dùng để phát triển ứng dụng mạng tương lai Bạn lưu ý chổ ASP.NET phương pháp tổ chức hay khung tổ chức (framework) để thiết lập ứng dụng hùng mạnh cho mạng dựa CLR (Common Language Runtime) 1.1 ASP.NET tích hợp với NET Framework NET Framework chia thành tác vụ cho chức gồm lớp (class), cấu trúc (structures), giao diện (interfaces) lõi (core) thành phần chương trình Trước sử dụng thành phần bạn phải hiểu chức năng, tổ chức Mỗi hàng nghàn tầng lớp nhóm theo trình tự logic, thứ bậc gọi namespace Mỗi namespace cung cấp tính 1.2 ASP.NET đa ngôn ngữ Để xây dựng ứng dụng web không chọn ngôn ngữ mà chọn nhiều ngôn ngữ khác Điều quan trọng ngôn ngữ chọn mã dịch mã IL Điều có nghĩa IL ngôn ngữ NET có CLR nhận biết IL 1.3 ASP.NET hướng đối tượng (Object-Oriented) ASP.NET ngôn ngữ lập trình hướng đối tượng sử dụng ngôn ngữ NET Nó cung cấp đối tượng nhỏ thực tầng làm việt nguyên lý HTTP HTML Mã nguồn không truy cập toàn đối tượng NET Framework khai thác tất quy ước môi trường OOP (Object Oriented Programming) Chúng ta có tạo lớp, giao diện, kế thừa lớp… Chúng ta kiểm soát đối tượng chương trình hiển thị liệu kiện đối tượng 1.4 ASP.NET biên dịch Một ứng dụng ASP.NET luôn biên dịch, không chạy mã C# Visual Basic mà không biên dịch trước Một ứng dụng ASP.NET thực biên dịch thông qua giai đoạn:  Giai đoạn mã (code) bạn viết (C#, Visual Basic ngôn ngữ NET khác) dịch Microsoft Intermediate Language (MSIL) Giai đoạn dịch dịch tự động trang wed yêu cầu Chúng ta thực dịch trước Các tệp dịch thành mã IL (Intermediate Language Code)  Giai đoạn dịch trước trang Web thực thi Tại giai đoạn mã IL dịch thành mã máy (Native Machine Code) Giai đoạn gọi Just-In-Time (JIT) Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan ASP.NET 3.5 Code in VB.NET Code in C# Code in Another NET Language VB.NET Compiler C# Compiler Appropriate Compiler IL (Intermediate Language) Code Just-In-Time (JIT) Compiler The Common Language Runtime Native Machine Code Execute 1.5 ASP.NET lưu trữ máy Common Language Runtime Khía cạnh quang trọng công cụ ASP.NET chạy môi trường thời gian thực (Runtime) CLR (Common Language Runtime) CLR máy ảo (virtual machine) Microsoft NET, có ngôn ngữ trung gian IL nên phát triển ứng dụng NET, không bị phụ thuộc vào thiết bị, có nghĩa theo Microsoft nói ứng dụng NET chạy thiết bị có NET Framework Tất namespace, ứng dụng, lớp NET Framework gọi tắt quản lý mã CLR cung cấp dịch vụ quan trọng khác như:  Quản lý nhớ  Thu nhặt rác  Quản lý tuyến  Xử lý ngoại lệ  An toàn 1.6 ASP.NET dễ dàng triển khai cấu hình Mọi cài đặt NET Framework cung cấp lớp Để triển khai ứng dụng ASP.NET cần chép tập tin vào thư mục ảo máy chủ (server) máy chỉ cần có NET Framework Việc cấu hình dễ dàng đơn giản không phụ thuộc vào IIS (Internet Information Services) Cấu hình ASP.NET đặt tệp web.config Tệp web.config để với thư mực chứa trang web Tệp web.config không bị khóa, truy cập lúc nào, việc sửa tệp hoàn toàn dễ dạng chúng lưu dạng XML Các tính ASP.NET 3.5 Microsoft phát hành ASP.NET vào ngày 19 tháng 11 năm 2007 với Visual Stutio 2008 Đây bước tiến hóa từ ASP.NET 2.0 tới ASP.NET 3.5 Nếu sử dụng ASP.NET 2.0 để sử dụng ASP.NET 3.5 cần cài đặt thêm tính ASP.NET 3.5 Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan ASP.NET 3.5 Trong phần giới thiệu số tính ASP.NET 3.5 ASP.NET AJAX 2.1 Trong ASP.NET 2.0, ASP.NET AJAX cài đặt thêm vào Tuy nhiên ASP.NET 3.5, ASP.NET AJAX tích hợp vào NET Framework, trình xây dựng giao diện người dùng dễ dàng trực quan ASP.NET AJAX Control Extenders tích hợp ToolBox Visual Studio 2008 Các tính ASP.NET AJAX trình bày sau Các Control 2.2 Các control ListView DataPager dùng kiểu liệu LinqDataSource ListView linh hoạt có chứa toàn tính Gridview, Datagrid, Repeater ASP.NET 2.0 Nó cung cấp khả chèn, xóa, sửa, xếp, phân trang Chúng ta hoàn toàn định dạng việc liệu hiển thị ListView mà không cần phải sử dụng thẻ Các Template ListView phong phú đa dạng Datager cung cấp cho ListView việc phân trang LINQ 2.3 LINQ (Language Integrated Query) đưa khả lập trình NET Giải pháp lập trình hợp nhất, đem đến khả truy vấn liệu theo cú pháp SQL trực tiếp C# hay VB.NET, áp dụng cho tất dạng liệu từ đối tượng đến Cơ sở liệu quan hệ XML ASP.NET LinqDataSource cho phép sử dụng LINQ để lọc (filter), order nhóm (group) liệu trước binding vào List Control Các Assembly 2.4      2.5 System.Core.dll – Các implementation cho LINQ to Objects System.Data.Linq.dll - Các implementation cho LINQ to SQL System.Xml.Linq.dll - Các implementation cho LINQ to XML System.Data.DataSetExtensions.dll - Các the implementation cho LINQ to DataSet System.Web.Extensions.dll: Các implementation for ASP.NET AJAX ASP.NET Dynamic Data ASP.NET Dynamic Data cung cấp Framework cho phép nhanh chóng xây dựng chức ứng dụng driver-data, dựa LINQ to SQL hay Entity Framework Nó có thêm nhiều tính linh hoạt cho DetailsView, FormView, GridView, ListView kiểm tra tính hợp lệ liệu, chỉnh sửa lại mẫu để thay đổi cách hiển thị liệu 2.6 ASP.NET MVC (Model View Control) Kiến trúc MVC việc chia tất mục ứng dụng làm ba thành phần (component) khác Model, View Controller: Model: Model giao nhiệm vụ cung cấp liệu cho sở liệu lưu liệu vào kho chứa liệu Tất nghiệp vụ logic thực thi Model Dữ liệu vào từ người dùng thông qua View kiểm tra Model trước lưu vào sở liệu Việc truy xuất, xác nhận, lưu liệu phần Model View: View hiển thị thông tin cho người dùng ứng dụng giao nhiệm vụ cho việc nhận liệu vào từ người dùng, gửi yêu cầu đến điều khiển, sau nhận lại phản hồi từ điều khiển hiển kết cho người dùng Các trang HTML, JSP, thư viện thể file nguồn phần thành phần View Controller: Controller tầng trung gian Model View Controller giao nhiệm vụ nhận yêu cầu từ phía máy khách Một yêu cầu nhận từ máy khách thực chức logic thích Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan ASP.NET 3.5 hợp từ thành phần Model sau sinh kết cho người dùng thành phần View hiển thị ActionServlet, Action, ActionForm struts-config.xml phần Controller Cách tạo trang web Visual Studio 2008 3.1 Khởi động Visual Studio 2008 Visual Web Developer 2008 (hình 1) Hình 1: Visual Web Developer 2008 3.2 Cách tạo dự án Chọn File → New Project (Ctrl+Shitf+N) New Web Site (Shift+Alt+N) (Hình 2) Hình 2: Tạo dự án Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan ASP.NET 3.5  Nếu chọn New Project xuất hộp hội thoại New Project sau (hình 3): Hình Trong Project Type:  Visual Basic → Web chọn Visual Basic ngôn ngữ viết ứng dụng  Visual C# → Web chọn C# ngôn ngữ viết ứng dụng Trong Templates chọn ASP.NET Web Application, Trong Name đặt tên cho Project, tên ta đặt Trong Location thư mục chứa Project  Nếu chọn New Web Site xuất hộp hội thoại New Project sau (hình 4): Hình Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan ASP.NET 3.5 Trong Languge:  Visual Basic → Web chọn Visual Basic ngôn ngữ viết ứng dụng  Visual C# → Web chọn C# ngôn ngữ viết ứng dụng Trong Templates chọn ASP.NET Web Application Trong Location chọn Sysem File Chọn tên thư mực chứa Project 3.3 Ví dụ Hình Ví dụ tạo dự án có tên “Vi_du_1”, đặt ổ đĩa D, chọn ngôn ngữ chọn C# (hình 5) sau bấm OK Sau file “Default.aspx” (hình 6) Hình Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan ASP.NET 3.5 Trong ví dụ soạn đoạn mã sau Default.aspx: CodeFile="Default.aspx.cs" Chào mừng bạn đến với ASP.NET 3.5 Để chạy chạy web dạng Deburg chọn Deburg → Start Deburgging bấm phím F5 (hình 7) Hình Kết chạy Vi_du_1 (hình 8) Hình Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan ASP.NET 3.5 Giới thiệu kiện (Event) ASP.NET 4.1 Một số tệp ASP.NET TỆP MIÊU TẢ *.aspx Tệp chứa toàn giao diện người dùng, tùy chọn, đoạn code ứng dụng Đây trang web bắt đầu người sử dụng duyệt web Tệp chứa mã nguồn C# *.cs web.config Tệp tin dạng XML chứa cấu hình cho ứng dụng ASP.NET Nó bao gồm cấu hình an ninh, quản lý trạng thái, quản lý nhớ… global.asax Chúng ta sử dụng tập tin để khai báo biến toàn cục phản ứng với kiện toàn cục Khi xây dựng xong ứng dụng Web:  Phần giao diện ứng dụng nằm tệp aspx html  Tất tệp mã nguồn (C#, VB.NET ngôn ngữ NET) biên dịch thành tệp DLL nằm thư mục /Bin 4.2 Chu kỳ sống trang web ASP.NET (ASP.NET Page Life Cycle)  Chu kỳ sống bắt đầu trình duyệt yêu cầu trang web gọi Session  Chu kỳ sống tiếp tục nếu:  - Session hoạt động - Người sử dụng tương tác với giao diện web kích hoạt kiện - Dữ liệu trang (View State) wed gửi cho Server - Server nhận View State trả lại yêu cầu từ View State Chu kỳ sống kết thúc khi: 4.3 - Người dùng kết thúc trình duyệt - Session kết thúc (timeout) Một số kiện trang web (Page Event) SỰ KIỆN MIÊU TẢ Kiểm tra thuộc tính IsPostBack lần trang web sử lý Pre_Init Tạo tạo lại Control động (Dynamic Control) Thiết lập trang chủ (Master page), thuộc tính Theme Đọc thiết lập giá trị cho thuộc tính Profile Init Làm (Raised) sau Control khởi động Skin ứng dụng Chúng ta sử dụng sử kiện để đọc khởi tạo thuộc tính Control Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan ASP.NET 3.5 Load Sử dụng kiện để thiết lập thuộc tính cho Control, thiết lập kết nối với Cơ sở liệu InitComplete Sử dụng kiện để xử lý tác vụ có yêu cầu tất khởi tạo hoàn thành Unload Error DataBinding 4.4 Trang giải phóng khỏi nhớ Khi xảy lỗi trang Server Control trang gắn với nguồn liệu Sự kiện ứng dụng (Event Application) SỰ KIỆN MIÊU TẢ Application_Start Người dùng duyệt trang web Application_End Khi không người dùng duyệt trang web Application_Error Khi có lỗi xảy ứng dụng Session_Start Khi người dùng duyệt trang web Session_End Khi người dùng đóng trình duyệt Session kết thúc (time out) Ví dụ sau đếm số người truy cập số người online Chọn Project → Add New Item (hình 9) Hình Trong “Add New Item” chọn “Global Application Class” (hình 10) Hình 10 Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan ASP.NET 3.5 10 Bây chạy thử chương trình Các giao diện sửa thành tiếng Việt Chúng ta vào Deburg→StartDebugging (hoặc F5) để chạy thử chương trình Kết chạy chương trình file “Defautl.axpx” (Hình 21) Hình 21: Trang chủ Vi_du_8 Khi click vào “Loại sản phẩm” kết hình 22 click vào “Sản phẩm” kết hình 23 Hình 22: Giao diện bảng LoaiSanPham Hình 23: Giao diện bảng SanPham Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 14 Câu hỏi ôn tập Các tính Dynamic Data? Trả lời:  Web Scaffolding để tạo ứng dụng web dựa lược đồ sở liệu Dynamic Data scaffolding tạo chuẩn UI (User Interface – Giao diện người dùng) từ mô hình liệu  Đầy đủ thao tác (tạo, cập nhật, xóa bỏ, hiển thị) cho việc truy cập liệu truy cập liệu, thao tác quan hệ bảng kiểm tra tính hợp lệ liệu  Tự động hỗ quan quan hệ khóa (foreign-key) Dynamic Data phát quan hệ bảng từ tạo giao diện người dùng bảng quan hệ  Khả tùy chỉnh UI  Khả tùy chỉnh tính hợp lệ cho trường liệu Dynamic Data hỗ trợ các mô hình liệu nào? Trả lời: Dynamic Data hỗ trợ mô hình liệu LINQ to SQL ADO.NET Entity Framework Các bước xây dựng Dynamic Data với ADO.NET Entity Framework Trả lời:  Tạo project Dynamic Data ADO.NET Entity Framework  Xây dựng Cơ sở liệu  Tạo Data Model với ADO.NET Entity Framework  Đăng ký DataModel với file Global.asax  Thêm Custom Metadata vào Model Tài liệu tham khảo Using ASP.NET Dynamic Data, URL: http://msdn.microsoft.com/en-us/library/cc488545.aspx Microsoft ASP.NET, URL: http://www.asp.net/DynamicData/ ScottGu's Blog, URL: http://weblogs.asp.net/scottgu/archive/2008/12/02/dec-2nd-links-asp-net-aspnet-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 15 MỤC LỤC JQUERY gì? 2 Download jQuery Sử dụng jQuery ASP.NET jQuery hoạt động nào? 4.1 4.2 Chạy mã Document Ready (trang sẵn sàng) Function $() Một số API jQuery 5.1 Selectors 5.1.1 Basic 5.1.2 HIERACHY 5.1.3 Basic Filters (Các yếu tố chọn lọc bản) 5.1.4 Content Filters (Chọn lọc nội dung) 5.1.5 Visibility Filters 5.2 Attributes 5.2.1 Class 5.2.2 HTML, Text 10 5.3 Events 10 Câu hỏi ôn tập 12 Tài liệu tham khảo 13 Bài số JQUERY Bài giới thiệu tổng quan jQuery JQUERY gì? jQuery thư viện kiểu Javascript giúp đơn giản hóa cách viết JavaScript tăng tốc độ xử lý kiện trang web Các thư viện jQuery cung cấp mục đích chung trừu tượng hoá lớp phổ biến cho trang web scripting, hữu ích hầu hết tình scripting Các chức jQuery bao gồm:  Chọn tag tập hợp tag trang web  Cung cấp hàm tiện ích thông dụng  Nhanh chóng tạo tag  Quan trọng phân tách việc thiết kế lập trình web phía client Download jQuery jQuery thư viện script, thêm vào trang web Chúng ta download phiên jQuery từ http://docs.jquery.com/Downloading_jQuery Hình 1: Downdload jQuery Như hình phiên jQuery 1.3.2, sau download file “jquery1.3.2.js”, sau để viết ứng dụng bạn cần nhúng file “jquery-1.3.2.js” vào phần javascript trang Trong Visual Studio 2008 SP1 hỗ trợ đầy đủ chức JavaScript Intellisense Để Visual Studio hỗ trợ Intellisense cho jQuery, cần cài đặt thêm “Visual Studio 2008 Patch KB958502”, download từ: http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736 Sau download file “jquery-1.3.2-vsdoc.js” từ: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc.js Mục đích “jquery-1.3.2-vsdoc.js” giúp đỡ việc viết dòng thích hỗ trợ cho việc phát sinh mã thông minh soạn thảo jQuery Microsoft Vietnam – DPE Team | Bài số 9: jQuery Sử dụng jQuery ASP.NET Chúng ta tạo project (Vi_du_9) sau thêm file “jquery-1.3.2.js” “jquery-1.3.2-vsdoc.js” vào project (hình 2) Hình Trước viết câu lệnh jQuery bạn cần khai báo sử dụng thư viện jQuery sau: Vi_du_9 jQuery hoạt động nào? 4.1 Chạy mã Document Ready (trang sẵn sàng) Có thể thấy hầu hết lập trình với Javascript, kết thúc mã thực thi cách thêm dòng mã vào script, tương tự sau: window.onload = function() { … } Các mã bên thực thi trang tải xong Tuy nhiên, mã Javascript không chạy tất hình ảnh trang tải xong (kể banner quảng cáo) Lý cho việc sử dụng window.onload để chắn HTML 'document' phải tải xuống hết, sau chạy mã Để giải quyết, jQuery có câu lệnh đơn giản, biết như: $(document).ready(function() { //Mã }); Mã kiểm tra document đợi sẵn sàng để sử dụng - theo ý muốn Microsoft Vietnam – DPE Team | Bài số 9: jQuery 4.2 Function $() Khi làm việc với CSS, Xpath custom, jQuery sử dụng function $() (dấu $ cặp dấu ngoặc) Dưới dây số thành phần $(): $("p"): p tên thẻ (tag) $("#id"): id tên id $(".class"): class tên lớp Một số API jQuery 5.1 Selectors 5.1.1 Basic id # Trả phần tử mảng: Array Nó tương ứng với phần tử gán thuộc tính id Nếu id chứa ký tự dấu chấm (.) dấu [] chúng phải thêm dấu ngạch chéo (\\) vào trước ký tự Nếu $("#some.id") phải viết thành $("#some\\.id") Nếu $("#some[id]") phải viết thành $("#some\\[id]\\") element Kiểu trả về: Array Tương ứng với tất phần tử với tên gán .class Kiểu trả về: Array Tương ứng với tất phần tử với tên lớp * Kiểu trả về: Array Tương ứng với tất phần tử selector1, selector2, selectorN Kiểu trả về: Array Phù hợp với kết hợp tất kết xác định selectors, số lượng selectors bất kỳ, trật tự phần tử DOM đối tượng jQuery không thiết phải thứ tự Ví dụ: Vi_du_9_1.aspx Vi_du_9_1 $(document).ready(function() { $("#div1").css("color", "red"); $("#div3\\.1\\.\\[0\\]").css("color", "red"); $("div").css("width", "200px"); $("div").css("height", "100px"); $(".Class1").css("color", "red"); $("*").css("border", "1px solid blue"); Microsoft Vietnam – DPE Team | Bài số 9: jQuery $("div,span").css("background-color", "#EEEEEE"); }); div { float:left;padding: 5px;margin: 5px; } Class1{ } Visual Studio 2008 ASP.NET 3.5 Download jQuery Chào mừng bạn đến với jQuery 5.1.2 HIERACHY ancestor descendant Kiểu trả về: Array Tương ứng với tất phần tử với danh nghĩa descendant phần tử xác định danh nghĩa “ancestor” Ví dụ: $("form input").css("border", "2px dotted blue"); parent > child Kiểu trả về: Array Tương ứng với phần tử danh nghĩa “child” phần tử xác định với danh nghĩa “parent” Ví dụ: $("#main > *").css("border", "3px double red"); prev + next Kiểu trả về: Array Phù hợp với tất yếu tố sau xác định "kế tiếp" bên cạnh yếu tố xác định "prev" Ví dụ: $("label + input").css("color", "blue").val("Labeled!"); prev ~ siblings Kiểu trả về: Array Phù hợp với tất yếu tố sau "prev" với yếu tố lọc "siblings" (liên quan) selector Ví dụ: $("#prev ~ div").css("border", "3px groove blue"); Ví dụ: Vi_du_9_2.aspx Vi_du_9_1 $(document).ready(function() { $("form input").css("border", "1px solid blue"); $("#submit > *").css("border", "1px solid red"); $("label + input").css("background-color", "#EEEEEE"); }); body { font-size:14px; } form { border:2px green solid; padding:2px; margin:0; background:#efe; } div { color:red; } fieldset { margin:1px; padding:3px; } Microsoft Vietnam – DPE Team | Bài số 9: jQuery Nhập thông tin cá nhân Họ tên: Nơi công tác Tên công ty: Địa chỉ: Hộ thường trú: Cập nhật   Hủy bỏ 5.1.3 Basic Filters (Các yếu tố chọn lọc bản) :first Kiểu trả về: Array Tương ứng với phần tử chọn Ví dụ: $("tr:first").css("font-style", "italic"); :last Kiểu trả về: Array Tương ứng với phần tử cuối chọn Ví dụ: $("tr:last").css("background-color", "yellow"); :not(selector) Kiểu trả về: Array Bỏ tất phần tử tương ứng cho selector Ví dụ: $("input:not(:checked)+span").css("background-color", "yellow"); :even Kiểu trả về: Array Tương ứng với phần tử chẵn, số 0, 2, 4, … Ví dụ: $("tr:even").css("background-color", "#bbbbff"); :odd Kiểu trả về: Array Tương ứng với phần tử lẻ, số 1, 3, 5, … Ví dụ: $("tr:odd").css("background-color", "#bbbbff"); :eq(index) Kiểu trả về: Array Tương ứng với phần tử riêng lẻ số Ví dụ: $("td:eq(2)").css("color", "red"); :gt(index) Kiểu trả về: Array Tương ứng với tất phần số gán Ví dụ: $("td:gt(2)").css("color", "red"); :lt(index) Kiểu trả về: Array Tương ứng với tất phần số gán Ví dụ: $("td:lt(2)").css("color", "blue"); :header Kiểu trả về: Array Tương ứng với tất phần tử tiêu đề, giống h1, h2, h3… Microsoft Vietnam – DPE Team | Bài số 9: jQuery Ví dụ: $(":header").css({ background: '#CCC', color: 'blue' }); Ví dụ: Vi_du_9_3.aspx Vi_du_9_3 $(document).ready(function() { $("tr:first").css("font-style", "italic"); $("tr:last").css({ backgroundColor: 'yellow', fontWeight: 'bolder' }); $("tr:even").css("color", "red"); $("tr:odd").css("color", "blue"); $("tr:eq(4)").css("text-decoration", "line-through"); $("tr:gt(6)").css("font-size", "30px"); $("tr:lt(3)").css("font-size", "25px"); $(":header").css({ background: '#CCC', color: 'blue' }); }); Dòng thứ 1 Dòng thứ 2 Dòng thứ 3 Dòng thứ 4 Dòng thứ 5 Dòng thứ 6 Dòng thứ 7 Dòng thứ 8 Dòng thứ 9 Tiêu đề 1

Nội dung 1

Tiêu đề 2

Nội dung 2

5.1.4 Content Filters (Chọn lọc nội dung) :contains(text) Kiểu trả về: Array Tương ứng với phần tử chứa nội dung văn Ví dụ: Gạch chân tất thẻ “div” có chứa từ “John” $("div:contains('John')").css("text-decoration", "underline"); :empty Kiểu trả về: Array Tương ứng với tất phần tử phần tử Ví dụ: Chèn xâu “Không có nội dung” màu đỏ vào thẻ “td” phần tử $("td:empty").text("Không có nội dung!").css('color','red'); :has(selector) Kiểu trả về: Array Tương ứng với phần tử bao gồm phần tử phù hợp với định danh selector Ví dụ: Đặt cỡ chữ 30px cho đoạn văn có nằm thẻ “div” có chứa thẻ “p” $("div:has(p)").css("font-size", "30px"); :parent Kiểu trả về: Array Tương ứng với tất phần tử cha (chứa phần tử con, gồm phần tử văn bản) Microsoft Vietnam – DPE Team | Bài số 9: jQuery Ví dụ: Đặt cỡ chữ 30px cho thẻ “td” cha có phần tử $("td:parent)").css("font-size", "30px"); Ví dụ: Vi_du_9_4.aspx Vi_du_9_4 $(document).ready(function() { $("div:contains('Thị')").css("text-decoration", "underline"); $("td:empty").css("background-color", "#EEEEEE"); $("div:has(p)").css("font-size", "30px"); $("td:parent").css("color", "yellow"); }); td {width:200px;background:green; } Danh sách lớp 12A3 Đỗ Thị Thu Hằng Lê Văn Bình Trần Thị Hương Nguyễn Hải Nam Hoàng Thu Bình TD #0 TD #2

Chào bạn đến với jQuery

Chào bạn đến với jQuery 5.1.5 Visibility Filters :hidden Kiểu trả về: Array Tương ứng với tất phần tử ẩn phần tử vào có dạng ẩn “hidden” Ví dụ: Ẩn thẻ “div” $("div:hidden").show(3000); :visble Kiểu trả về: Array Tương ứng với phần tử nhìn thấy Ví dụ: Click chuột vào thẻ div nhìn thấy $("div:visible").click(function() {$(this).css("background", "yellow");}); Ví dụ: Vi_du_9_5.aspx Vi_du_9_5 Microsoft Vietnam – DPE Team | Bài số 9: jQuery $(document).ready(function() { $("span:first").text("Tìm thấy " + $(":hidden", document.body).length + " phần tử ẩn."); $("div:hidden").show(3000); $("span:last").text("Tìm thấy " + $("input:hidden").length + " inputs ẩn."); $("div:visible").click(function() { $(this).css("background", "yellow"); }); }); div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; } span { display:block; clear:left; color:red; } starthidden { display:none; } Ẩn Ẩn 5.2 Attributes 5.2.1 Class addClass( class ) Kiểu trả về: jQuery Thêm class xác định vào tập phần tử phù hợp Nếu có thêm nhiều class class khoảng trắng Ví dụ: Thêm class “Maudo” vào thẻ p $("p").addClass("Maudo"); removeClass( class ) Kiểu trả về: jQuery Loại bỏ tất class xác định khỏi tập phần tử phù hợp Ví dụ: Loại bỏ lass “Maudo” khỏi thẻ p $("p").removeClass("Maudo"); toggleClass( class ) Kiểu trả về: jQuery Thêm class class chưa tồn loại bỏ class tồn Ví dụ: Thêm class “Maudo” vào thẻ p class “Maudo” chưa tồn thẻ p loại bỏ class “Maudo” khỏi thẻ p tồn $("p").toggleClass("Maudo"); Ví dụ: Vi_du_9_6.aspx Microsoft Vietnam – DPE Team | Bài số 9: jQuery Vi_du_9_6 $(document).ready(function() { $("p").addClass("under"); $("p:last").removeClass("highlight"); $("p").click(function() { $("p").removeClass("highlight"); $(this).toggleClass("highlight"); }); }); p { margin: 4px; font-size:16px; font-weight:bolder; } blue { color:blue; } under { text-decoration:underline; } highlight { background:yellow; }

Visual Studio 2000

ASP.NET 3.5

Chào mừng bạn đến với jQuery

5.2.2 html() HTML, Text Kiểu trả về: String Lấy nội dung html (innerHTML) phần tử Ví dụ: Mỗi click vào thẻ p lấy nội dung html thẻ p thông báo nội dung lấy $("p").click(function() {alert($(this).html())}); html( val ) Kiểu trả về: jQuery Thiết lậ nội dung html (innerHTML) cho phần tử Ví dụ: Thiết lập nội dung html cho thẻ div $("div").html("Chào bạn! Chúc buổi học hôm thú vị."); text() Kiểu trả về: String Lấy nội dung text (innerText) phần tử Ví dụ: Mỗi click vào thẻ p lấy nội dung text thẻ p thông báo nội dung lấy $("p").click(function() {alert($(this).html())}); text( val ) Kiểu trả về: jQuery Thiết lập nội dung text (innerText) cho phần tử Ví dụ: Thiết lập nội dung text cho thẻ div $("div").text("Chào bạn! Chúc buổi học hôm thú vị"); 5.3 Events Bind( type, [data], fn ) Bind hander vào kiện cho phần tử phù hợp, “type” kiện, “[data]” (tùy chọn) thêm liệu thông qua kiện, “fn” hàm xử lý kiện xảy Microsoft Vietnam – DPE Team | Bài số 9: jQuery 10 one( type, [data], fn ) Bind hander vào kiện thực thi lần cho phần tử phù hợp trigger( type, [data] ) Kích kiện phần tử phù hợp unbind( [type], [data] ) Loại bỏ kiện khỏi phần tử hover( over, out ) over, out hàm xử lý kiện Hàm over xử lý chuột di chuyển phần tử hàm out xử lý chuột rời khỏi phần tử toogle( fn, fn ) Chuyển đổi gọi hàm lần click Ví dụ: Vi_du_9_7.aspx Vi_du_9_7 $(document).ready(function() { $("p:first").bind("click", function(e) { var str = "( " + e.pageX + ", " + e.pageY + " )"; $("span:first").text("Sự kiện click vừa xảy vị trí " + str); }); $("p:first").bind("dblclick", function() { $("span:first").text("Sự kiện click đúp vừa xảy thẻ " + this.tagName); }); var n = 0; $("div:lt(2)").one("click", function() { var index = $("div").index(this) + 1; $(this).css({ borderStyle: "inset", cursor: "auto" }); $("p:last").text("Hình chữ nhật thứ " + index + " vừa click." + " Tổng cộng có " + ++n + " click."); }); $("button:eq(0)").click(function() { update($("span:eq(1)")); }); $("button:eq(1)").click(function() { $("button:first").trigger('click'); update($("span:eq(2)")); }); function update(j) { var n = parseInt(j.text(), 0); j.text(n + 1); } function aClick() { $("div:last").show().fadeOut("slow"); } Microsoft Vietnam – DPE Team | Bài số 9: jQuery 11 $("#bind").click(function() { // could use bind('click', aClick) instead but for variety $("#theone").click(aClick).text("Có thể click"); }); $("#unbind").click(function() { $("#theone").unbind('click', aClick) text("Không làm "); }); $("li").hover( function() { $(this).css("color", "red"); }, function() { $(this).css("color", "black"); } ); }); p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; } span { color:red; } div1 { width:60px; height:60px; margin:5px; float:left; background:green; border:5px outset; cursor:pointer; }

Click click đúp vào đây.

Hãy click vào hình chữ nhật màu xanh

Button thứ 1 Button thứ 2 0 lần button thứ click. 0 lần button thứ clicks. Không làm Bind Click Unbind Click Click!

Hãy di chuyển chuột lên Máy bay, Ôtô, Xe máy, Xe đạp

• Máy bay
• Ôtô
• Xe máy
• Xe đạp

Câu hỏi ôn tập jQuery gì? Trả lời: jQuery thư viện kiểu Javascript giúp đơn giản hóa cách viết JavaScript tăng tốc độ xử lý kiện trang web Các thư viện jQuery cung cấp mục đích chung trừu tượng hoá lớp phổ biến cho trang web scripting, hữu ích hầu hết tình scripting Các chức jQuery bao gồm:  Chọn tag tập hợp tag trang web  Cung cấp hàm tiện ích thông dụng Microsoft Vietnam – DPE Team | Bài số 9: jQuery 12  Nhanh chóng tạo tag  Quan trọng phân tách việc thiết kế lập trình web phía client Trong Visual Studio 2008 có hỗ trợ Intellisense cho jQuery không? Trả lời: Có Nếu downdload cài đặt file sau: http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736 Sau download file “jquery-1.3.2-vsdoc.js” từ: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc.js Tài liệu tham khảo jQuery, URL: http://docs.jquery.com ScottGu's Blog, URL: http://weblogs.asp.net/scottgu/archive/2008/12/02/dec-2nd-links-asp-net-aspnet-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx Microsoft Vietnam – DPE Team | Bài số 9: jQuery 13 ... QUAN VỀ ASP. NET 3. 5 Bài giới thiệu tổng quan công nghệ ASP. NET 3. 5 (Active Server Page) ASP. NET gì? Giới thiệu tính ASP. NET 3. 5 sơ với ASP. NET 2.0 Cách tạo website Visual Studio 2008 ASP. NET gì?... ASP. NET 3. 5 cần cài đặt thêm tính ASP. NET 3. 5 Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan ASP. NET 3. 5 Trong phần giới thiệu số tính ASP. NET 3. 5 ASP. NET AJAX 2.1 Trong ASP. NET 2.0,... Các tính ASP. NET 3. 5 Microsoft phát hành ASP. NET vào ngày 19 tháng 11 năm 2007 với Visual Stutio 2008 Đây bước tiến hóa từ ASP. NET 2.0 tới ASP. NET 3. 5 Nếu sử dụng ASP. NET 2.0 để sử dụng ASP. NET