zoukankan      html  css  js  c++  java
  • Jquery1.4.1 学习

    Jquery1.4.1

    在工作中也用过好几次jquery了,认识它还是好几年前的时候。但也就是用什么功能就打开api直接查,还没怎么总结过,呵呵,感觉工作中的总结还是有必要的,虽然工作中用过了,但是最后阶段的总结可能比工作中的收获更大、更多。

    下面就总结下自己常用的功能与体会:

    1. 我们要做的第一件事情就是一定要先分清楚jquery对象与dom对象,很简单:Jquery对象的方法在jquery手册中,dom对象的方法去dhtml手册中查找。很高兴在jQuery核心函数中提供了dom对像->jQuery对象的转换,是通过$(element)实现的,element可以是dom对象,也可以是一个jquery对象。
    2. $(document).ready(function(){})  ==  $(function(){})
      两者其实是一样的功能,提供页面加载完之后执行某项功能,并且它提供了链接的功能,这意味我们可以把多个函数连接在页面加载完之后执行,如下:
      $(function(){  
              alert('第一次运行');      
      });                       
      $(function(){         
              alert('第二次运行');      
      });
      可window.onload = function(){}, 只会执行最后一次的函数
    3. $()方法除了将dom对象转换为jquery对象外,还有几个重载版本
      1) 输入一个表达式查找对象 $(exp, [context]),在context中查找exp表达式代表的对象;
      通常我一般不会指定context,我想jquery给出这个参数的原因是指定它的话效率会好些吧!
      2) 可以直接把一个html字符串传进这个函数构建一个jquery对象
      3) 传入html字符串的同时,并且指定一些属性
         如:$(“<input>”, {type:””}).appenTo(“form”);
    4. jQuery对象访问
      通常jQuery方法获取的都是一个集合,用size()方法或者length属性都可以获取集合中的元素个数;each方法可以遍历集合,函数中this指针每次指向一个dom元素,每次还给函数传递一个代表元素在集合中位置的实参,并且我们可以用return false终止循环,return true使循环进行下一次循环;
    5. get(), get(index),index();
      get方法从集合中得到相应的dom对象,index方法提供2种方式:
      1)集合在前, 查找元素作为参数
      2)集合作为参数(seletor选择方式), 查找的元素在前
    6. 数据缓存的应用
      在一次项目应用中发现这个方法,感觉很实用,我们平时存储数据的时候要么是把数据存在隐藏域中,要么是赋给某个元素的属性,现在好了,我们一步就可以设置数据缓存,很简单,只需$().data(name);
    7. 选择器的应用
      jQuery应该是在选择器的基础上应用的,我们可以通过元素的id, name, tagname等查找元素;我们要做的只是给$()函数传递一个所谓的seletor, 哈哈,学习jQuery时候一部分工作是在学习怎么构建一个合理的seletor来查找我需要的元素;
      Seletor构建:
      基本:
      根据元素id, 类名, 元素名称定位;如果熟悉css的话很能理解jQuery这个seletor的规则,当我们定义css的时候也是这些规则
      #id对单个元素设定       .class(元素name)一类元素  tagname同一种元素设置;
      还好,我们可以通过逗号(,)来任意选择多个元素;:-D

      层级:
      1.我们常常需要获取某个元素下面的子元素(分所有, 直接2种)
        很简单:a b获取a下面所有b元素, a > b获取a下面直接子元素b
      2.我们还经常获取元素同一级别的兄弟元素,如:我们需要紧挨着某个元素的元素;或者某个元素后面的所有弟兄元素;
        同样简单:prev+next 获取紧挨着prev的next元素, prev~sibling获取prev后面所有      的同辈元素;

      集合内选择:
      在通过selector选择出一个大概的集合,我们可能需要其中的某些元素,那么我们还有进一步操作的selector;
      :first第一个, :last最后一个 :not去除某些元素 :eq, :gt, :lt等于,大于,小于某个索引的元素集合; 还可以直接获取索引号为奇数(:odd), 或者偶数(:event)得集合

      通过内容进一步筛选:
      我们还可以对dom对象的内容进行筛选,包括是否包含某些文本,是否包含某个元素,其下是否空;包含了我们需要的所有操作;
      :contains包含指定文本, :empty不含任何子内容
      :has包含某个元素           :parent 含有子内容

      可见性:
      通过:hidden 查找所有隐藏的元素, :visible查找显示的元素

      对属性进行过滤:
      我们可以匹配包含某属性的元素, 包含某属性且对值进行匹配, 并且可以加多个条件;
      [atr]包含某个属性, [atr=value]匹配有属性atr且值为val的元素;还有几个匹配方法,很类似正则表达式的匹配方式:
      [atr!=value] 不等于 [atr^=val]属性值以val开头, [atr$=val]属性值以val结尾
      [atr*=val]属性值包含val值;

      表单元素的匹配:
      :text  :radio :checkbox等等….
      :enable, :disabled, :checked(radio, checkbox选中), :selected;(select选中)
    1. 元素属性的操作
        可以获取一个属性值attr(name), 设置一个属性值attr(key, value), 设置一组属性值:attr(properties);
      css类:
      addClass(class)添加css, removeClass移除css
    2. 文本,值,html代码的获取
      文本和html代码没什么可说的,值的获取要说下
      .val()可以获取select的选择的值,如果是多选则返回一个数组;
      val(array)可以为check,select,radio赋值, 设置选择项,传递一个数组
    3. 方法:
      数组的过滤:    $.grep(array, callback),
      $.grep([0,1,2], function(n, i){return n > 0});很好哦

      dom数组对象转换为jquery数组:
      $.makeArray($(“div”));

      jquery数组转换为dom数组:
      $.toArray();

      确定在数组中的位置:
      $.inArray(value, array); 确定value在array中的位置;

      $.unique(array)去除数组中重复的元素;

      $.map(array, callback);把数组array转换为另一个数组
      $.map([0,1,2], function(n){return n + 4});
    4. 字符串操作:
      $.trim(str)去除前后的字符串
  • 相关阅读:
    mysql中delimiter
    error: unpacking of archive failed on file /usr/sbin/zabbix_agent;592e5bc3: cpio: open
    CefSharp中文帮助文档
    ASP.NET Aries 开发框架
    简洁的富文本编辑器
    asp.net core 获取appsettings.json里的配置
    在asp.net core中使用NLog
    临时禁用Resharper
    visual studio 无添加视图 选项
    visual studio(vs)初始化
  • 原文地址:https://www.cnblogs.com/lyroge/p/1799034.html
Copyright © 2011-2022 走看看