Jquery介绍

　　Jquery是一个快速,简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或者是JavaScirpt框架),Jquery设计的宗旨是:write less,Do More 即倡导写更少的代码,做更多的事情.

它封装饿了JavaScirpt常用的功能代码,提供了一种渐变的javascript设计模式,优化HTML文档操作,事件处理,动画设计和AJAX交互,Jquery实现了跨越浏览器,开发者不需要关注浏览器的兼容性了,但是从2.0开始,不再兼容IE6.7.8

Jquery的基本使用方式

　　页面中引入Jquery文件

  1. <script src="js/jquery-3.3.1.min.js" type="text/javascript">
  2. </script>

首先调用jQuery中的核心函数,函数的名就是jquery,在此函数的参数中传递匿名函数,这个匿名函数将在页面加载完成后执行,同时函数名jquery可以简写为$.

同时$也是jquery中的选择器,可以查找页面中的标签元素.

  1. <sctipt type="text/javascript">
  2.  jQuery(function(){
  3.    alert("jquery!");
  4.  });
  5.  $(function(){
  6.    alert("jquery!!");
  7.  })
  8. </sctipt>

DOM对象转成JQuery对象

Dom对象和jquery对象相互是不通用的,也就是说document.gtxxx()获取到的元素,属于DOM对象,只能调用Dom对象中提供的方法和属性.而使用$("xx")获取到的元素属于JQuery对象,只能调用Jquery对象的方法.

  1. <script type="text/javascript">
  2.  function fn() {
  3.    var name = document.getElementById("name");
  4.    //dom对象属性
  5.    alert(name.value);
  6.    //jQuery对象函数
  7.    var $name = $("#name");
  8.    alert($name.val());
  9.  }
  10. </script>

将DOM对象转成jquery对象,使用$包裹即可.

  1. var $jquery = $(dom对象)；

jquery对象转成DOM对象

jquery对象的本质是数组,而数组中的每个元素是DOM对象,将jquery对象转成DOM对象,使用数组的素银,取出数组中的元素即可.

  1. var dom = $jquery[0];

jquery选择器

jquery的选择器与css的选择器的作用是完全一样的,目的是精确快速的定位到某个html元素上并获取该元素对象,进而使用jquery的方法对该html进行操作.

jquery常用的选择器有如下几个:基本选择器,基本过滤选择器.属性选择器,表单属性选择器.层级选择器等.

基本选择器

标签选择器(元素选择器):$("html标签名")

id选择器;$("#id的属性值")

类选择器:$(".class的属性值")

  1. <script type="text/javascript">
  2. //<input type="button" value="改变 id 为 one 的元素的背景色为 红色"
  3. id="b1"/>
  4.  //id选择器找到id值为b1的按钮,绑定点击事件
  5.  $("#b1").click(function(){
  6. //id选择器为one的标签,jquery的css方法设置样式
  7. $("#one").css("background-color","#FF0000");
  8. });
  9. // <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色
  10. 为 红色" id="b2"/>
  11.  //id选择器b2的按钮,绑定点击事件
  12.  $("#b2").click(function(){
  13.  //获取所有div标签,使用标签选择器
  14.  $("div").css("background-color","#FF0000");
  15. });
  16.  //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色
  17. 为 红色" id="b3"/>
  18.  $("#b3").click(function(){
  19. //class选择器,选择class为mini
  20. $(".mini").css("background-color","#FF0000");
  21. });
  22. // <input type="button" value=" 改变所有的<span>元素和 id 为 two
  23. 的元素的背景色为红色" id="b4"/>
  24. $("#b4").click(function(){
  25.  //获取标签span,和id值是two的元素
  26.  //多选择器逗号分割
  27.  $("span,#two").css("background-color","#FF0000");
  28. });
  29. </script>

层级选择器

