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的熟悉 ...

jQuery学习心得总结