jQuery
2020-03-22 18:17
666 查看
1.jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
1)美元符号定义 jQuery
2)选择符(selector)“查询"和"查找” HTML 元素
3)jQuery 的 action() 执行对元素的操作
例子
1)$(this).hide() - 隐藏当前元素 2)$("p").hide() - 隐藏所有 <p> 元素 3)$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素 4)$("#test").hide() - 隐藏所有 id="test" 的元素
2.jQuery 选择器
元素选择器
$("p")
#id 选择器
$("#test")
.class 选择器
$(".test")
3.jQuery 事件
鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload hover
4.jQuery 效果
隐藏和显示
$("p").hide(); $("p").show();
淡入淡出
fadeIn() fadeOut() fadeToggle() fadeTo()
滑动
slideDown() slideUp() slideToggle()
动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
链(Chaining) Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
5.iQuery Html
获得内容
text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值
设置内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值
添加元素
append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 $("p").append("追加文本");
删除元素/内容
remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 $("#div1").remove();
jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 $("h1,h2,p").addClass("blue");
jQuery 尺寸方法
width() height() innerWidth() innerHeight() outerWidth() outerHeight()
6.jQuery - AJAX get() 和 post() 方法
$("button").click(function(){ $.post("url", { name:"xm", url:"http://www.baidu.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); }); $("button").click(function(){ $.get("url",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); });
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- jquery根据name属性获取输入框input值
- jQuery 选择器
- jQuery插件jQuery-JSONP使用注意
- Jquery 基础
- jquery简介
- jquery全选和反选checkbox
- javascript对象;jquery对象;DOM对象
- jQuery validate.js插件入门
- jQuery DataGrid 实现增删改查,分页
- 基于JQuery的桌面Dock效果(稳定版)
- 改变获取对象方式 万能的jQuery选择器
- jquery.load()使iframe随内容改变而自适应高度
- 10款不同的jquery tag标签插件
- myeclipse9 jquery 报错
- 强大的JQuery链式操作风格
- jQuery实现手机号码输入提示功能实例
- 仿写jquery
- jquery scrollable.js的使用及建议
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
- jQuery时间格式插件-moment.js的使用