JQuery使用
jQuery -> 函数 $ -> jQuery
<script src="Jq/jquery-1.11.0.min.js"> </script>
<script>
$(function () {
$("#div1").text("333");
})
</script>
页面加载函数
JS页面加载函数, 只允许一个, 多个的话会被覆盖
JQ页面加载函数, 允许有多个, 按照从上往下顺序执行
JQuery选择器
1、基层选择器
2、层级选择器
3、基本过滤选择器
4、属性选择器
5、表单选择器
文本内容设置
innerHTML
innerText -> text()
value
$(function() {
$("#citySelect").change(function () {
var allCity = city[$(this).val()];
$("#cityId").html("<option>请选择城市</option>");//刷新
$.each(allCity,function (i,n) {
var option = document.createElement("option");
$(option).html(n);
$("#cityId").append(option);
});
});
});
显示效果
show():显示
hide():隐藏
toggle():切换元素的显示状态
slideDown():通过使用滑动效果,显示隐藏的被选元素
slideUp():通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。
slideToggle():通过使用滑动效果(高度变化)来切换元素的可见状态。
fadeIn():使用淡入效果来显示被选元素
fadeOut():使用淡出效果来隐藏被选元素
fadeToggle():使用淡入淡出效果来切换选中元素的
属性设置
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>
文档处理
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>