Web Advanced jquery operation DOM element &&mysql record operation &&php Object-oriented learning notes

Last Update:2015-11-03 Source: Internet

Author: User

Tags wrapper

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Keep Learning quantity and quality

1. jquery Operation DOM Element

----Control the attributes of an element using the attr () method

attr()The function of a method is to set or return the attributes of an element, where the attr(属性名) format is the value that gets the attribute name of the element, and the attr(属性名，属性值) format is the value that sets the attribute name of the element.

Control is getting and setting

<a href= "http://127.0.0.1" id= "A1" > Point I will change </a>
<div> my changed address is: <span id= "Tip" ></span></div>

<script type= "Text/javascript" >
$ ("#a1"). attr ("href", "www.imooc.com");
var $url = $ ("#a1"). attr ("href");
$ ("#tip"). HTML ($url);
</script>

----The contents of an ACTION element

The html() contents of the elements are manipulated using and methods, and when the parameters of the text() two methods are empty, the content of the element is obtained, and if the method contains a parameter, the parameter value is set to the element content.

The use method is slightly different from attr (), but the function is basically the same

<div id= "HTML" ></div>
<div id= "Text" ></div>

<script type= "Text/javascript" >
var $content = "<b> Oh, I'm getting fat again!" </b> ";
$ ("#html"). HTML ($content);
$ ("#text"). Text ($content);
</script>

----The style of an action element

The styles in the addClass() element are easily manipulated by the and methods, and the arguments in parentheses are the css() style names that increment the elements, which directly write the property contents of the style in parentheses.

<body>
<div id= "Content" > I wore a red coat </div>

<script type= "Text/javascript" >
$ ("#content"). CSS ({"Background-color": "Red", "Color": "#fff"});
</script>
</body>

----Removing properties and styles

The removeAttr(name) removeClass(class) ability to remove the attributes and styles of an element by using and respectively implementing the parameter in the method means removing the property name, while the parameter in the method indicates the name of the removed style

<body>
<div id= "Content" class= "blue white" > I took off a blue coat </div>

<script type= "Text/javascript" >
$ ("#content"). Removeclass ("blue White");
</script>
</body>

----append content to an element using the Append () method

append(content)The function of a method is to append to the specified element, the content parameter appended, either a character, an HTML element tag, or a function that returns the contents of a string.

<body>

<script type= "Text/javascript" >
function rethtml () {
var $html = "<div id= ' test ' title= ' Hi ' > I was created by calling function </div>"
return $html;
}
$ ("Body"). Append (rethtml ());
</script>
</body>

----Use the Appendto () method to insert content inside the selected element

appendTo()Method can also insert content into the specified element, which is used in the following format:

$(content).appendTo(selector)

The content of the parameter indicates what needs to be inserted, and the parameter selector represents the selected element, that is, the content is inserted inside the selector element, and the default is at the tail.

<body>
<div>
<span class= "Green" > Little Turtle </span>
</div>

<script type= "Text/javascript" >
var $html = "<span class= ' Red ' > Little Frog </span>"
$ ($html). AppendTo ("div");
</script>
</body>

Note that the div here is changed to. Red, the effect will be different, self-experiment and think about it.

----use before () and after () to insert content before and after an element

Use before() and after() methods you can insert content before and after an element, respectively, by inserting the specified element or content before and after the entire element, with the calling format:

$(selector).before(content)And$(selector).after(content)

Where the contents of the parameter represent the inserted content, which can be an element or an HTML string.

<body>
The <span class= "Green" > Let's Make a friend! </span>

<script type= "Text/javascript" >
var $html = "<span class= ' Red ' > Brothers. </span> "
$ ("span"). After ($html);
</script>
</body>

----Copy elements using the Clone () method

The calling clone() method can generate a copy of the selected element, which copies a selected element, including its node, text, and attributes, in the form of a call:

$(selector).clone()

Where the parameter selector can be an element or HTML content.

<body>
<span class= "Red" title= "HI" > I am the Monkey King </span>

