zoukankan      html  css  js  c++  java
  • JQuery学习笔记

    1123

    JQuery2.x版本:production jQuery2.1.4(优化压缩后的版本,主要用于部署网站时使用)

                :Development JQuery2.1.4(未压缩版本,一般网站建设使用)

    map file for JQuery 2.1.4(一般用于增强调试,不需要下载)

    test01.html

    $表示当前使用的是jQuery对象来操纵网页,在<script>区域中,$(document).redayjQuery的页面加载事件,这事件是传统的window.load事件替代方法,当DOM载入就绪时,就会执行括号定义的代码。

    加载的事件说明:使用jQuery的选择器选择div元素,使用函数css更改div字体;

    为页面上的div元素添加click事件,当点击div时候会弹出消息框。

    HTML页面添加一个新的div元素,并关联click事件。

    121

    jQuery选择器:

    1.基本选择器:id选择器(如 $(“#divId”)) iddivId的元素

     标签名称选择器(如 $(“a”)) <a>标签

     CSS样式类选择器 (如 $(“.bgRed”)

    多个放在一起用”,”分隔开即可。

    扩展

    $("p") 选取 <p> 元素。

    $("p.intro") 选取所有 class="intro" 的 <p> 元素。

    $("p#demo") 选取所有 id="demo" 的 <p> 元素。

    125

    2.层次选择器:层次关系的选择规则

    ancestor descendant后代选择器(常用)

    $(".bgRed  div")选择CSS类为bgRed的元素所有<div>

    parent>child父类选择器

    $(".myList>li")选择myLis类的直接子节点<li>对象

    prev+next相邻选择器

    $("#hibiscus+img")选择idhibiscus后面同级别的img对象

    prevslibings 平级选择器

    $("#someDiv[title]")选择idsomeDiv的对象后面的所有带有title的元素

    3.过滤选择器:

    Event 函数

    绑定函数至

    $(document).ready(function)

    将函数绑定到文档的就绪事件(当文档完成加载时)

    $(selector).click(function)

    触发或将函数绑定到被选元素的点击事件

    $(selector).dblclick(function)

    触发或将函数绑定到被选元素的双击事件

    $(selector).focus(function)

    触发或将函数绑定到被选元素的获得焦点事件

    $(selector).mouseover(function)

    触发或将函数绑定到被选元素的鼠标悬停事件

    4.jQuery事件:

    jQuery  隐藏方法hide()show()展示方法 和toggle()切换方法

    1.只能运用在idclass

    2.可设置时延

    3.hide()show()为单独方法,toggle()为前两者的综合

    操作DOMDocument Object model(文档对象模型)

    126

    动态创建内容:$(html)动态创建一个DOM对象

    方法:append():在被选元素的结尾插入内容。

          prepend():在被选元素的开头插入内容。

      after():在被选元素之后插入内容。

      before():在被选元素之前插入内容。

    语法:$(“#idAppend”).click(

    function(){

    //追加内容

    $(“#idcontent”).append(“<b>使用append添加元素</b><br/>”);

    }     

      );

    $(“#idappendTo”).click(

    Function(){

    //追加内容,语法与append颠倒

    $(“<b>使用appendto添加元素</b></br>”).appendTo(“#idcontent”);

    }

    );

    动态删除节点:

    remove()方法:用来删除指定的DOM元素,它会将节点从DOM元素树中移除。但会返回一个指向DOM元素的引用,并不是真正的将jQuery引用的元素对象删除,可以继续通过这个引用来操作元素。

    empty()方法:不会删除节点,只是清空节点中的内容,DOM元素依然保持在DOM元素树中。

    128

    jQuery事件处理:

    页面初始化语法:

    $(document).ready(function(){

    //页面加载事件的代码

    });

    注意:为了能正确使用ready事件,必须确保<body>标签中没有定义onload事件,否则不会触发ready事件。而且onload事件必须要等到所有元素下载完成后才会执行,这会影响执行的效率。

    简介的语法:

    $().ready(function) 或者直接写成 $(function)

    切换事件:

    hover方法:元素在鼠标悬停与鼠标移除的事件中进行切换。

    hover方法的语法:hover([over],out)

    toggle方法:可以依次调用多个制定的函数,直到最后一个函数,接着重复对这些函数轮流进行调用。

    toggle语法:$(selector).toggle(function(),function(),function())

    jQuery插件

    https://plugins.jquery.com/  下载jquery插件。

    开发自己的插件。

    插件方法分为两类:

    1.对象级别的插件开发:指在jQuery的选择器对象上添加对象方法,值有存在一个jQuery对象的实例时,才能调用该插件。比如confirmOn插件,可以看作一个对象级别的插件。

    2.类级别的插件开发:指在类级别添加静态方法,并且可以将函数置于jQuery的命名空间中,比如经典的$.ajax()$.trim()等就是类级别插件。

    开发插件注意事项:

    $.fn.extend表示要创建一个对象级别的插件。

    1214日:

    关于ExtJS、JQuery UI和easy UI的选择问题

    首先根据你的需求,你需要这些框架具有你需要的UI组件ExtJSeasy ui都具备你需要用到的那几款ui组件,比如messageboxtreegrid。相比较jQuery UIui组件不够全面,比如grid,但是jquery有很多各种插件,包括grid,但它不在jQuery UI内。而Ext JSeasy ui最新版提供的GRID都有20种以上实现不同功能grid

    轻重比较,说ExtJS比较大,jquery较小,那只是浅显的理解。首先ExtJS是一个完整的Framework,是重量级别的,easy ui 是基于jquery库的一套UI组件库,是轻量级的,ExtJS是应用application级的,而jquerypage页面级的。当然application也是由page组成的,那就需要你自己去完成了,考虑你的需求,和使用框架的初衷,选择使用哪一种。同时ExtJs由于是重量级框架,完全面向对象风格,提供API非常完备也非常庞大,所以学习成本也想相对较大。

    兼容性ExtJS兼容IE全系列浏览器和其他非IE现代浏览器,jquery UI向来不太考虑ie低版本浏览器的兼容,从态度上的鄙视。easy UI是基于jquery的,jquery2.X以上的版本不再支持IE678,,已郑重声明,请看官方网站,easyUI最新版本1.3.3使用jQuery2.0,由于又很多HTML5特性,不再支持IE678,低版本由一些小部分的兼容不够好,请自己做技术选型的时候去测试,你要使用那个版本。在兼容问题上,他们都有瑕疵,看你的接收程度。

    使用许可license.  EXTJS  2.1以上版本,商用需要购买商业授权,jquery UI 使用MIT协议,开源。 jquery easyUI如果商用需遵循license commercial商业许可,也就是要购买使用权.

  • 相关阅读:
    吴恩达机器学习视频笔记——7
    吴恩达机器学习视频笔记——6
    吴恩达机器学习视频笔记——5
    吴恩达机器学习视频笔记——4
    Python入门
    HtmlAgilityPack组件
    AutoMapper扩展
    SqlServer自动化分区
    使用Topshelf快速搭建Windows服务
    elasticsearch-查询
  • 原文地址:https://www.cnblogs.com/tuanz/p/8709666.html
Copyright © 2011-2022 走看看