<commit_before>---
layout: default
---
<div class="inner">
	<h1 id="main1">Zajęcia 2</h1>
    <div id="main2" class="h2">Materiały do&nbsp;warsztatów technologii webowych prowadzonych na Wydziale Matematyki i&nbsp;Informatyki Uniwersytetu im. <NAME> w Poznaniu.</div>
	<a href="../../index.html" class="button-v button-module">Wróć do&nbsp;spisu materiałów</a>
  <a href="https://jsfiddle.net/" target="blank" class="button-v button-module">Tu będziemy testować kod&nbsp;źródłowy</a>
	<div style="clear: both;"></div>
</div>

## 2. Podstawy pracy z biblioteką jQuery

### 2.1. Podstawowe informacje

Biblioteka jQuery oferuje prosty sposób na wykonywanie najczęściej spotykanych zadań JavaScript.
Odbywa się to szybko i spójnie we wszystkich najważniejszych przeglądarkach internetowych,
bez konieczności jakichkolwiek rozwiązań awaryjnych w kodzie.

**Czym jest jQuery?**

jQuery to plik JavaScript dołączany na stronach internetowych.
Biblioteka ta pozwala na wyszukiwanie elementów za pomocą selektorów stylu CSS,
a następnie wykonywanie dowolnych zadań na tych elementach z&nbsp;wykorzystaniem metod jQuery.

**Jak umieścić jQuery na stronie?**

Wejdź na stronę <a href="http://jquery.com/download/" target="blank">http://jquery.com/download/</a>.

### 2.2. Prosty przykład użycia jQuery

Funkcja o nazwie <span class="preformat">jQuery('selektor css')</span> pozwala na&nbsp;wyszukanie
co najmniej jednego elementu na&nbsp;stronie. Tworzy obiekt o&nbsp;nazwie **jQuery**,
zawierający odniesienia do elementów. Częstym skrótem w zapisie tej funkcji
jest zapis <span class="preformat">$('selektor css')</span>.

### Przykład 2.2.1

```js
$('li.hot').addClass('complete');
```

### 2.3. Wyszukiwanie elementów

### Ćwiczenie 2.3.1.

Dany jest kod strony HTML:

```html
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Tytuł strony...</title>
	</head>
	<body>
		<header>
			<h1 class="header header1">Nagłówek H1</h1>
			<h2 id="header2" class="header">Nagłówek H2<h2>
		</header>
		<nav>
			<ul>
				<li><a href="/">Strona główna</a></li>
				<li><a href="/newsy">Newsy</a></li>
				<li><a href="/artykuly">Artykuły</a></li>
				<li><a href="/opinie">Opinie</a></li>
				<li><a href="/kontakt">Kontakt</a></li>
			</ul>
		</nav>
		<section>
			<article>
				<form action="http://www.jakaswitryna.com/review.php" method="get"><commit_msg>Update zaj02.md<commit_after>---
layout: default
---
<div class="inner">
	<h1 id="main1">Zajęcia 2</h1>
    <div id="main2" class="h2">Materiały do&nbsp;warsztatów technologii webowych prowadzonych na Wydziale Matematyki i&nbsp;Informatyki Uniwersytetu im. <NAME> w Poznaniu.</div>
	<a href="../../index.html" class="button-v button-module">Wróć do&nbsp;spisu materiałów</a>
  <a href="https://jsfiddle.net/" target="blank" class="button-v button-module">Tu będziemy testować kod&nbsp;źródłowy</a>
	<div style="clear: both;"></div>
</div>

## 2. Podstawy pracy z biblioteką jQuery

### 2.1. Podstawowe informacje

Biblioteka jQuery oferuje prosty sposób na wykonywanie najczęściej spotykanych zadań JavaScript.
Odbywa się to szybko i spójnie we wszystkich najważniejszych przeglądarkach internetowych,
bez konieczności jakichkolwiek rozwiązań awaryjnych w kodzie.

**Czym jest jQuery?**

jQuery to plik JavaScript dołączany na stronach internetowych.
Biblioteka ta pozwala na wyszukiwanie elementów za pomocą selektorów stylu CSS,
a następnie wykonywanie dowolnych zadań na tych elementach z&nbsp;wykorzystaniem metod jQuery.

**Jak umieścić jQuery na stronie?**

Wejdź na stronę <a href="http://jquery.com/download/" target="blank">http://jquery.com/download/</a>.

### 2.2. Prosty przykład użycia jQuery

Funkcja o nazwie <span class="preformat">jQuery('selektor css')</span> pozwala na&nbsp;wyszukanie
co najmniej jednego elementu na&nbsp;stronie. Tworzy obiekt o&nbsp;nazwie **jQuery**,
zawierający odniesienia do elementów. Częstym skrótem w zapisie tej funkcji
jest zapis <span class="preformat">$('selektor css')</span>.

### Przykład 2.2.1

```js
$('li.hot').addClass('complete');
```

### 2.3. Wyszukiwanie elementów

### Ćwiczenie 2.3.1.

Dany jest kod strony HTML:

```html
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Tytuł strony...</title>
	</head>
	<body>
		<h1 class="header header1">Nagłówek H1</h1>
		<h2 id="header2" class="header">Nagłówek H2<h2>
		<nav>
			<ul>
				<li><a href="/">Strona główna</a></li>
				<li><a href="/newsy">Newsy</a></li>
				<li><a href="/artykuly">Artykuły</a></li>
				<li><a href="/opinie">Opinie</a></li>
				<li><a href="/kontakt">Kontakt</a></li>
			</ul>
		</nav>
		<section>
			<article>
				<form action="http://www.jakaswitryna.com/review.php" method="get">
{'fraction_non_alphanumeric': 0.16158601577488807, 'fraction_numerical': 0.012364101470901726, 'mean_word_length': 4.909319899244332, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 121, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4509924', 'n_tokens_mistral': 2007, 'n_tokens_neox': 1976, 'n_words': 430}