<script type= "Text/javascript" >
$ ("Body"). Append ($ ("span"). Clone ());
</script>
</body>

----Replace content

replaceWith()And replaceAll() methods can be used to replace content in elements or elements, but when they are called, the content and the location of the substituted element are different, as shown below:

$(selector).replaceWith(content)And$(content).replaceAll(selector)

The parameter selector is the replaced element, and the content is the contents of the replacement.

<body>
<span class= "green" title= "HI" > I'm Dick Silk </span>

<script type= "Text/javascript" >
var $html = "<span class= ' red ' title= ' Hi ' > I am local tyrants </span>";
$ ($html). ReplaceAll ("span");
</script>
</body>

----Wrap elements and content using the Wrap () and Wrapinner () methods

wrap()And wrapInner() methods can carry elements of the package, but the former is used to wrap the elements themselves, the latter is used to wrap the contents of the elements, their invocation format is:

$(selector).wrap(wrapper)And$(selector).wrapInner(wrapper)

The parameter selector is the wrapped element, and the wrapper parameter is the format of the package element. such as <div></div>

<body>
<span class= "Red" title= ' Hi ' > My body is a bit crooked </span>

<script type= "Text/javascript" >
$ (". Red"). Wrapinner ("<i></i>");
</script>
</body>

----traversing elements using the each () method

The each() method allows you to iterate through the specified collection of elements, returning the sequence number of the traversed element through the callback function, in the form of a call:

$(selector).each(function(index))

The parameter function is the callback function at the time of traversal, and index is the serial number of the traversed element, starting from 0.

<body>
<span class= "green" > Banana </span>
<span class= "green" > Peach </span>
<span class= "Green" > Grapes </span>
<span class= "Green" > Lychee </span>

<script type= "Text/javascript" >
$ ("span"). each (function (index) {
if (index = = 1) {
$ (this). attr ("Class", "Red");
}
});
</script>
</body>

----Delete elements using the Remove () and empty () methods

remove()Method removes the selected element itself and child elements by adding a filter parameter that specifies some elements that need to be deleted, and the empty() method removes only the child elements of the selected element.

2. MySQL

-----The records in the Operational data table-----

Mysql> CREATE TABLE Users (
-ID SMALLINT UNSIGNED PRIMARY KEY auto_increment,
-Username VARCHAR (a) not NULL,
-Password VARCHAR (+) not NULL,
-Age SMALLINT not NULL DEFAULT 10,
-A sex BOOLEAN
);

----Inserting records insert

INSERT Tbl_name [(col_name)] {values| VALUE} ...

If the field is omitted, all fields are assigned to the operation. If you want to keep the primary key incremented at this point, the value of the primary key is written as Null/default. Also, when you omit a field, you must and only assign to all assignments, and each field is assigned a value, and if the mismatch causes an error

Mysql> INSERT users VALUES (NULL, ' Tom ', ' 123 ', 23, 1);

Assignments can write values, write functions, or default values. Insert multiple values here for example.

Mysql> INSERT users VALUES (null, ' Tom ', ' 123 ', 23,1), (null, ' Rose ', MD5 (' 123 '), default,0);

Mysql> SELECT * from users;
+----+----------+----------------------------------+-----+------+
| ID | Username | password | Age | sex |
+----+----------+----------------------------------+-----+------+
| 1 | Tom | 123 | 23 | 1 |
| 2 | Tom | 123 | 23 | 1 |
| 3 | Rose | 202cb962ac59075b964b07152d234b70 | 10 | 0 |
+----+----------+----------------------------------+-----+------+

----Other ways to insert records

--insert. SET

Unlike insert, you can make subqueries (subquery), and you can insert only one record at a time

INSERT Tbl_name

mysql> INSERT users SET username= ' Ben ', password= ' 323 ';

This is true because the other fields have default or non-null.

--insert ... SELECT

----Update (single-table update) update

Similar to insert ... SET ... The way of writing

mysql> UPDATE users SET age=age+5;

