jquery

导入包

1、Download jQuery and link to it locally:

2、Link to a CDN(a hosted copy)

api文档:http://api.jquery.com/

修改css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(selector).css(property, value)

//select elem with id "special" and give it a border
$("#special").css("border", "2px solid red");

//we can also pass in an object with styles
var styles = {
backgroundColor : "pink",
fontWeight: "bold"
};
$("#special").css(styles);

//select all li's and make them yellow
$("li").css("color", "yellow");
//select all elements with class "big"
//and give them an orange border
$(".big").css("border", "1px dashed orange");

方法

获取文本与修改文本:
text:http://api.jquery.com/text/
html:http://api.jquery.com/html/

获取input选择框的值。
val()😒(“input”).val():http://api.jquery.com/val/

获取修改属性:
attr(): $( “#greatphoto” ).attr( “title”, “Photo by Kelly Clark” );http://api.jquery.com/attr/

addClass()

removeClass()

toggleClass()

事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>jQuery Events</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<h1>jQuery Events</h1>
<h1>jQuery Events</h1>
<h1>jQuery Events</h1>

<input type="text">

<button>Don't Click Me</button>
<button>Sersiouly Don't Click Me</button>
<button>This is your last warning!</button>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$('#submit').click(function(){
console.log("aaa")
})

$('button').click(function(){
alert("bbb")
})


$("button").click(function(){
var text = $(this).text();console.log("you clicks "+ text)
})

//键盘按下事件,打印事件对象信息。
$("input").keypress(function(event){
console.log(event);
});

$("input").keypress(function(event){
//判断鼠标按下
if(event.which ===13){
alert("you hit enter!");
}
});

鼠标按下事件代码:
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes