@MRsunhuimin
2019-08-18T10:44:22.000000Z
字数 2026
阅读 158
web
- js是一种脚本语言,常用于网页客户端编程,使网页在客户端浏览器中,实现更多地动态功能,表现出更加丰富的视觉效果。
- jquery是一个快速、简洁的JavaScript框架,极大的简化了javascript编程。
- 先复制jquery,引入js包中
- 然后再写
<script src="js/jquery-1.12.4.js"type="text/jscript"></script>
- 最后还要写
<script>代码<script>
$(选择器).val(); //获取
$(选择器).val(值); //赋值
- .html();//获取
- .html("XXXX");//赋值
- .text();//获取
- .text(w);文本内容); //赋值
操作单个CSS
$(选择器).css(属性,值); //改变
$(选择器).css(属性); //获取
操作多个CSS
- $(选择器).css({属性1:值1,属性2:值2}); //改变
- js转jquery:$(js对象);
- jquery转js:(选择器).get(0)或(选择器)[0]
//addClass 添加class样式
$(".div1").addClass("div1");//removeClass 删除class样式
$(".div1").removeClass("div1");
- (选择器).attr(HTML属性,值); //改变属性值
- 隐藏:hide(显示时间<毫秒>,函数)显示元素
- 显示:show(显示时间<毫秒>,函数)显示元素
- 切换:toggle(显示时间<毫秒>,函数) 隐藏与显示
- 遍历
$(选择器).each(function(下标,值){
//代码块
});
$.each(数组名,function(下标,值){
//代码块
});
$(选择器).submit(function(){
return true; //true提交 false禁止提交
});
$(选择器).click(function(){
});
$(window).keydown(function(k){
k.keyCode //获取键盘按下后对于的键值
});
$(选择器).focus(function(){
});
$(选择器).blur(function(){
});
$(选择器).change(function(){
});
$("body").on(要绑定的事件,目标元素,函数);
如:
$("body").on("click","#a1",function(){
//代码块
});
document.getElementById("div")和$("#div")对象是同一个,但是前者是原生的,后者是封装的(拥有自己的方法和属性),两者不能相互调用,除非类型转换
//动态生成元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
<button>create</button>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(function(){
//添加点击事件
$("p").click(function(){
$(this).text('click');
})
//创建一个新节点
$("button").click(function(){
var p ="<p>new</p>";
$("div").append(p);
})
/*结果证明,click并没有绑定到新的节点上。
如果需要给动态的元素绑定事件,需要使用到on()
on()方法,可以给未来的元素绑定事件
使用方法:
1、先选中动态生成元素的父元素
2、然后绑定事件
3、再选中子类
可以理解为给div下的p元素包括未来的p元素绑定click事件,这是比较通俗易懂的理解,详细内容可以看文档的具体说明*/
$("div").on("click","p",function(){
$(this).text("click");
});
});
</script>
</html>