Mysql> SELECT * from users;
+----+----------+----------------------------------+-----+------+
| ID | Username | password | Age | sex |
+----+----------+----------------------------------+-----+------+
| 1 | Tom | 123 | 28 | 1 |
| 2 | Tom | 123 | 28 | 1 |
| 3 | Rose | 202cb962ac59075b964b07152d234b70 | 15 | 0 |
| 4 | Ben | 323 | 15 | NULL |
+----+----------+----------------------------------+-----+------+

All columns are updated at this time.

If you want to update some columns, use the condition

mysql> UPDATE users SET age=age+10 WHERE id%2=0;

This means to add the age of the even ID to the 10 operation.

----Delete Record (single-table delete) Delete

DELETE from TBL [WHERE ...]

Note The ID changes that are inserted after the deletion

Mysql> DELETE from users WHERE id=2;
Query OK, 1 row affected (0.01 sec)

Mysql> SELECT * from users;
+----+----------+----------------------------------+-----+------+
| ID | Username | password | Age | sex |
+----+----------+----------------------------------+-----+------+
| 1 | Tom | 123 | 27 | 0 |
| 3 | Rose | 202cb962ac59075b964b07152d234b70 | 12 | 0 |
| 4 | Ben | 323 | 21 | 0 |
+----+----------+----------------------------------+-----+------+
3 Rows in Set (0.00 sec)

mysql> INSERT users SET username= ' Ben ', password= ' 323 ';
Query OK, 1 row affected (0.01 sec)

Mysql> SELECT * from users;
+----+----------+----------------------------------+-----+------+
| ID | Username | password | Age | sex |
+----+----------+----------------------------------+-----+------+
| 1 | Tom | 123 | 27 | 0 |
| 3 | Rose | 202cb962ac59075b964b07152d234b70 | 12 | 0 |
| 4 | Ben | 323 | 21 | 0 |
| 5 | Ben | 323 | 10 | NULL |
+----+----------+----------------------------------+-----+------+

The ID number is automatically incremented instead of smart Fill, please note.

----Query Select

The most applied statement for the database. For example, the previously seen select * from users;

--Query expression

Each expression represents the desired column and must have at least one;

Between multiple columns, separated by

* represents all columns. Tbl_name.* can represent all columns of a named table;

Mysql> SELECT id,username from users;

You can also change the order to show

Mysql> SELECT username,id from UserS;
+----------+----+
| Username | ID |
+----------+----+
| Tom | 1 |
| Rose | 3 |
| Ben | 4 |
| Ben | 5 |
+----------+----+

For the convenience of multi-table query later, "full" query this write

Mysql> SELECT users.id,users.username from users;

--Assigning aliases

mysql> SELECT ID as userid,username as uname from users;
+--------+-------+
| UserID | uname |
+--------+-------+
| 1 | Tom |
| 3 | Rose |
| 4 | Ben |
| 5 | Ben |
+--------+-------+

The names in the data table don't change.

----WHERE condition

Add delete is generally added, otherwise it is the operation of all records; where expressions support functions or operators

Grouping----GROUP BY query results

ASC Ascending, desc descending

mysql> SELECT sex from the users GROUP by sex;
+------+
| sex |
+------+
| NULL |
| 0 |
+------+
2 rows in Set (0.01 sec)

mysql> SELECT sex from the Users GROUP by age ASC;
+------+
| sex |
+------+
| NULL |
| 0 |
| 0 |
| 0 |
+------+

----Having group conditions

Mysql> SELECT sex,age from the users GROUP by sex have age>20;
+------+-----+
| sex | Age |
+------+-----+
| 0 | 27 |
+------+-----+

Note that the field in the having statement must appear in select, or simply an aggregate function (max, etc.)

Sort----Query Results order BY

Similar to GROUP by

Mysql> SELECT * from the users ORDER by Age,id DESC;

