Home > Article > Backend Development > Web advanced jQuery operation DOM elements &&MySQL record operation&&PHP object-oriented learning notes, web advanced jquerydom_PHP tutorial
hi
保持学习数量和质量
1、jQuery操作DOM元素
----使用attr()方法控制元素的属性
attr()
方法的作用是设置或者返回元素的属性,其中attr(属性名)
格式是获取元素属性名的值,attr(属性名,属性值)
格式则是设置元素属性名的值。
控制就是获取以及设置
----操作元素的内容
使用html()
和text()
方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容。
使用方法与attr()略有不同,但作用基本相同
----操作元素的样式
通过addClass()
和css()
方法可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。
----移除属性和样式
使用removeAttr(name)
和removeClass(class)
分别可以实现移除元素的属性和样式的功能,前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名
----使用append()方法向元素内追加内容
append(content)
方法的功能是向指定的元素中追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数。
----使用appendTo()方法向被选元素内插入内容
appendTo()
方法也可以向指定的元素内插入内容,它的使用格式是:
<strong>$(content).appendTo(selector)</strong>
参数content表示需要插入的内容,参数selector表示被选的元素,即把content内容插入selector元素内,默认是在尾部。
注意这里的div若换为.red,效果会有不同,自行实验以及思考吧。
----使用before()和after()在元素前后插入内容
使用before()
和after()
方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容,调用格式分别为:
<strong>$(selector).before(content)</strong>
和<strong>$(selector).after(content)</strong>
其中参数content表示插入的内容,该内容可以是元素或HTML字符串。
----使用clone()方法复制元素
调用clone()
方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性,它的调用格式为:
<strong>$(selector).clone()</strong>
其中参数selector可以是一个元素或HTML内容。
----替换内容
replaceWith()
和replaceAll()
方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:
<strong>$(selector).replaceWith(content)</strong>
和<strong>$(content).replaceAll(selector)</strong>
参数selector为被替换的元素,content为替换的内容。
----使用wrap()和wrapInner()方法包裹元素和内容
wrap()
和wrapInner()
方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:
<strong>$(selector).wrap(wrapper)</strong>
和<strong>$(selector).wrapInner(wrapper)</strong>
参数selector为被包裹的元素,wrapper参数为包裹元素的格式。比如
----Use each() method to traverse elements
Use the each()
method to traverse the specified collection of elements. During traversal, the sequence number of the traversed elements is returned through the callback function. Its calling format is:
<strong>$(selector).each(function(index))</strong>
The parameter function is the callback function during traversal, and index is the sequence number of the traversed element, which starts from 0.
span class="green">peach----Use the remove() and empty() methods to delete elements
The
method deletes the selected element itself and its sub-elements. This method can specify certain elements that need to be deleted by adding filter parameters, while the
method only deletes the sub-elements of the selected element.
< span class="green">peachremove()
grapeempty()
lychee span>
< ;/body>
2. MySQL
-----Records in the operation data table-----
mysql> CREATE TABLE users(
-> id SMALLINT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
-> username VARCHAR(20) NOT NULL,
-> password VARCHAR(32) NOT NULL,
-> age SMALLINT NOT NULL DEFAULT 10,
-> sex BOOLEAN
-> );
----Insert record INSERT
INSERT tbl_name [(col_name)] {VALUES|VALUE}...
If a field is omitted, all fields will be assigned values. If you want to keep the primary key incrementing at this time, just write the VALUE of the primary key as NULL/DEFAULT. Moreover, when fields are omitted, values must and can only be assigned to all fields. Each field must be assigned a value. If it does not match, an error will be reported
mysql> INSERT users VALUES(NULL,'Tom','123',23,1);
Assignment can write a value, a function, or a default value. Insert multiple values here as an 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 methods of inserting records
--INSERT.. SET
The difference from INSERT is that subquery (SubQuery) can be performed; and only one record can be inserted at a time
INSERT tbl_name
mysql> INSERT users SET username='Ben',password='323';
Since other fields have default or non-empty values, this is correct.
--INSERT...SELECT
----Update (single table update) UPDATE
Similar to INSERT...SET...
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 |
---- ---------- -------------------------- ----- ----- ------
Updates all columns at this time.
If you want to update certain columns, you need to use conditions
mysql> UPDATE users SET age=age 10 WHERE id%2=0;
What this means is the operation of adding 10 to the age of an even numbered ID
----Delete records (single table deletion) DELETE
DELETE FROM tbl [WHERE ...]
Pay attention to the change of id after deletion and re-insertion
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 added, not filled in intelligently, please note.
----Query SELECT
The most commonly used statements in the database. For example, SELECT * FROM users;
that I have seen before
--query expression
Each expression represents a desired column, there must be at least one;
Separate multiple columns with,
* means all columns. tbl_name.* can represent all columns of the named table;
mysql> SELECT id,username FROM users;
You can also change the order to display
mysql> SELECT username,id FROM userS;
---------- ----
| username | id |
---------- ----
| Tom | 1 |
| Rose | 3 |
| Ben | 4 |
| Ben | 5 |
---------- - ---
For the convenience of multi-table query in the future, the "full" query is written like this
mysql> SELECT users.id,users.username FROM users;
--Assign an alias
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 have not changed
----WHERE condition
Add and delete generally need to be added, otherwise it is an operation on all records; WHERE expressions support functions or operators
----GROUP BY query result grouping
ASC ascending order, DESC descending order
mysql> SELECT sex FROM users GROUP BY sex;
------
| sex |
------
| NULL |
| 0 |
------
2 rows in set (0.01 sec)
mysql> SELECT sex FROM users GROUP BY age ASC;
------
| sex |
------
| NULL |
| 0 |
| 0 |
| 0 |
------
----having grouping conditions
mysql> SELECT sex,age FROM users GROUP BY sex HAVING age>20;
------ -----
| sex | age |
------ -----
| 0 | 27 |
------ -----
Note that the field in the having statement must appear in the select, or simply be an aggregate function (max, etc.)
----Sort query results ORDER BY
Similar to GROUP BY
mysql> SELECT * FROM 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 there is more than one sorting standard here. The default ascending order is based on age. If the same ones are encountered, the same ones are sorted in descending order by id
----LIMIT limits the 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 should be noted that if you write only one number 2, it means two numbers from the beginning; the 2,2 here means that two numbers will be returned from the third number, because the arrangement starts from 0 by default, so Here is the beginning of Article 3.
In addition, the order of restrictions has nothing to do with ID
mysql> SELECT * FROM users ORDER BY id DESC LIMIT 2;
---- ---------- ---------- ----- -- ----
| id | username | password | age | sex |
---- ---------- ---------- ----- ------
| 5 | Ben | 323 | 10 | NULL |
| 4 | Ben | 323 | 21 | 0 |
---- --------- - ---------- ----- ------
----After learning SELECT
mysql> INSERT test(username) SELECT username FROM users WHERE age>=20;
mysql> SELECT * FROM test;
---- ----------
| id | username |
---- -------- --
| 1 | Tom |
| 2 | Ben |
---- ----------
You can search and write in a targeted manner
----Summary
Record operation: add, update, delete and check
INSERT,UPDATE,DELETE,SELECT
3. Object-oriented
-----Basic Practice-----
----The concept of class
A class can be regarded as a "type of person", with the same "properties" and "methods" (but the corresponding values are not necessarily the same);
Attributes are inherent properties of the class
Methods are the "actions" of the class
The object of the class is called the instantiation of the class - the object is an individual belonging to the class, the concretization of the class
The attributes and methods of a class are class members
----Instantiation of class
Fill the class frame with specific data
/*
* Code for object-oriented learning records
*/
//Definition class
class nbaPlayer{
public $name=" Jordan";
public $height="198cm";
public $team="Bull";
public function __construct(){
}
public function run(){
echo "Runningn";
}
}
//Instantiation
$jordan=new nbaPlayer();
//The calling object’s attributes and Method
echo $jordan->name."n";
$jordan->run();
----Constructor
__construct
Default call, can be customized to give the default value of the class
The method of use is to write the variable in the function and give the value when instantiating it
/*
* Code for object-oriented learning records
*/
//Definition class
class nbaPlayer{
public $name;
public $height;
public $team;
public function __construct($name,$height,$team){
echo "constructingn";//determine whether the constructor is called
$this->name=$name; //Use $this pseudo variable to pass parameters in the method
$this->height=$height;
$this->team=$team ;
}
public function run(){
echo "Runningn";
}
}
//Instantiation
$jordan=new nbaPlayer(" Jordan","198cm","Bull");
//Call the properties and methods of the object
echo $jordan->name."n";
$jordan->run();
$james=new nbaPlayer("James", "197cm", "Heat");
Note that the constructor will be output twice here. In other words, the constructor is called once for each instantiation.
----Destructor
__destruct()
After writing the destructor,
function __destruct(){
echo "destructingn";
}
The results are as follows
constructing Jordan Running constructing destructing destructing
In other words, the destructor will be automatically called when the program ends
Alternatively, the destructor will also be called when the instantiated object is assigned a value of null
Generally used to clean up used resources
----Object reference
//Object reference
$james1=$james;
$james2=&$james;
Among them, there is a reference of &, and the changes of the two objects are synchronized and can be regarded as a kind of image. Specifically, you can use the destructor mentioned above to simply verify.