├── index.html
├── index.js
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | jquery learning
8 |
9 |
10 |
11 | study with anis
12 |
13 |
14 |
This is h2 inside div
15 |
16 |
17 | This is h2 outside div
18 | this is a paragraph
19 |
20 | google
21 |
22 |
23 |
24 |
25 |
26 |
27 | No button is clicked yet
28 |
29 |
30 | - Bangladesh
31 | - India
32 | - Pakistan
33 | - England
34 | - Finland
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | // 1. html selector and text manipulation
2 | // using js
3 | // document.querySelector("h2").innerHTML = "hello";
4 |
5 | // using jquery for selecting and changing text
6 | // $("h2").text("hello");
7 |
8 | $(".my-div h2").text("bye");
9 |
10 | // we can select multiple elements
11 | $("#para1, h1").text("changed text of paragraph");
12 |
13 | $("#para1").html("hello i am strong paragraph");
14 | $("#para1").prepend("starting");
15 | $("#para1").append("ending");
16 |
17 | // before, after for adding new elements
18 | var para2 = $("").text("this is paragraph 2");
19 | // $("#para1").after(para2);
20 | $("#para1").before(para2);
21 |
22 | // 2. attribute manipulation using jquery
23 | var attributeValue = $("a").attr("href");
24 | console.log(attributeValue);
25 |
26 | $("a").attr("href", "https://www.studywithanis.com");
27 | $("a").removeAttr("target");
28 |
29 | // 3. css manipulate
30 | $("h1").css("color", "tomato");
31 |
32 | $("h2").css({ color: "green", "font-style": "italic" });
33 |
34 | $("a").addClass("link-style");
35 |
36 | // 4. event listener
37 | $(".mybtn").click(function () {
38 | var value = this.innerHTML;
39 | $("#result").text(value + " is selected");
40 | });
41 |
42 | $(".mybtn").mouseover(function () {
43 | var value = this.innerHTML;
44 | $("#result").text(value + " is overed by mouse");
45 | });
46 |
47 | // 5. animation
48 |
49 | // 6.
50 | $(".demo2").parent().css("background-color", "green");
51 | $(".my-div").children().css("color", "white");
52 |
53 | // $("ol li:nth-child(2)").css("color", "green");
54 | // $("ol li:nth-child(3)").css("color", "green");
55 |
56 | $("ol li:odd").css("color", "green");
57 | // $("ol li:even").css("color", "green");
58 |
59 | $("body").addClass("animated hinge");
60 |
61 | /*
62 |
63 | css()
64 | prop()
65 | remove()
66 | appendTo()
67 | clone().appendTo()
68 | parent().css()
69 | child().css()
70 | addClass()
71 |
72 |
73 | */
74 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | .link-style {
2 | color: red;
3 | text-decoration: none;
4 | }
5 |
--------------------------------------------------------------------------------