+----+----------+----------------------------------+-----+------+
| ID | Username | password | Age | sex |
+----+----------+----------------------------------+-----+------+
| 5 | Ben | 323 | 10 | NULL |
| 3 | Rose | 202cb962ac59075b964b07152d234b70 | 12 | 0 |
| 4 | Ben | 323 | 21 | 0 |
| 1 | Tom | 123 | 27 | 0 |
+----+----------+----------------------------------+-----+------+

Note that the standard for sorting here gives more than one, then the default ascending according to age, and if it encounters the same, the same descending order by ID

----Limit number of returns

Mysql> SELECT * from Users LIMIT 2, 2;
+----+----------+----------+-----+------+
| ID | Username | password | Age | sex |
+----+----------+----------+-----+------+
| 4 | Ben | 323 | 21 | 0 |
| 5 | Ben | 323 | 10 | NULL |
+----+----------+----------+-----+------+

It is important to note that if you write only a number 2, which is two from the beginning, the 2,2 here is to return two from the third, since the permutation is the default starting at 0, so here is the third one.

In addition, the order of restrictions has no relation to the ID

Mysql> SELECT * from the users ORDER by ID DESC LIMIT 2;
+----+----------+----------+-----+------+
| ID | Username | password | Age | sex |
+----+----------+----------+-----+------+
| 5 | Ben | 323 | 10 | NULL |
| 4 | Ben | 323 | 21 | 0 |
+----+----------+----------+-----+------+

After----learned select

mysql> INSERT Test (username) SELECT username from users WHERE age>=20;

Mysql> SELECT * from test;
+----+----------+
| ID | Username |
+----+----------+
| 1 | Tom |
| 2 | Ben |
+----+----------+

Can be directed to find and write

----Summary

Record operation: Increase and delete

Insert,update,delete,select

3. Object-oriented

-----Basic Practice-----

The concept of----class

Classes can be thought of as "a class of people," with the same "attributes" and "methods" (but the corresponding values are not necessarily the same);

property, which is the intrinsic nature of the class

method, which is the "action" of the class

The object of a class is called an instantiation of a class--an object is an individual belonging to a class, the materialization of a class

The properties and methods of a class are class members

Instantiation of a----class

Fill the framework of a class with concrete data

<?php
/*
* Code for Learning Records in the face of objects
*/
Defining classes
Class nbaplayer{
Public $name = "Jordan";
Public $height = "198cm";
Public $team = "Bull";

Public Function __construct () {

}

Public Function run () {
echo "running\n";
}
}
Instantiation of
$jordan =new Nbaplayer ();
Invoking the properties and methods of an object
echo $jordan->name. " \ n ";
$jordan->run ();

----constructors

__construct

Default invocation, which can be customized to give the Class A default value

The use of the method is to write the variable in the function, when instantiated to give the value

<?php
/*
* Code for Learning Records in the face of objects
*/
Defining classes
Class nbaplayer{
Public $name;
Public $height;
Public $team;

Public function __construct ($name, $height, $team) {
echo "constructing\n";//determine if the constructor is called
$this->name= $name; Using $this pseudo-variables to pass parameters in a method
$this->height= $height;
$this->team= $team;
}

Public Function run () {
echo "running\n";
}
}
Instantiation of
$jordan =new Nbaplayer ("Jordan", "198cm", "Bull");
Invoking the properties and methods of an object
echo $jordan->name. " \ n ";

$jordan->run ();

$james =new Nbaplayer ("James", "197cm", "Heat");

Note that this will output a two-time constructor. That is, every instantiation invokes a constructor.

----Destructors

__destruct ()

After the destructor is written,

function __destruct () {
echo "destructing\n";
}

The results are as follows

Constructing Jordan Running Constructing destructing destructing

That is, destructors are automatically called at the end of the program.

Alternatively, the destructor is called when the instantiated object is assigned to NULL

Resources that are typically used for cleanup

----Object reference

References to Objects
$james 1= $james;

$james 2=& $james;

Among them, there are & references, two objects change is synchronous, can be regarded as an image. The above-mentioned destructors can be used for simple verification.

Web Advanced jquery operation DOM element &&mysql record operation &&php Object-oriented learning notes

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More