zoukankan      html  css  js  c++  java
  • web-03-jQuery

    1、jQuery->轻量级js库(属于工具,里面封装许多方法)属于方法库,本质就是一个数组

    特点:

    1)封装了对js、css、dom一致简介的API操作

    2)兼容各种浏览器和兼容css3的写法

    3)封装了对Ajax的支持和对动画的支持

    4)实现了html页面的内容和代码的分离

    注意:JQ2.x ,不支持IE6/7/8

    2、如何使用JQ(三个步骤)

    1)在页面中引入JQ

    2)通过JQ查找节点

    3)通过JQ方法对节点进行相关的操作(增删改查)

    注:

        1)JQ本身是一个扩展了的数组

        2)JQ绝大部分的方法都会返回一个JQ对象,所以有这样的写法:JQuery().方法().方法()...

    3、JQ和原生js对象的转换

    1)原生js对象转jQuery(原生对象就是DOM对象)

    $(dom对象) -> 得到一个jQuery对象

    2)jQuery转原生对象

    jQuery对象[下标] -> 得到一个原生对象

    4、JQ常见选择器

    1)$("#id值")  -根据id查找节点

    2)$(".class值")  -根据class查找节点

    3)$("tagName值")  -根据标签名查找节点

    4)$("tagName值,#id值")  -根据标签名或id查找

    5)$("选择器1 选择器2")  -后代选择器,找后代节点,如:$("div p")

    6)$("选择器1>选择器2")  -找儿子节点,如:$("div>span")

    7)$("选择器1~选择器2")  -找所有的弟弟节点,如:$("div~span")

    8)$("选择器1+选择器2")  -找下一个弟弟,如:$("div+span")

    注:以下是常用于表格或列表

    9)$("选择器:first")  -找第一个

    10)$("选择器:last")  -找最后一个

    11)$("选择器:not(选择器2)")  -排除符合选择器2的情况

    12)$("选择器:even")  -偶行(从0开始)

    13)$("选择器:odd")  -奇行(从0开始)

    注:通过jq修改js样式,$().css(属性,值);

    14)$("选择器:eq(index)")  -找下标为index节点

    15)$("选择器:lt(index)")  -找下标小于index节点

    16)$("选择器:gt(index)")  -找下标大于index节点

    17)$("选择器:hidden")  -找出隐藏的元素

    18)$("[class^=]")  -查找class值以指定字符串开头

         如:

           $("[class]").css("color","red");

           $("[class=on]").css("color","blue");

    form表单相应的选择器

    19)$("选择器:enable")  -找可编辑元素  状态过滤

    20)$("选择器:disable")  -找不可编辑元素

    21)$("选择器:checked")  -找选中元素

    22)$("选择器:selected")  -找选中元素

    23)$("选择器:text")  -找普通文本

        根据input节点的type:  type值=$("input[type=值]")

    24)$("选择器:contains(text)")  -找包含指定文本的节点

        如:找出包含“开”字的节点

               $("div:contains(开)").css("color","red");

    25)$("选择器:empty")  -找出空的双标记

        如:将空双标记内容赋值为你好

            $("div:empty").html("你好");

    注:JQ常用方法

    $(选择器).css()  -用来获取css样式
    $(选择器).css(属性,值) -修改css样式
    $(选择器).val() -用来获取val值(单标记获取值的方法)
    $(选择器).val(值) -修改val值
    $(选择器).html() -用来获取html值(适应双标记)
    $(选择器).html(值) -修改html值

    5、JQ操作dom(对象指 $(选择器))

        1)增加

    JQ对象.append();  -对象内部追加
    如:ul.append(li); -li在最后
    对象.prepend() -对象内部最前面追加
    如:ul.prepend(li) -li在最前面
    对象.after() -对象后面添加
    如:ul.after(div) -div是ul的下一个弟弟
    对象.before() -对象前面添加
    如:ul.before(div) -div是ul的上一个哥哥

        2)删

    对象.remove([选择器])  -完全删除节点(包含结构),可以根选择器
    对象.empty() -清空节点内容,结构保留

        3)改

    -1)改值

    改value值  -对象.val(值);

    改html值  -对象.html(值)

    改属性值  -对象.attr(属性名,属性值)

        获取属性值:对象.attr(属性名);

    -2)改样式

    对象.css("属性","值");

    对象.css({"属性":"值","属性":"值"});

    注:不推荐使用,因为修改的样式会成为行内式,优先级比较高

    通过修改class,推荐使用

        对象.addClass(className)  -给对象添加一个class

        对象.removeClass(className)  -删除对象的指定class

    -3)改事件

    6、JQ遍历节点

    1)对象.children()  -找所有的子节点

    2)对象.next()  -找下一个兄弟节点

    3)对象.prev()  -找上一个兄弟节点、

    4)对象.siblings()  -找所有的兄弟节点

    5)对象.parents("选择器")  -找祖先(由内向外找)

    7、JQ操作dom事件

    1)对象.事件名();  //给某个对象绑定某个事件

        如:obj.click(function(){});  //function(){},为匿名函数,对象被点击时立刻执行里面的匿名函数

    2)对象.on(事件名,function(){});

    3)原生onload方法:

        window.onload=function(){}  -当页面加载完成之后会产生一个load事件,对应的事件函数就会被执行,当页面加载完成(dom树已经完全生成),此时查找任何dom节点都能被找到,这个是原生写法

    4)JQ写法

        $(function(){});  -页面加载完成立刻执行该函数

        这个写法等同于:

            function fn(){}

            $(fn);

    8、JQ动画

    * show()  -显示
    * hide([动画时长][动画的轨迹][动画完成之后执行的内容]) -隐藏
    * fadeIn(); -淡入
    * fadeOut(); -淡出
    * 自定义动画
    animate(效果,动画时长,[动画完成之后执行的内容])

    补充:es6中js的面向对象

    9、json   java对象->json(前提进入json的jar包)  是一种数据转换格式

    将后台的数据展示在前台页面-解析

    *若为java单个对象,通过,JSONObject.from(java对象).toString();

    *若为多个对象,通过,JSONArray.from(java数组|集合).toString();

  • 相关阅读:
    C#中的委托,匿名方法和Lambda表达式
    模式化窗口问题![window.dialogArguments]
    js动态改变HiddenField值,后台不能获取值的问题
    将DataTable进行分页并生成新的DataTable
    出错提示为:该行已经属于另一个表 的解决方法
    如何在服务器端获得showModalDialog传递的参数
    Synchronized和SyncRoot与 集合类 的同步
    Oracle中数据出现####的问题
    如何防止多次提交按钮造成重复提交
    Invoke and BeginInvoke
  • 原文地址:https://www.cnblogs.com/xslzwm/p/9620101.html
Copyright © 2011-2022 走看看