使用
jQuery -> 函数 $ -> jQuery
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function () {
$("#div1").text("新的内容");
})
</script>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
页面加载函数
<script src="js/jquery-1.11.0.min.js"></script>
<script>
// JS页面加载函数, 只允许一个, 多个的话会被覆盖
onload = function() {
alert("老张");
}
onload = function() {
alert("老王");
}
// JQ页面加载函数, 允许有多个, 按照从上往下顺序执行
$(function() {
alert("老李");
});
$(function() {
alert("老赵");
});
</script>
弹窗:老李
老赵
老王
与JS区别
JS对象不能使用JQ的函数, JQ对象也不能使用JS的函数/属性
需要将两者进行转换
<script>
$(function() {
// 通过JS给div1设置内容
var div1 = document.getElementById("div1");
div1.innerText = "JS设置的新内容";
// 通过JQ给div2设置内容
// JQ使用选择器来取代 getElementxxx
$("#div2").text("JQ设置的新内容");
// 结论: JS对象不能使用JQ的函数, JQ对象也不能使用JS的函数/属性
// JS对象, 能不能使用 JQ 的函数 text()
// JS -> JQ 掌握
$(div1).text("JQ给div1设置的新内容");
// JQ对象, 能不能使用 JS 的属性 innerText
// JQ -> JS 了解
$("#div2").get(0).innerText = "JS给div2设置的新内容";
});
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
JQuery选择器
基本选择器
层级选择器
基本过滤选择器
属性选择器
表单选择器
文本内容设置
innerHTML
innerText -> text()
value
<script>
$(function() {
// 获得p标签中的标签内容
var str = $("#p1").html();
console.log(str);
// 设置p标签内容 innerHTML
$("#p1").html('<font color="red">JQ的html方法添加的标签内容</font>');
// 获得div标签中的文本内容 innerText
var strDiv = $("#div1").text();
console.log(strDiv);
$("#div1").text('<font color="red">JQ的text方法添加的文本内容</font>');
// 输入框中的内容, value
var val = $("input").val();
console.log(val);
$("input").val("JQ设置input的内容");
});
</script>
<body>
<p id="p1"><u>段落</u></p>
<div id="div1"><u>div</u></div>
<input type="text" value="input内容"/>
</body>
属性设置
attr(“属性名”) --> 获得属性对应的值
attr(“属性名”, “值”) --> 设置属性对应的值
– attribute 自定义属性, html不支持的属性 color
prop(“属性名”) --> 获得属性对应的值
prop(“属性名”, “值”) --> 设置属性的值
– property 固有属性, html本身支持的属性 href src checked
addClass(className) --> 添加完的class可以直接使用样式表
removeClass(className)
补充
循环
<script>
$(function() {
var arr = ["杭州","宁波",'温州','湖州','台州'];
// jquery数组.each(callback)
/*$("div").each(function(i) {
console.log(i); // 循环的下标
console.log(this); // 每一个元素 this 属于JS对象
});*/
// JQ的全局函数
$.each(arr, function(i, n) {
console.log(i); // 循环的下标
console.log(n); // 取出来的每一个元素
})
})
</script>
<body>
<div>1</div>
<div>2</div>
文档处理
append()
prepend()
before()
after()
<script>
$(function (){
var $op = $("<option>芒果</option>");
// 将芒果加到梨后面
// $("select").append($op);
// 将芒果加到苹果前面
// $("select").prepend($op);
// 将芒果加到柿子后面
// $("option:eq(1)").after($op);
// $("option:eq(1)").before($op);
// $op.insertBefore($("option:eq(1)"));
// 清除所有子元素 innerHTML = "";
$("select").empty();
})
</script>
</head>
<body>
<select>
<option>苹果</option>
<option>柿子</option>
<option>梨</option>
</select>
显示效果
show() hide() toggle()
slideDown() slideUp() slideToggle()
fadeIn() fadeOut() fadeToggle()