jquery basics interacting with JavaScript and CSS-fifth chapter

Directory

1. JavaScript framework types and their pros and cons
2. jquery Library
3. jquery Object $

• Mastering the basic Selector
• Mastering the filter Selector
• Mastering the form selector

RIA Technology

Common RIA Technologies

• Ajax
• Sliverlight
• Flex

What is a framework?

A framework is a program component that a programmer encapsulates one function after another for others to use, and is known as a template. We use the framework to simplify the development process.

jquery library file

Import:

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>

Jquery-1. Version number. JS (development version) and jquery-1. Version number. Min.js (Release version)

The first jquery program

<script src="jquery-1.11.1.min.js"></script><script> $(document).ready(function(){      alert(“开启JQuery的学习之旅！ ");});</script>

$ (document). Ready () is the core of the entire operation.

Practice

<script type = "text/javascript"> function init(){  alert(1);  alert(2); } $(document).ready(init); $().ready(init); $(init); $(document).ready(function(){  alert(11);  alert(12); }); $().ready(function(){  alert(11);  alert(12); }); $(function(){  alert(11);  alert(22); });</script>

jquery Selector

$("h2").css("background","#08F");

1. Class CSS Selectors
2. Filter Selector

Basic Selector

#id $(‘#test’) id为test.class $(“.test”) class为testelement $(‘p’) 所有的<p>* $(‘*’)选取所有的元素

Hierarchy Selector

$(‘div span’)：选取<div>里所有的<span>元素$(‘div > span’)：选取<div>下元素名是<span>的子元素$(‘.one + div’)：class为one的下一个<div>元素$(‘#two ~ div’)：id为two的元素后面的所有<div>兄弟元素

Filter Selector

The grammatical feature is the use of ":"

The categories are as follows:

• Basic Filter Selector
• Attribute Filter Selector
• child element Filter Selector
• Visibility Filter Selector
• Content Filter Selector
• Form object property Filter Selector

1. $ ("Li:first"?) : Select All
2. Element is the first one in the
3. Elements
4. $ ("Li:last"?) : Select All
5. The last one in the element
6. Elements
7. $ ("Li:even"?) : Selects all indexes with an even number
8. Elements
9. $ ("li:odd"?) : Selects all indexes that have an odd number
10. Elements
11. $ ("Li:not (. three)"?) : Select a class that is not a three element
12. $ (": Header"?) : Select all the heading elements in the page
13. $ (": Focus"?) : Select the element that currently takes focus
14. $ ("Li:eq (1)"?) : Select an index equal to 1
15. element, EQ-GT-LT,GT is greater than, LT is less than.

Escape of special symbols

<div id="id#a">a</div>$("#id\\#a");<div id="id[3]">b</div>$("#id\\[3\\]");

Content Filter Selector

1. : Contains (text)
2. : Empty
3. : Has (selector)
4. :p arent

Selectors have a strict writing specification, and a single space or less space will affect the result of the selector.

Requirements

1. Selector Selector
2. Basic Selector
3. Hierarchy Selector
4. Filter Selector
5. Form Selector

Skills

(1) Basic filter Selector
(2) The Click () method of the JQuery object
(3) CSS () method for jquery objects
(4) Selector
(5) is () method
(6) Show () method
(7) Hide () method
(8) AddClass () method
(9) Mouseout () method
(Ten) MouseOver () method

Code:

Code:

Effect Show

"ul li:odd" SELECT list ul in the odd item, using CSS () method, set back
Judge class as tips, call Show () method display, call Hide () method hidden

<script type="text/javascript"> $tips = $(".tips"); $tips.hide(); $("p").click(function(){ if ($tips.is(":hidden")) { $tips.show(); }else{ $tips.hide(); } });</script>

JavaScript interacts with CSS style properties

document.getElementById("title").style.color="#f00f00";

Common events

onclick单击onmouseover鼠标移到某元素之上onmouseout鼠标移开onmousedown鼠标被按下

Visibility

1. Visible.
2. Hidden Non-visible

JavaScript changes Style

1. Use the Style property
2. Using the ClassName Property

Conclusion

jquery basics interacting with JavaScript and CSS-fifth chapter