获得A元素内部的所有的B元素：$("A B ") --- 后代选择器
获得A元素下面的所有B子元素：$("A > B")
获得A元素同级下一个B元素：$("A + B")
获得A元素同级所有后面B元素：$("A ~ B")

  1. <script type="text/javascript">
  2.  //<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为
  3. 红色" id="b1"/>
  4.  $("#b1").click(function(){
  5.  //选择所有body的后代div标签,层级选择器
  6.  $("body div").css("background-color","#FF0000");
  7.  })
  8.  //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为
  9. 红色" id="b2"/>
  10. $("#b2").click(function(){
  11.  //选择body的子标签div
  12.  $("body>div").css("background-color","#FF0000");
  13. });
  14. //<input type="button" value=" 改变 id 为 one 的下一个 <div> 的
  15. 背景色为 红色" id="b3"/>
  16. $("#b3").click(function(){
  17.  //id为one的下一个div
  18.  $("#one+div").css("background-color","#FF0000");
  19. });
  20. //<input type="button" value=" 改变id为two 的元素后面的所有兄弟<div>的元素的
  21. 背景色为 红色" id="b4"/>
  22. $("#b4").click(function(){
  23.  //id为two后的所有兄弟div
  24.  $("#two~div").css("background-color","#FF0000");
  25. });
  26. //<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元
  27. 素的背景色为红色" id="b5"/>
  28. $("#b5").click(function(){
  29. //siblings方法,选择所有的同级标签
  30. //$("#two").siblings().css("background-color","#FF0000");
  31. //siblings方法继续选择
  32. $("#two").siblings("div").css("background-
  33. color","#FF0000");
  34. });
  35. </script>

属性选择器

获得有属性名的元素：$("A[属性名]")
获得属性名 等于 值 元素：$("A[属性名=值]")
复合属性选择器，多个属性同时过滤：$("A[属性名!=值][属性名!=值][属性名!=值]")

  1. <script type="text/javascript">
  2. //<input type="button" value=" 含有属性title 的div元素背景色为红
  3. 色" id="b1"/>
  4. $("#b1").click(function(){
  5. //属性选择器,选择带有title
  6. $("div[title]").css("background-color","#FF0000");
  7. });
  8. // <input type="button" value=" 属性title值等于test的div元素背景色
  9. 为红色" id="b2"/>
  10. $("#b2").click(function(){
  11.  //获取属性值是test的元素
  12.  $("div[title='test']").css("background-
  13. color","#FF0000");
  14. });
  15. // <input type="button" value="选取有属性id的div元素，然后在结果中
  16. 选取属性title值是“tees”的 div 元素背景色为红色" id="b3"/>
  17. $("#b3").click(function(){
  18. //有id属性，并且title属性值是test
  19. $("div[id][title='tees']").css("background-
  20. color","#FF0000");
  21. });
  22. </script>

基本过滤选择器

不包括指定内容的元素例如： :not(selecter)
偶数，从 0 开始计数： :even
奇数，从 0 开始技术： :odd
指定第几个： :eq(index)
大于n个： :gt(index)
小于n个： :lt(index)
获得标题 （ <h1> /<h2> .... ） :header --- 固定写法
获得动画的 :animated ---固定写法 正在执行的动画

  1. <script type="text/javascript">
  2. // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为
  3. 红色" id="b1"/>
  4.  $("#b1").click(function(){
  5.  $("div:not(.one)").css("background-color","#FF0000");
  6. });
  7. // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"
  8. id="b2"/>
  9.  $("#b2").click(function(){
  10.  $("div:even").css("background-color","#FF0000");
  11. });
  12. // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"
  13. id="b3"/>
  14.  $("#b3").click(function(){
  15.  $("div:odd").css("background-color","#FF0000");
  16. });
  17. // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红
  18. 色" id="b4"/>
  19.  $("#b4").click(function(){
  20.  $("div:gt(3)").css("background-color","#FF0000");
  21. });
  22. // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红
  23. 色" id="b5"/>
  24.  $("#b5").click(function(){
  25.  $("div:eq(3)").css("background-color","#FF0000");
  26. });
  27. // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红
  28. 色" id="b6"/>
  29.  $("#b6").click(function(){
  30.  $("div:lt(3)").css("background-color","#FF0000");
  31. });
  32. // <input type="button" value=" 改变所有的标题元素的背景色为 红色"
  33. id="b7"/>
  34.  $("#b7").click(function(){
  35.  $(":header").css("background-color","#FF0000");
  36. });
  37. // <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红
  38. 色" id="b8"/>
  39. $("#b8").click(function(){
  40.  $(":animated").css("background-color","#FF0000");
  41. });
  42.  function moveFn(){
  43.  //div向上滑动, slideUp方法,slideToggle方法
  44. $("#mover").slideToggle("slow",function(){
  45. moveFn();
  46. });
  47. }
  48.  moveFn();
  49. </script>

表单属性选择器

可用： :enabled
不可用： :disabled
选中（单选radio ，多选checkbox）： :checked
选择（下列列表 <select> ）： :selected

  1. <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用
  2. <input> 元素的值"  id="b1"/>
  3.  $("#b1").click(function(){
  4.  //获取多个input标签属性值是 enabled, type属性值是text 返回数组
  5.  var $inputs = $("input[type='text']:enabled");
  6.  for(var i=0;i<$inputs.length;i++){
  7. //把数组中的DOM对象变成Jquery对象,调用方法val()
  8. alert($($inputs[i]).val());
  9. }
  10. });
  11. // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可
  12. 用 <input> 元素的值" id="b2"/>
  13.  $("#b2").click(function(){
  14.  //获取多个input标签属性值是disabled,返回数组
  15.  var $inputs = $("input[type='text']:disabled");
  16.  for(var i=0;i<$inputs.length;i++){
  17. //把数组中的DOM对象变成Jquery对象,调用方法val()
  18. alert($($inputs[i]).val());
  19. }
  20. });
  21. // <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选
  22. 中的个数" id="b3"/>
  23. $("#b3").click(function(){
  24.  var $inputs = $("input[type='checkbox']:checked");
  25.  alert($inputs.length);
  26. });
  27. // <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选
  28. 中的内容" id="b4"/>
  29. /*
  30. * html()==DOM对象的innerHTML
  31. * text()==DOM对象的innerText
  32. */
  33. $("#b4").click(function(){
  34.  var $inputs = $("option:selected");
  35.  for(var i=0;i<$inputs.length;i++){
  36.  alert($($inputs[i]).text());
  37.  }
  38. });

jQuery的DOM方法操作

文本/值操作：html(),text(),val()

html() === innerHTML
text() === innerText
val() === value
html text val 传递参数代表赋值 空参代表获取

  1. <script type="text/javascript">
  2. //页面加载完成
  3. $(function(){
  4. //获取张三
  5. alert($("#myinput").val());
  6. //获取标题文本
  7. alert($("#mydiv").text());
  8. //获取mydiv的后的所有内容
  9. alert($("#mydiv").html());
  10. });
  11. </script>

属性操作：attr(),prop()

attr() === setAttribute和getAttribute
attr(属性名称); --- 获取属性的值
attr(属性名称,属性值) --- 设置的属性的值

  1. <script type="text/javascript">
  2. //获取北京节点的name属性值
  3.     alert($("#bj").attr("name"));
  4. //设置北京节点的name属性的值为dabeijing
  5. $("#bj").attr("name","dabeijing");
  6. //新增北京节点的discription属性 属性值是didu
  7. $("#bj").attr("discription","didu");
  8. //删除北京节点的name属性并检验name属性是否存在
  9. $("#bj").removeAttr("name");
  10. //获得hobby的的选中状态
  11. alert($("#hobby").prop("checked"));
  12. /*
  13. * JQuery1.6版本后的方法prop
  14. * checked,selected使用prop 单属性
  15. * 其他属性使用attr
  16. */
  17. </script>

css操作：addClass(),removeClass(),css()
addClass（值） === attr(“class”,值)
removeClass（class值） === removeAttr（“class值”）
css() ==== js对象.style.属性
css(css属性名) 获取css属性名称对应值
css(css属性名,值) 设置css样式

  1. <script type="text/javascript">
  2. //<input type="button" value="采用属性增加样式(改变id=one的样式)"
  3. id="b1"/>
  4. $("#b1").click(function(){
  5.  $("#one").attr("class","second");
  6. });
  7. //<input type="button" value=" addClass" id="b2"/>
  8.  $("#b2").click(function(){
  9.  $("#one").addClass("second");
  10. });

//<input type="button" value="removeClass" id="b3"/>
 $("#b3").click(function(){
 $("#one").removeClass();
});
//<input type="button" value=" 切换样式" id="b4"/>
 $("#b4").click(function(){
 //toggleClass切换样式方法,如果没有样式,设置样式second,如果存在
second样式,则还原
 $("#one").toggleClass("second");
});
//<input type="button" value=" 通过css()获得id为one背景颜色"
id="b5"/>
 $("#b5").click(function(){
 alert($("#one").css("background-color"));
});
// <input type="button" value=" 通过css()设置id为one背景颜色为绿
色" id="b6"/>
$("#b6").click(function(){
 $("#one").css("background-color","#00FF00");
});
</script>

  1.  

元素创建/内部插入
$( "<li></li>" )创建标签li
append() 追加子节点
prepend() 追加子节点，在最前
remove() 移除节点
empty() 清空所有子节点

  1. <script type="text/javascript">
  2. /**将反恐放置到city的后面*/
  3. $("#city").append($("#fk"));
  4. /**将反恐放置到city的最前面*/
  5. $("#city").prepend($("#fk"));
  6. //删除<li id="bj" name="beijing">北京</li>
  7.   $("#bj").remove();
  8.   //删除所有的子节点  清空元素中的所有后代节点(不包含属性节点).
  9.   $("#city").empty();
  10.   //测试(id='city')并没有被删除
  11. </script>

jquery的效果 

元素的显示与隐藏
show(speed ,fn) 显示参数 speed，显示速度，单位：毫秒。固定字符串：slow, normal, or
fast参数 fn，显示成功之后回调函数。
hide() 隐藏
toggle() 切换
元素的滑动显示与隐藏
slideDown() 显示，高度变大。
slideUp() 隐藏，高度变小。
slideToggle() 切换
元素的淡入淡出的显示与隐藏
fadeIn() 显示
fadeOut() 隐藏
fadeToggle() 切换
表格隔行变色案例

  1. <script type="text/javascript">
  2. $(function(){
  3. $("tr:gt(1):even").css("background-color","#CC66FF");
  4. $("tr:gt(1):odd").css("background-color","#CC6600");
  5. });
  6. </script>

全选和全不选案例

  1. <script type="text/javascript">
  2. function selectAll(obj){
  3. $("input[class='itemSelect']").prop("checked",$(obj).prop("checked"));
  4. }
  5. </script>

定时广告案例

  1. <script type="text/javascript">
  2. $(function(){
  3. setTimeout(function(){
  4. //$("#adDiv").css("display","block");
  5. $("#adDiv").slideDown(3000);
  6. },3000);
  7. setTimeout(function(){
  8. //$("#adDiv").css("display","none");
  9. $("#adDiv").slideUp(3000);
  10. },8000);
  11. });
  12. </script>

Jquery的入门(一)的更多相关文章

  1. JQuery Mobile入门——设置后退按钮文字(转)

    http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  h ...

  2. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  3. 极客技术专题【007期】：jQuery初学者入门 - jQuery Event

    日期:2013-8-19  来源:GBin1.com 技术专题介绍 专题:jQuery初学者入门[第三讲:jQuery Event] 分享人:极客标签技术编辑 -Lana (请站内关注分享人) 授课时 ...

  4. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  5. jQuery的入门与简介

    jQuery的入门与简介<思维导图>   <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...

  6. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  7. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  8. 第一百九十一节，jQuery EasyUI 入门

    jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...

  9. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  10. jQuery简单入门

    jQuery是什么 John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作为什么要使用jQuery (1)write less do ...

随机推荐

  1. 【视频开发】EasyIPCamera通过RTSP协议接入海康、大华等摄像机，摒弃私有SDK接入弊端

    近期工作中需要开发一套视频监控系统,实现WEB端.手机APP端预览局域网内的道路监控摄像机,我负责一些后台服务的开发工作. 由于之前项目中的程序都是采用私有协议.各摄像机厂商的SDK进行视频监控系统开 ...

  2. 解决ViewPager与百度地图滑动冲突

    一.问题描述 ViewPager中嵌套百度地图的时候会出现百度地图滑动冲突. 二.期望结果: 滑动地图的时候只有地图滑动,滑动其他区域可以切换viewpager. 三.解决方法 自定义viewpage ...

  3. ProtoStuff无法反序列化Deprecated注解成员问题记录

    在开发过程中,遇到一个鬼畜的问题,在DO的某个成员上添加@Deprecated注解之后,通过ProtoStuff反序列化得到的DO中,这个成员一直为null:花了不少时间才定位这个问题,特此记录一下 ...

  4. windows下大数据开发环境搭建（1）——Java环境搭建

    一.Java 8下载 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载之后 ...

  5. 备份数据库中的某个表的数据报错Statement violates GTID consistency

    1.错误描述 执行CREATE TABLE tig_pairs_20190521 AS SELECT *FROM tig_pairs报错: 1 queries executed, 0 success, ...

  6. POJ 1661 Help Jimmy（C）动态规划

    没刷过 POJ,这题是论坛有人问的,我才看看. 我发现 POJ 注册很奇怪,账号总是登不上去,弄的我还注册两个.Emmm 首次体验很差,还好我不在 POJ 刷题. 题目链接:POJ 1661 Help ...

  7. Linux下使用ip netns命令进行网口的隔离和配置ip地址

    1. 添加隔离标记符: ip netns add fd 2. 将指定网卡放入隔离中: ip link set eth1 netns fd 3. 在隔离环境下执行命令: ip netns exec fd ...

  8. [高清] JavaEE开发的颠覆者 Spring Boot实战 完整版

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  9. Non-Maximum Suppression（非极大值抑制）

    定义与介绍(NMS 以及soft-NMS也有简单的介绍): https://www.cnblogs.com/makefile/p/nms.html IoU的介绍这篇写的不错: https://oldp ...

  10. C#特性的学习（一）

    1.预定定义特性之一:AttributeUsage AttributeUsage有三个属性: 第一个属性:ValidOn 规定特性可被放置的语言元素,默认是AttributeTargets.All.