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商业许可,也就是要购买使用权.

  • 相关阅读:
    CodeForces 706C Hard problem
    CodeForces 706A Beru-taxi
    CodeForces 706B Interesting drink
    CodeForces 706E Working routine
    CodeForces 706D Vasiliy's Multiset
    CodeForces 703B Mishka and trip
    CodeForces 703C Chris and Road
    POJ 1835 宇航员
    HDU 4907 Task schedule
    HDU 4911 Inversion
  • 原文地址:https://www.cnblogs.com/tuanz/p/8709666.html
Copyright © 2011-2022 走看看