• java:JQueryReview


    Important:


    1.id选择器,class选择器,标签选择器
      $("#id"); $(".class"); $("标签");

    2.jQuery的定义:
      引入jQuery文件--->jquery-3.2.1.min.js
      <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

      第一种:
      $(function(){

      });

      第二种:
      $(document).ready(function(){

      });

    3.函数:
      1.val():获取表单中的元素的值(第一个元素的值)
      2.text():获取元素的文本信息
      3.addClass(""):给某个标签添加类样式
      4.removeClass(""):移除,某个标签的类样式
      5.css():如果只有一个参数,获取当前选中标签的样式值;如果有两个参数,给某个元素添加行内样式
      6.html(""):给某个标签添加文本信息,或者html代码,和js中的innerHTML实现效果一致
      7.append(""):拼接,给某个标签拼接文本信息,或者html代码
      8.attr():如果只有一个参数:或者某个标签的属性值;如果有两个参数,给某个标签赋值
      prop():和attr实现的效果一样

      attr()和prop的区别:

      attr():获取或赋值不是自带的属性值,自己定义的属性值
      $("a").attr("turn");
      prop():获取或赋值自带的属性值,原本就支持的属性值
      $("a").prop("href");
      <a href="http://www.baidu.com" target="_blank" name="a标签" turn="baidu">百度</a>
      9.trigger():会自动触发事件
      10. on():触发一个事件

    4.事件
      click, dblclick, blur, focus, submit
      keyup, keydown, mouseover鼠标悬浮
      <input type="button" value="测试" />
     

      $("input").click(function(){给input绑定click事件

      });
      $("input").on("click", function(){

      });

      $("ul").on("click","li",function(){

      });
      <ul>
      <li></li>
      </ul>

    5.选择器:
      +:选择出相邻元素(只能是一个)
      ~:选择出所有的兄弟元素(所有兄弟元素)
      $(":input"):选择出所有input(input,select,textarea)
      $("td").parent();选择出td的直接父级元素
      $("td").parent().parent();选择出td的直接父级元素的父级元素
      $("td").parents();选择出td的所有祖先元素

    6.效果:
      show():显示
      hide():隐藏
      toggle():既可以显示又可以隐藏
      slideUp():向上滑动直到隐藏
      slideDown():向下滑动,直接显示
      slideToggle():滑动

      ajax:(servlet学完)牵扯前后台数据进行交互

    7.form验证:

      第一种:
      // 第一步:封装验证函数(以username为例)
      function checkUsername() {
      // 第一步:获取input的值
      var userValue = $("#uname").val();
      // 第二步:定义正则表达式
      var reg = /^w$/;
      // 第三步:匹配正则
      if(reg.test(userValue)) {
      格式正确
      return true;
      } else {
      格式错误
      return false;
      }
      }

      // 第四步:定义一个boolean类型的标记
      var userFlag = true;

      // 第五步:绑定事件
      $(function(){
      // 第六步:选中input对象
      var ins = $("uname");
      // 第七步:给选中的对象绑定事件
      ins.blur(function(){
      // 调用封装的函数并接收
      userFlag = checkUsername();
      });

      // 第八步:给form表单绑定submit事件
      $("form").submit(function(){
      return userFlag;
      });
      });
      <form>
      <input type="text" name="username" id="uname" />
      </form>

  • 相关阅读:
    菜根谭#245
    菜根谭#244
    菜根谭#243
    菜根谭#242
    菜根谭#241
    菜根谭#240
    菜根谭#239
    菜根谭#238
    菜根谭#237
    [转载]Linux 内核list_head 学习(一)
  • 原文地址:https://www.cnblogs.com/kuangzhisen/p/7172392.html
Copyright © 2020-2023  润新知