JQuery

概念

封装javascript代码一个框架 

特点

  • 1.简化代码获得标签对象的代码
  • 2.屏蔽浏览器差异
  • 3.jquery插件自带UI效果
  • 4.支持批量操作

使用步骤:

1.引用jquery的插件代码jquery.js文件
2.在网页中使用script标签引入js文件
  <script ser = "外部jquery.js文件路径"></script>
3.使用
  $("选择器")
  作用:根据参数从网页中选择对应标签,返回
  基本选择器:
    $("#id值")
    $(".class的值")
    $("标签名")

常用方法

jquerydom对象.css("样式name","样式的值");
jquerydom对象.text();//获得标签体的内容
jquerydom对象.text("值");//设置标签体的内容
jquerydom对象.html();

 

注意:

1.JavaScript对象不能调用方法,只有jQuery对象才能
2.将js的dom对象转化成jq的dom对象:
  var jqdom = $(jsdom);
3.jquery的dom对象的方法返回值,依然是当前jquerydom对象,所有部分方法支持链式调用

选择器

1.基本选择器
  ID选择器:$("#id值")
  标签选择器:$("标签名")
  类选择器:$(".class值")

2.层级选择器(组合选择器)     $(selA selB)   后代选择器:选择selA标签内部所有后代中的selB标签     $(selA>selB)   子代选择器:选择selA的直接子代元素中的selB     $(selA+selB)   紧邻弟弟选择器         $(sel~sel后续弟弟) 后续所有弟弟选择器 3.过滤选择器   1.简单过滤     语法:$("选择器:过滤XX")     :first  $(sel:first) 获得第一个元素     :last        获得最后一个元素     :eq(i)      获得下标i的元素     :gt(i)     下标大于i的元素     :lt(i)       下标小于i的元素     :even       下标为偶数元素     :odd        下标为奇数元素     :not(selector) 获得所有元素,但是不包括select元素   2.内容过滤     :empty       保留标签内部为空的标签     :parent       保留标签内部有孩子的标签,没有孩子不保留     :contains(text) 保留包含text文本元素的标签     :has(内部后代标签selector) 保留内部包含selector对应标签的元素   3.可见性过滤     :visible     获得显示的标签     :hidden     获得隐藏的标签  4.属性过滤     [prop]     获得包含prop属性的标签对象     [prop=value]  获得包含prop属性并且属性值为value     :checked   获得选中的元素(复选框、单选钮)     :selected   获得被选中的元素

 

JQuery相关的DOM方法

访问属性:
 1.  text()                     获得标签体的普通文本
    text("")                    修改标签的普通文本
 2.  css("样式名字","样式的值")     设置标签的样式
    css("样式名字")               获得样式的值
 3.  html()                      获得标签体的内容(包含标签)
     html("内容可以包含标签" 4.  val()                       获得input标签的value属性值  (相当于jsp的   dom.value)
     val("文字")                  修改input标签的value值
 5.  prop("属性名",“属性值”)      设置标签的属性名对应的值
     prop("属性名")               获得标签的属性值

事件绑定:  
基于编程的事件绑定
语法:JQuery的dom对象.on("事件名称",事件函数);
实例:
  $("xx").on("click",function(event){});
  //event是事件对象
  //event.target   事件原标签     JavaScript类型的dom对象
  //this        事件源对象  JavaScript类型的dom对象
   网页加载后运行
   $(function(){
   //网页加载完毕之后调用 
   });

动态绑定事件 语法:$(
"xx").live("click",function(){   //动态为后添加的元素,只要符合选择器的条件,就会动态增加事件绑定 });

 

JQueryDOM操作方法

1.创建标签
    语法:$("标签全部内容标签+属性+文本"
    创建td标签:
    js    var tddom = document.createElement("td");
    jq    var jqdom = $("<td></td>");

2.添加标签
    语法:jqdom.append(子标签的jq的dom);
    js    document.getElementById("tr").appendChild(tddom);
    jq    $("#tr").append(jqdom);

3.删除本标签
    语法:jq的dom.remove();

4.清空内部
    语法:jq的dom.empty();
    js:    document.getElementById("tr").innerHTML ="";
    jq:    $("#tr").empty();
            $("#tr").html("");

5.找到弟弟标签
    语法:jqdom.next();
    js      nextSibling

6.找到哥哥标签
    语法:jqdom.prev();
    js    xxx.previouSibling

7.所有儿子标签
    语法:jqdom.children();
    js:    xx.childNodes

8.找到直接父标签
    语法:jqdom.parent(); 
    js    xxx.parentNode

其他函数

1.jquerydom对象有多个
  jqdom.size();//jquery对象中元素个数
2.获得i下标元素
  jqdom.get(i);//获得的是JavaScript类型对象
  jqdom.eq(i);//获得的是jquery类型对象
3.专门遍历jquery对象方法
  jqDom数组.each(function(i,e){
  //每次遍历运行
  //得到当前对象   e   (JavaScript类型)
  //得到当前遍历的下标  i
  });
4.数据绑定函数
  jqDom.data("key",value);//将value的值以key为名字,绑定在jqDom的标签上
  jqDom.data("key");//获得绑定在jqDom标签上名字为key的值
5.find("选择器")
  从jqDom标签内部(后代标签中)查找,符合参数选择器的标签返回
  语法:jqDOM.find("选择器");

 

jQuery动画

效果方法:
  显示消失
    show();          //将标签从隐藏状态下逐步变成显示状态
    show(毫秒);       //显示过程所花的时间
    hide();          //将标签消失
    hide(毫秒);      //消失过程所消耗的时间
  淡入淡出
    fadeIn(毫秒);    //淡入  (显示)
    fadeOut(毫秒);   //淡出   (消失)
  卷动效果
    slideUp        卷上消失
    slideDown       卷下显示
  自定义效果
    标签dom.animate(样式对象,毫秒值);  //使用一定的事件变化成指定的样式效果 
    样式对象:{"font-size":"100px","margin-left":"100px"}

 

JQuery插件

消息框toastr
  1.引入js文件
    jquery的js文件
    toastr的js文件
  2.引入相关的css文件
    <!--导入jquery资源文件-->
      <script src="js/jquery-3.5.1.min.js"></script>
    <!--导入toastr的js资源文件-->
      <script src="js/toastr.min.js"></script>
    <!--导入toastr的css资源文件-->
      <link rel="stylesheet" href="css/toastr.min.css"/>
API
  语法:toastr.info("消息文字");
  方法:info、success、warning、error

放大镜jqzoom  
1.导入资源   2.准备一个img的小图   3.给img外部套一个a标签,将大图的路径放在a标签中的href     <a href="大图">       <img src="小图">     </a>   4.使用放大镜插件,添加放大效果和事件绑定     $("a标签".jqzoom(); 日期插件  1.导入资源   2.给input输入框添加日历图标效果     <input class="Wdate">   3.绑定显示日历的事件函数     <input class="Wdate" onclick="WdatePicker()"> 表单验证插件 validate

 

JQuery

上一篇:4. JSON字符串是如何被解析的?JsonParser了解一下


下一篇:前端JS导出表格