jQuery初步

Posted 2020-09-25 终难遇

jQuery
 js类库
 把常用对象或者方法封装起来 让我们写代码效率更高
 1.jQuery
  DO MORE,WRITE LESS
 2.extjs
 jQuery:
  jquery的引入:
   通过script标签的src属性引入

  入门
   获取jquery对象
    $(选择器) ==jQuery(选择器)
   获取值
    jquery.val();
  jquery对象和dom对象的转换
   dom转jquery对象
    var jquery对象=$(dom);
   jquery对象转dom对象
    方式一
     var dom=jquery对象[index]
    方式二
     var dom=jquery对象.get(index)
  页面加载成功事件
   js原生
    onload=function(){
     
    }
   jquery:
    方式一
     $(document).ready(function(){});
 
    方式二
     $(function(){
      js代码
     })
  事件总结
   掌握
    submit
    click
    focus
    blur
   
   事件绑定
    js原生
     方式一
      通过标签的事件属性绑定
     方式二
      派发机制
       元素.事件名=function(){}

    jquery:
     jquery对象.事件(function(){});
     jquery对象.click(function(){})
  效果:
   基础 ☆
   show([毫秒值]);显示
   hide([毫秒值]);隐藏
   toggle([毫秒值]);切换

   了解:
    滑入滑出
     slideUp([毫秒值]);滑出
     slideDown([毫秒值]):滑入
     slideToggle([毫秒值]):切换
    淡入淡出
     fadeIn([毫秒值]);淡入
     fadeOut([毫秒值]):淡出
     fadeTo([毫秒值]):
     fadeToggle([毫秒值]);切换
     jquery的选择器
 基础选择器:必须掌握
  id选择器: #id
  类选择器: .class
  元素选择器 :xxx
  所有选择器 : *
  分组选择器: 选择1,选择器2
 层次选择器:必须掌握
  a b:a的b后代
  a>b:a的b孩子
  a+b:a的b的大弟弟
  a~b:a的b的所有弟弟
 过滤选择器:
  特点:
   前面都跟上了:
  :first  第一个元素
  :last 最后一个

  :eq(index) 你指定的索引的元素
  :lt(index)  小于
  :gt(index) 大于

  :even 偶数
  :odd 奇数
 内容过滤选择器
  has(选择器):
 可见性过滤选择器:
  :hidden 针对隐藏域 display=none
  :visible 可见的
 属性选择
  [zz=‘z‘]:选中指定的属性为指定的值
  [zz]:选中只要含有zz属性
 表单选择器:
  :input
   选中form的所有子元素
   input select textarea button
   
  input
  css操作和属性操作
 css
  获取或设置元素样式
   css("属性名","值"):设置css样式
   css("属性名");获取指定属性名的值
   css({
    "属性名1":"值1",
    "属性名2":"值2"
   }); json 设置多个样式
  位置
   offset
    left:
    top
 
  宽度
  高度
 属性操作:
  <xx  属性名="属性值"/>
  获取设置属性操作
   attr("属性名","值");设置属性
   attr("属性名");//获取
   attr({
    "属性名1":"值1",
    "属性名2":"值2"
   })//设置多个属性
   removeAttr("属性");删除
  添加一个样式class属性
   attr("class","class名字1");
   attr("class","class名字2");
   addClass("class名字");//添加
   removeClass("class名字");//删除
   
遍历:
 js原生:
  for(var i=0;i<?;i++){
  }
 jquery:
  方式一:
   想要遍历的jquery对象.each(function(index,dom){
    
   
   });
  方式二:
   $.each(想要遍历的jquery对象,function(index,dom){
 
   });
  操作元素的值或者标签体
   xxx():获取操作
   xxx("值"):设置
   获取 或设置值
    val();
   获取或设置标签体
    html()
   获取或设置标签体
    text()
  插入操作:
   内部插入:
    append()  a.append(b) 把b添加的a的内部的后面
    prepend() :a.prepend(b) 把b添加到a的内容的前面

    appendTo() a.appendTo(b) 把a添加到b的内部的后面
    prependTo() :a.prependTo(b) 把a添加到b的内部的前面
   外部插入:
    after(): a.after(c) 在a的后面添加c
    before():a.before(c) 在a的前面添加c

    insertAfter();a.insertAfter(c) 把a添加到c的后面
    insertBefore():a.insertBefore(c) 把a添加到c的前面
   清除操作:
    empty():清除
    remove();移除 自杀
    select下拉选择框
 属性:
   multiple:值multiple 规定可以多选
   size:控制显示的项目的数目

表单对象属性过滤选择器
 :enabled:可用的
 :disabled:不可用
 :checked:(针对的是radio checkbox)
 :selected:下拉选择框
 validator插件
 基于jquery编写
 
使用:
 1.首先必须引入jquery库
 2.引入validator的库
 3.在页面加载成功之后指定你想要验证的表单
  $(function(){
   $("选择器").validate();
  })
 4.validate方法的使用
  $("选择器").validate({
   rules:{},
   messages:{}
  });
 5.常见的规则
  required:必须填写 true|false
  number:必须填写数值类型 true|false
  min:最小值 5
  max:最大值
  range: 区间 [min,max]
  maxlength:|minlength:rangelength
  equalTo:"选择器"
  digits:整数
  email:email
 6.规则的书写格式:
  $("选择器").validate({
   rules:{
   
    //书写格式
   
   },
   messages:{}
  });
  书写格式:
   方式一:
    想要校验的字段的name属性名:"规则名"
   方式二:
    想要校验的字段的name属性名:{
     "规则1":值,
     "规则2":值
    }
 7.自定义错误提示信息
  书写格式:
   方式一:
    想要校验的字段的name属性名:"提示信息"
   方式二:
    想要校验的字段的name属性名:{
     "规则1":"提示信息1",
     "规则2":"提示信息2"
    }
 8.validate的自定义规则
  $.validator.addMethod(name,fn,message);
  name:规则名
  fn:
   function(value,element,params){
    value:用户输入的值
    element:元素本身
    params:参数
    

   }
   //必须有返回值 boolean
  message:默认的提示信息