Основи JQuery

Доброго дня, сьогодні я напишу про маніпулювання html елементами за допомогою бібліотеки JQuery.

Почнемо з самого простого – що таке JavaScript  та як його можна використовувати при розробці веб сторінок.

JavaScript – це мова програмування, яка не залежить від платформи. Ця мова може виконуватись в Інтернет браузерах. Одним з варіантів використання – це маніпулювання html елементами, наприклад зміна кольору якось елементу при виникненні якоїсь події. Гляньте на ось такий коротенький приклад написання функції:

function myFunc() { var msg = "hello"; alert(msg); }

Ось тут оголошується функція з назвою myFunc, в якій створюється змінна зі значенням “hello”. Після цього, виводиться повідомлення в звичайному месседж боксі:

1.1

Мал. 1.1

Якщо ви ще не знайомі з цією мовою, то обов’язково відвідайте сторінку http://w3schools.com/ де є дуже гарний навчальний курс по JavaScript.

Тепер перейдемо до JQuery Smile.

Що таке JQuery

JQuery – це бібліотека, яку можна використовувати в мові JavaScript для маніпулювання html документом.

Основний принцип полягає в тому, що ми вибираємо якісь елементи на сторінці за певним критерієм (клас, ідентифікатор і т.д.), після чого виконуємо набір операцій, які модифікують ці елементи.

Приклад використання

Для початку, створіть новий проект в Visual Studio, з типом ASP .NET WebApplication:

1.2

Мал. 1.2

В папці проекту автоматично створилась папка Scripts, яка містить всі JavaScript файл цього проекту:

1.3

Мал. 1.3

Як ви бачите, цей тип проекту автоматично добавив файли з бібліотеки JQuery, які ви вже можете використовувати Smile.

В сторінці Default.aspx модифікуйте код наступним чином:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuerySampleApp._Default" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> <script type="text/javascript"> </script> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <a id="bing" href="http://www.bing.com/">Bing</a> <a class="google" href="http://www.google.com/">Google</a> <a href="http://jquery.com/">JQuery</a> <input type="button" value="Click here!" /> </asp:Content>

В блоку 

<script type="text/javascript"> </script>

добавте такий код:

function test() { var anchors = $('a'); anchors.css('color', 'red'); }

Тепер модифікуйте кнопку зі значенням “Click here!” наступним чином:

<input type="button" value="Click here!" onclick="test();" />

Запустіть сторінку, перегляньте її вигляд:

1.4

Мал. 1.4

Після чого натисніть на кнопку:

1.5

Мал. 1.5

Як ви бачите, всі посилання на сторінці стали червоними. Нагадую, що це все ми зробили за допомогою цього шматка коду:

function test() { var anchors = $('a'); anchors.css('color', 'red'); }

В першій стрічці я створив змінну, якій присвоїв результат JQuery. Селектор розкладається наступним чином: a – назва елементу, який ми хочемо вибрати в документі.

В другій стрічці я викликав функцію css, яка дозволяє встановити css для всіх елементів в даному контейнері. Якщо переглянути код сторінки після натискання цієї кнопки, ви побачите ось такий результат:

1.6

Мал. 1.6

Давайте спробуємо інший селектор – вибірка елементів, які мають клас “google”:

function test() { var anchors = $('.google'); anchors.css('color', 'red'); }

Перезапустіть сторінку та натисніть кнопку:

1.7

Мал. 1.7

Тепер модифікуйте html сторінки:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <a id="bing" href="http://www.bing.com/">Bing</a> <a class="google" href="http://www.google.com/">Google</a> <a href="http://jquery.com/">JQuery</a> <input type="button" value="Click here!" onclick="test();" /> <br /> <span class="google">Hello</span> </asp:Content>

Знову запустіть сторінку:

1.8

Мал. 1.8

Натисніть кнопку:

1.9

Мал. 1.9

Отже, селектор .google підходить для всіх елементів, які мають клас google.

Тепер давайте розглянемо такий селектор: #myElement.

Модифікуйте функцію test:

function test() { var elements = $('#myElement'); elements.css('color', 'red'); }

Добавте такий елемент на сторінку:

<div id="myElement">Simple div</div>

Запустіть сторінку та натисніть кнопку:

1.10

Мал. 1.10

Підсумок

В даній статті ви отримали інформацію про те, як можна використовуючи засоби JQuery маніпулювати html документом. Після цього було розглянуто селектори, які дозволяють вибрати елементи за класом та ідентифікатором. В наступній статті ми продовжимо розглядати селектори та функції JQuery.

Скачати код

Advertisements

, , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: