jQuery学习心得总结
jQuery学习
- 一级目录
- 二级目录
- 三级目录
- jQuery 对象
- 选择器
- 表单选择器
- jQuery操作-html属性
- jQuery操作- css属性
- jQuery操作-文本
- 筛选-祖先
- 筛选-后代
- 筛选-同胞
- 筛选-过滤
- 筛选-判断
- jQuery事件-ready事件
- jQuery事件-绑定事件
- jQuery事件-合成事件
- jQuery事件-其它常用事件
一级目录
二级目录
三级目录
● jQuery是于2006年初建立的一个轻量级javascript库(即一个快速的,简洁
的javaScript库)。
● Jquery是对javaScript做了轻量级的封装,简化语法
● jQuery 理念: 写得少(语法简单), 做得多(功能强大)。
jQuery 对象
jQuery 对象就是通过 jQuery() 或$()包装 DOM 对象后产生的对象。
jQuery 对象是 jQuery 独有的,如果一个对象是 jQuery 对象, 那么它就可 以使用
jQuery 里的方法: $(“#id”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery
里的任何方法。
原生DOM对象 与 jquery对象的区别
原生DOM对象实际表示网页中的标签.
jquery对象是一个数组对象,将原生的DOM包含在里面,然后在数组对象中封装了许多方法.
dom对象中的方法 与 jquery对象中的方法完全不同,不能相互调用
//var jobj = jQuery("#textid");var jobj = $("#textid");//jquery的语法获得标签对象 jQuery对象//alert(jobj.val());
//dom对象转为jquery对象//alert($(tobj));
jQuery与2006年 创建的一个轻量级的javaScript库
对javaScript做了轻量级的封装,简化了语法
理念:写得少,做的多
误区: jquery代替了javaScript 这是错误
选择器
●选择器是 jQuery 的根基, 在 jQuery 中对事件处理, 遍历DOM 操作都依赖于选择器
● jQuery 选择器的优点: 简洁的写法
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过
标签 id, class 和标签名来查找 DOM 标签(在网页中 id 只能使用一次,
class 允许重复使用
表单选择器
对于以下组件进行简便化:
:input :text :password : radio : button :submit :reset :image :checkbox :file :hidden
//标签选择器//var objs = $("input");//类选择器//var objs = $(".incss");//选择器组合//var objs = $(".incss,input");//通配选择器//var objs = $("*");//var objs = $("li:first");//var objs = $(".lis:first");//var objs = $(".lis:last");//var objs = $("li:odd")//var objs = $("li:even")//var objs = $("li:gt(0)")//var objs = $("li[name]")var objs = $("li[name!='aa']")console.log(objs.length)}</script>
</head>
<body class="incss"><input type="text" id="textid" class="incss"/><ul><li class="lis" name="aa">list item 1</li><li class="lis" name="bb">list item 2</li><li class="lis">list item 3</li><li class="lis">list item 4</li><li class="lis">list item 5</li></ul><input type="button" value="测试" onclick="test()" />
</body>
</html>
function test(){//val() 获得第一个匹配标签的value属性值//val(v) 设置所有匹配的标签的value属性值 //$("#textid2").val($("#textid1").val());//console.log($("input").val());//$("input").val("aaa");//attr("属性名") 获得指定属性的值//console.log($("input").attr("type"));//attr("name","value"); 设置匹配标签的属性值//$(":checkbox").attr("checked",false);//删除属性//$(":checked").attr("checked",false);$(":checked").removeAttr("checked");}
jQuery操作-html属性
● val() 获得第一个匹配标签的当前值
● val(val)设置所有匹配标签的值
● attr(name)获得第一个匹配标签的属性值
● attr(name,value)设置所有匹配的标签设置一个属性值
● attr方法只能操作标签中已经定义的属性,不能操作动态添加的属性
removeAttr(name);删除所有匹配的标签中已经定义的属性
jQuery操作- css属性
● 取得样式name属性的值
cs s (name)
● 设置样式name属性的值
cs s (name,val)
cs s ({“name”:” val”, “name”:” val” })
● 为每个匹配的标签添加指定的clas s
addClas s (clas sname)
● 从所有匹配的标签中删除全部或者指定的
removeClass (clas sname)
● 如果已经存在就删除一个类,如果没有就添加一个类
toggleClass (cal s sname)
// console.log($("#div1").css("background-color")); 获得指定属性的值// $("#div1").css("background-color","red"); 设置属性值//css(name,value) 设置的是行内样式表 优先级高//$("#div1").css({"background-color":"red","width":"200px","height":"200px"});//$("#div2").addClass("divcss"); 添加类//$("#div2").removeClass("divcss"); 删除类$("#div2").toggleClass("divcss"); //切换类 有 就删除 没有 就添加
jQuery操作-文本
• 获得第一个匹配标签的html内容
html()
• 设置所有匹配标签的html内容
html(val)
• 获得所有匹配标签文本内容
text()
• 设置所有匹配标签文本内容
text(val)
● 向所有匹配标签中追加一些HTML标记
append(content);
● 匹配的标签之后追加HTML内容。
after(content)
● 匹配的标签之前追加HTML内容。
before(content)
● 把指定的标签移动到指定的标签中
appendTo(content)
• 从DOM中删除所有匹配的标签
remove()
• 清空DOM中所有匹配的内容
empty()
筛选-祖先
筛选是对获取的对象进行筛选,最终留下符合某些特征的对象。
parent()返回被选标签的直接父标签
parents()返回被选标签的所有祖先标签,它一路向上直到文档的根标签
筛选-后代
● children()返回被选标签的所有直接子标签
● find()返回被选标签的后代标签,一路向下直到最后一个后代
筛选-同胞
● siblings()返回被选标签的所有同胞标签
● next()返回被选标签的后一个相邻标签
● nextAll()返回被选标签的所有后面的同胞标签
● prev()返回被选标签的前一个相邻标签
● prevAll()返回被选标签的所有前面的同胞标签
<script type="text/javascript">function test(){//祖先(直接父级 父级的父级)//var objs = $("#div1").parent();//只获得直接上级标签//var objs = $("#div1").parents();//获得所有的父级标签//var objs = $("#div1").parents("html");//获得祖先中指定的父级标签//后代 (子级,孙子) //var objs = $("#div1").children(); 获得所有的儿子级别的标签//var objs = $("#div1").children("b"); 获得指定的儿子级别的标签//var objs = $("#div1").find("b"); //获得指定的后代标签//同胞 //var objs = $("#div1").siblings();//获得上下所有的兄弟标签//var objs = $("#div1").siblings("p"); 获得上下指定的兄弟标签//var objs = $("#div1").next();//var objs = $("#div1").nextAll();//var objs = $("#div1").nextAll("p");//var objs = $("#div1").prev();//var objs = $("#div1").prevAll();console.log(objs.text())}</script>
筛选-过滤
● first()返回被选标签的首个标签
● last()返回被选标签的最后一个标签
● eq()返回被选标签中带有指定索引号的标签
● filter()返回匹配的标签
● not()返回不匹配标准的所有标签
筛选-判断
● is() 根据选择器、标签或 jQuery 对象来检测匹配标签集合,如果这些
标签中至少有一个标签匹配给定的参数,则返回 true
● hasClass()检查当前的标签是否含有某个特定的类,如果有,则返回
true。
jQuery事件-ready事件
● 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
● 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的。响应速
度。
语法:
$(document).ready(匿名函数);
$(document).ready(function(){ 在这里写你的代码... });
简单写法:
$(fucntion(){
在这里写你的代码... }
jQuery事件-绑定事件
给此div在js中动态绑定点击事件
$(function(){ $("#divOne").click(function(){ alert("div被点击了"); }); });
jQuery事件-合成事件
hover():一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方
法,当鼠标移动到一个匹配的标签上面时,会触发指定的第一个函数。当鼠标移
出这个标签时,会触发指定的第二个函数。
$(“选择器").hover( fn1,fn2);
jQuery事件-其它常用事件
● on()方法绑定事件处理程序到当前选定的jQuery对象中的元素
● one() 一次性事件
● resize()当浏览器窗口改变大小时触发
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.8.3.min.js" type="text/javascript"></script><script type="text/javascript">//window.οnlοad=function(){}//ready(fn) 等同于 onload事件 网页加载就绪后执行/* $(document).ready(function(){$("#btnid").click(function(){alert("按钮");});}); *///ready的简写方式$(function(){//为标签动态添加事件,以及事件的处理函数/* $("#btnid").click(function(){test();}); *//* $("#btnid").dblclick(function(){alert();}); *///批量的为标签添加事件 及 处理函数/* $("input[type='button']").click(function(){alert($(this).val());}); *//*//添加事件 $("#btnid").bind("click",function(){alert(this.value);})删除指定事件$("#btnid").unbind("click"); *///hover(over,out) over移入触发的函数 out是移出触发的函数/* $("#div1").hover(function(){$(this).css("background-color","red");},function(){$(this).css("background-color","green");}); *///事件切换 toggle(fn1,fn2,fn3...)/* $("#btnid").toggle(function(){$(this).css("background-color","green");},function(){$(this).css("background-color","red"); },function(){$(this).css("background-color","blue"); }); *///一次性事件$("#btnid").one("click", function(){alert( $(this).val() );});})//监听浏览器窗口发生变化时触发$(window).resize(function(){console.log(window.innerWidth+"::"+window.innerHeight);});function test(){alert("按钮"); }</script></head><body><input type="button" value="按钮1" id="btnid" /><input type="button" value="按钮2" /><input type="button" value="按钮3" /><div id="div1" style="background-color: green;">aaaa</div></body>
</html>
jQuery学习心得总结相关推荐
- Jquery 学习心得和资料
经过一段时间的学习,发现Jquery确实是一个强大而简洁的脚本框架.它的强大的查询功能使我们在做WEB开发的时候得心应手.还有它的插件机制让它可以无限制的扩展,下面是我这段时间以来用到的一些比较好的插 ...
- jquery[学习心得]ajax的注意点
ajax异步请求 优点: 1.不需要插件,只要支持javascript 2.用户体检极佳(局部刷新) 3.提升web程序的性能 4.减轻web服务器带宽的负担 缺点 1.不同版本的浏览器对xmlhtt ...
- jQuery学习(一)
因为项目需要,同时也因为兴趣,在近一段时间研究和使用了jQuery,它真的是太强大了,代码非常的优雅和简洁,好后悔现在才开始了解它,虽然目前网络上关于jQuery的资料.学习心得,教程多得你看不完,但 ...
- pdc-admin 学习心得
pdc-admin 学习心得 包结构讲解: com.vip.product.admin.apiclient :调用公司公用的API (邮件.图片.中央授权系统.任务调度系统) com.vip.prod ...
- JavaScript初步学习心得
@Java Script学习心得 Java Script初步学习心得 通过这一周大概的学习和了解,掌握了不少java script 的知识,了解了ajax jQuery的运用,还非常充分的学习了正则表 ...
- 华清远见 前端技术总结与学习心得
技术总结 这里总结的是html.css.以及js的部分知识点,jquery相关的内容还没有添加进来 html 文本相关标签 标签属性 align = "right(靠右)/center(居中 ...
- 【一周课表 · 中秋献礼9.2折】 第四期 认证考试、java、python、php、移动开发、系统运维、区块链 【分享学习心得得技术图书/定制T恤/购课券/会员券】)
[一周课表]: [一周课表]是CSDN学院新推出的学习专栏节目,目的在于带领大家能够一起学习一些课程,认真学习的学员会收到CSDN学院发出的奖励小礼品:技术图书/CSDN学院定制T恤. 规则:在下方评 ...
- HTML学习心得(1)
HTML学习心得(1) 认识HTML 在这我做一些简单的HTML的总结核一些常见的,简单的标签或属性编辑的例子. 什么是超文本语言 超文本语言,从字面来理解,它就是超级文本.它不像C,C++,java ...
- 2017年11月学习心得报告
学习心得报告 2017.11.30 以下分为五个部分: 一. 关于git的学习 二. 关于fis3的学习 三. 关于es6的学习 四.关于Jquery的学习 五.关于sublime Text3的熟悉 ...
最新文章
- Git提交到多个远程仓库(多看两个文档)
- win7构建成功helloworld驱动、WDF驱动中KMDF与UMDF区别
- leetcode-3-无重复字符的最长子串
- POJ - 2689 Prime Distance(素数区间筛模板)
- 少儿编程100讲轻松学python(十七)-pycharm如何配置python环境
- sql中全文检索的具体细节
- php preg replace中文,php preg_replace函数用法
- S3C2440 进行微秒级、毫秒级延时函数
- 项目管理-项目整体计划Excel表格绘制
- Hulu机器学习问题与解答系列 | 二十九:WGANs:抓住低维的幽灵
- 新机框ATCA配置过程(视图部分)
- 如何修改 Powered by ShopXO的版权字眼
- Qt网路与通信(获取本机IP、MAC、IPV6子网掩码等网络信息)
- html在线客服插件,在线客服插件
- [MBTI]16种风格 – 第三篇
- 旅行青蛙逆向破解的自我实践之旅
- 使用xmanager实现图形界面化
- VS2022配置OpenGL+GLAD
- 高效推进“少山红杏”地理标志保护 工程建设
- C#之CAD二次开发(5) CAD图形填充封装