• jquery 学习 (二)


    1)jquery对象和dom对象区别及相互转换

    2)jquery和其他库冲突解决

    3)css选择器和jquery选择器

    3.1)基本选择器(id选择器、类选择器、元素选择器、*选择器、多个选择器以逗号分隔的集合选择器)

    3.2)层次选择器(后代元素、子元素)。eg.  $("ul li") 和 $("ul > li"),一个是所有后元素,一个是直接子元素。 $("ul").next("div") 下一个同辈 ,$("ul").nextall("div") 后面的所有同辈,slibings()所有同辈,不管前还是后。

    3.3)过滤选择器  

    3.3.1)基本过滤选择器 :first  :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated :focus 

    3.3.2)内容过滤选择器 :contains(text) :empty :has(selector) :parent

    3.3.3)可见性过滤选择器 :hidden :vidible

    3.3.4)属性过滤选择器

    3.3.5)子元素过滤选择器

    3.3.6)表达对象属性过滤选择器

    3.4)表单选择器

    选择器插件:

    1)moreselectors for query

    2)basic path

    4)jquery中的dom操作

    4.1)查找dom节点(使用选择器)

    4.2)查找属性节点  var $para = $("p");var p_txt = $para.attr("title“)获取p节点的title属性

    4.3)创建节点

    var $li_1 = $("<li></li>");

    var $li_1 = $("<li></li>");

    $("ul").append($li_1);

    $("ul").append($li_2);

    4.4)插入节点

    append,appendto,prepend,prependto,after,insert after,befor,insert before

    4.5)移动节点

    4.6)删除节点  remove、detatch、empty

    4.6)复制节点 clone

    4.7)替换节点

    4.8)包裹节点 wrap  wrapall

    4.9)属性操作 attr()获取属性,removeattr()删除属性

    4.10)样式操作 $("p").attr("class","high") 设置p元素的class为high

    4.11)追加样式(addclass)、移除样式(removeclass)、切换样式(toggle)、判断是否含有某个样式 .hasclass()

    4.12)设置和获取html、文本和值html()方法获取html内容 text()方法获取文本内容 val()设置和获取元素的值,且能够使select、checkbox、radio选中

    4.13)遍历节点  childeren(),next()pref()sibings()closet()parent()

    4.14)css dom操作 读取和设置style对象的各种属性。 元素定位:offset() position()scrolltop()scrollleft()

    5)jquery中事件和动画

    $(document).ready(),dom就绪时就执行

    $(window).load(function(){})。如果绑定在window或者元素上,则等待内容加载完毕才触发

    5.1)事件绑定

    bind():第一个参数事件类型、第二个参数可选,作为event.data属性值传递给事件对象的额外数据对象 第三个参数则用来绑定处理函数

    $(function()){

    $("#panel h5.head").bind("click",function(){

    $(this).next().show();

    }

    }

    点击“标题”连接,内容就展开

    $(function()){

    $("#panel h5.head").bind("click",function(){

    var $content = $(this).next();

    if ($content.is(":vidible")){

    $content.hide();

    }else{

    $(this).next().show();

    }

    }

    }


    $(function()){

    $("#panel h5.head").bind("mouseover",function(){

    $(this).next().show();

    }).bind("mouseout",function(){

    $(this).next().hide();

    }

    }

    可以简写绑定事件

    $(function()){

    $("#panel h5.head").mouseover(function(){

    $(this).next().show();

    }).mouseout(function(){

    $(this).next().hide();

    }

    }

    5.2)合成事件

    hover() 当光标移动到元素上时,会触发指定的第一个函数(enter),移出时触发指定的第二个函数(leave)

    toggle()用于模拟鼠标连续单击事件,第一个单击触发第一个函数,第二次触发第二个,如果有更多函数,则依次触发。也可以用来控制元素的可见状态

    5.3)事件冒泡

    按照dom的层级

    对事件的作用范围进行控制

    5.4)事件对象(event),停止事件冒泡(stoppropagation)

    $('#content').bind("click",function(event)){

    var txt = $('#msg').html()+"aaa";

    $('#msg').html(txt);

    event.stoppropagation();

    }

    5.5)阻止默认行为

    网页中的元素都有自己的默认行为,例如单击链接后会跳转,单击提交按钮会表单提交。有时候需要阻止元素的默认行为。

    $(funciton(){

    $("#sub").bind("click",function(event){

    var username = $("#username").val();

    if (username==""){

    $("#msg").html("<p>用户名不能为空</p>");

    event.preventDefault();

    }

    }

    }

    想同时停止冒泡和阻止默认行为,可以在做了一个之后,return false

    5.6)事件对象的属性

    event.type获取事件类型

    $("a").click(function(event){

    alter(event.type);

    return false;//阻止链接跳转

    }

    event.target 获取到触发事件的元素

    event.pageX event.pageY 获取光标相对于页面的x坐标和y坐标

    event.which 获取鼠标单击事件中的左、中、右键

    5.7)移除事件 unbound

    5.8)模拟操作

    $("#btn").trigger("click")

    触发自定义事件

    $("#btn").bind("myclick",function(){

    ..

    }

    $("#btn").trigger("myclick"); 


    传递数据 

    $("#btn").bind("myclick",function(event,message1,message2){

    ..

    }

    $("#btn").trigger("myclick",["参数1“,”参数2“]); 


    执行默认操作

    $("input").trigger("focus"); 绑定并触发默认行为,即获取焦点

    $("input").triggerHander("focus"); 仅绑定

    5.9)绑定多个事件

    $(function(){

    $("div").bind("mouseover mouseout",function(){}

    }

    5.10)添加事件命名空间,便于管理,相同事件名称,不同命名空间执行方法

    5.11)jquery 中的动画

    show()和 hide()方法 改变元素高度宽度不透明度

    $("element").hide() 等价于 $("element").css("display","none");

    $("element").show("slow");

    $("element").show(1000);

    fadein()降低元素不透明度

    fadeout()


    slideup() slidedown() 改变元素的高度


    animate(params,speed,callback)自定义动画方法,第一个参数:一个包含样式属性及值的映射 第二个参数:速度参数,可选 第三个参数:在动画完成时的函数,可选


    动画------------------待续-----------------


    6)ajax

    不需要插件支持、优秀的用户体验(不用刷新页面)、提高web性能(按须发送,无需整个表单)、减轻服务器和带宽的负担

    $.ajax():最底层的方法

    load、$.get()、$.post() :第二层

    $.getscript() 、$.getjson() 第三层

    6.1)load(url,[.data],[.callback]) 载入远程html代码并插入dom中,第二个参数为发送至服务器的key/value数据

    1)载入html文档

    <input type="button" id="send" value="ajax get"/>

    <div class="comment">已有评论</div>

    <div id="resText"></div>

    $(function(){

    $("#send").click(function(){

    $("#resText").load("test.html");

    }

    }

    通过单击id为send的按钮来调用load()方法,然后将html的内容加载到id为restext的元素里

    2)筛选载入的html文档

    $("#resText").load("test.html .para");只需加载test.html页面中class为para的内容

    3)传递方式

    load()方法的传递方式根据参数data来自动指定,如果没有传递参数,则采用get方式传递,反之,则会自动转换为post方式

    4)回调参数

    $("#resText").load("test.html",function(responsetext,textstatus,xmlhttprequest)

    请求返回的内容

    请求状态 success、error、timeout、not modified

    xmlhttprequest对象

    load方法通常用来从web服务器上获取静态的数据文件

    $.get()和$.post()方法是jquery中的全局函数,而在此之前讲的jquery方法都是对jquery对象操作的。

  • 相关阅读:
    使用MoveIt!配置软件包在RViz中进行机器人运动规划
    ROS之Movelt!的安装与使用
    使用OpenCV和imagezmq通过网络实时传输视频流 | live video streaming over network with opencv and imagezmq
    3个例子详解C++ 11 中push_back 和 emplace_back差异
    使用TensorRT对caffe和pytorch onnx版本的mnist模型进行fp32和fp16 推理 | tensorrt fp32 fp16 tutorial with caffe pytorch minist model
    python gui tkinter快速入门教程 | python tkinter tutorial
    使用OpenMP加快OpenCV图像处理性能 | speed up opencv image processing with openmp
    快速遍历OpenCV Mat图像数据的多种方法和性能分析 | opencv mat for loop
    windows 10 上源码编译OpenCV并支持CUDA | compile opencv with CUDA support on windows 10
    ubuntu 16.04源码编译OpenCV教程 | compile opencv on ubuntu 16.04
  • 原文地址:https://www.cnblogs.com/pangblog/p/3306178.html
Copyright © 2020-2023  润新知