• jQuery


    今天学习了jQuery,内容非常多。因为有详尽的参考手册,所以就不一一列举所有内容了。只挑重要的,常用的,整理一下。 

    (为了方便,以下jQuery全部简写成jq

    1 jq的安装

    1.1网页中添加 jQuery

      1)从 jquery.com 下载 jQuery

      2)从 CDN 中载入jQuery

        使用 BootCDN、百度、又拍云、新浪、谷歌或微软的 jQuery,有一个很大的优势:
        许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。

    1.2引用位置

      要把jq库文件放在最前面,然后才能使用jq的代码

    2 jq和原生js的区别

      主要体现在dom操作

      基础语法是相同的,jq只是简化了js

    文档就绪事件

      相当于window.onload

      $(document).ready(function(){ // 开始写 jQuery 代码... });

      $(function(){ // 开始写 jQuery 代码... }); 

      第二种代码简单,比较常用

    4 dom操作(和原生js作对比说明) 

    4.1返回对象的区别:

      Js返回的是js对象

      Jquery返回的是jquery对象

      实例说明:  

    $(function(){
    	var obj_js=document.getElementById('obj');
    	console.log(obj_js);
    	
    	var obj_jq=$('#obj');
    	console.log(obj_jq);	
    });
    

    因为两者对象不同,也决定了其属性、方法,等一系列的都不同。所以要区别好,分清这一点,接下来的操作就容易多了。

    4.2 Js对象和jquery对象转换

      对于已经是一个 DOM 对象,只需要用 $() DOM对象包装起来,就可以获得一个 jQuery 对象了,使用[index].get(index)可以转为DOM对象 

    例1:

    js对象转化成jq对象: $(js)

    jq对象转化成js对象: $(‘#dd’)[0] 或 $(‘#dd’).get(0)

    例2:

    $(‘div’).each(function(){

      this.innerHTML  //可以用,因为thisjs对象

      this.html();  //不可以用,因为html()jq的方法,而thisjs对象

      $(this).html();  //可以用,因为$(this)jq对象

    });

    4.3 选择器

    jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

    jQuery 中所有选择器都以美元符号开头:$()

    jQuery找到原素的方式, 比原生js更方便,更强大。

    1)元素选择器

    2)#id 选择器 

    3).class 选择器

    4.4 操作原素

    4.5 其他常用(查看手册即可)

    1)each()

     相当于for循环 

    2)prop()attr()的区别 

      http://www.365mini.com/page/jquery-attr-vs-prop.htm 

     3)offset()

      在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。 

    4)eq()

      返回带有被选元素的指定索引号的元素,返回的是一个jquery对象 

    5)文档处理

    6)筛选

    7)事件

    8)效果

    9)回调函数

  • 相关阅读:
    JasperReport 表单发布的问题
    再谈需要分析三(面向对象方法的需求分析过程)续
    ASP.NET 4.0 Session过期 一个奇怪的问题
    再谈需要分析三(面向对象方法的需求分析过程)
    Silverlight 4.0 Accordion 解决ScrollViewer 的问题
    批处理操作压缩文件
    为前端开发人员制作chrome扩展一枚jsbeautifier
    2012年年终总结:这一年,我玩大了
    .net 日志
    快速切换内外网IP
  • 原文地址:https://www.cnblogs.com/hzhjxx/p/9760912.html
Copyright © 2020-2023  润新知