JQ功能汇总
一 概念
- 通常以$开头
## 四、功能概括
#### 1、选择器
```js
var $ele = $('.ele');
```
#### 2、文本操作
```
$ele.text("添加文本");
```
#### 3、样式操作
```js
$ele.css({width: '200px', heigth: '200px'});
$ele.css('background-color', 'red').css('border-radius', '50%');
```
#### 4、类名操作
```js
$ele.toggleClass('active');
```
#### 5、事件操作
```js
$ele.on('click', function() {});
```
#### 6、动画操作
```js
$ele.slideUp();
```
#### 7、文档操作
```js
$ele.append("<b>Hello</b>");
```二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jq功能汇总</title>
<style type="text/css">
.active {
border: 5px solid black;
}
p {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button class="b1">d1</button><button class="b2">d2</button>
<div id="d1" class="div1"></div>
<div id="d2" class="div2"></div>
</body>
<!-- 导入jq -->
<script src="js/jquery-3.3.1.js"></script>
<!-- jq -->
<script type="text/javascript">
// 变量的命名规范:
// jq变量一般由$开头
// 1.jq的选择器: 满足css选择器语法
// var $div = $('.div1');
var $div = $('body #d1');
console.log($div);
// 2.文本操作
$div.text("d1 d1 d1");
$div.html("<b>d1 d1 d1</b>");
// 3.样式操作
$div.css({
width: "200px",
"border-radius": "50%"
});
// jq的方法基本都具有返回值,所以支持(建议)链式操作
/*
$div = $div.css("height", function () {
console.log("js>>>", this); // js的this本身
console.log("jq>>>", $(this)); // jq的this本身
console.log(">>>", $(this).width()); // jq对象指向的盒子宽度
return $(this).width() * 2; // jq会默认添加单位
});
$div.css("background-color", "red");
*/
$div.css("height", function () {
console.log("js>>>", this); // js的this本身
console.log("jq>>>", $(this)); // jq的this本身
console.log(">>>", $(this).width()); // jq对象指向的盒子宽度
return $(this).width() * 2; // jq会默认添加单位
}).css("background-color", "red");
// 4.类名操作
$('.b1').click(function () {
$div.toggleClass("active");
})
// 5.事件操作
$div.on('click', function () {
console.log("$div 被点击了");
})
// 6.动画操作
$('.b1').on('click', function () {
$div.slideToggle();
})
// 7.文档操作
// 创建标签
var $p = $("<p></p>");
// 样式操作
$p.addClass("p");
// 添加到页面
$div.append($p);
</script>
<!-- js -->
<script type="text/javascript">
// 1.选择器
var div = document.querySelector('.div2');
console.log(div);
// 2.文本操作
div.innerText = "d2 d2 d2";
div.innerHTML = "<b>d2 d2 d2</b>";
// 3.样式操作
div.style.width = "200px";
div.style.height = "200px";
div.style.background = "orange";
div.style.borderRadius = "50%";
// 4.类名操作
var b2 = document.querySelector('.b2');
b2.onclick = function () {
var c_name = div.className;
if (c_name.match("active")) {
div.className = c_name.replace(" active", "")
} else {
div.className += " active";
}
}
</script>
</html>
浙公网安备 33010602011771号