Jquery

Posted 程序媛的春天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery相关的知识,希望对你有一定的参考价值。

一、概述

  1. 什么是jquery

    1. jquery是对javascript的封装,属于一个框架级的技术。

  2. 好处:

    1. 简化编码,提高开发的效率。

      1. 比如:

        1. js获取元素对象:document.getElementById(id);

        2. jquery:$('#id')

      2. 屏蔽了浏览器的差异。

二、搭建环境

  1. jquery的两个文件:

  2. html页面导入jquery-1.8.3.js文件


    Jquery

    注意:jquery是运行于客户端浏览器上的。

三、使用jquery开发

  1. 在另一个script标签内部书写jquery的代码

    1. 获取jquery对象:$(选择器):选择器的目的是找到要操作的元素对象。

      1. 比如:$('#id')  --通过标签id属性的值获取jquery对象。


        Jquery

      2. 注意:javascript源生对象(DOM对象)是不能调用jquery的函数的。

      3. 如何讲一个DOMduixiang和jquery对象之间做转换

        1. DOM-Jquery:$(DOM对象)

        2. jquery--DOM:jquery对象.get(0)--这种方式一般不用。

四、jquery中的选择器

  1. 基本选择器

    1. id选择器:$('#id属性的值')

    2. class选择器:$(‘.class属性的值’)

    3. 标签选择器:$(‘标签名’)

  2. 层次选择器

    1. $(sel1  sel2)--得到sel下的所有子对象

    2. $(sel1>sel2)--得到sel下的直接子对象

    3. $(sel1+sel2)--紧邻的对象

    4. $(sel1~sel2)--获得所有的兄弟对象,后面的所有兄弟

  3. 简单过滤选择器

    1. first--拿到一组对象中的第一个

    2. last--拿到一组中的最后一个

    3. eq(index)--拿到指定下标的对象

    4. gt(index)--拿到大于指定下标的对象

    5. lt(index)--拿到小于指定下标的对象

    6. even--拿到偶数下标的对象

    7. odd--拿到奇数小标的对象

    8. not(选择器)--排除指定选择器对应的对象

  4. 内容过滤选择器

    1. empty-- 拿到内容为空的对象

    2. parent--拿到有内容的对象

    3. contains(内容)-- 拿到包含指定内容的对象

    4. has(选择器)--包含指定子对象的元素对象

  5. 可见性选择器

    1. visible--可见的元素对象进行操作

    2. hidden--对隐藏的元素对象进行操作

  6. 属性过滤选择器

    1. $('选择器[属性名]')

    2. $('选择器[属性名=属性值]')

    3. 关于表单的选择器:

      1. checked--适用于单选框和多选框

        1. $('input[class=sex]:checked')--拿到的是被选中的单选按钮/多选按钮

      2. selected--适用于下拉列表的option属性

        Jquery

五、对jquery对象的访问

  1. 遍历--for循环  --jquery对象.each(function(){功能代码});

    1. 长度相关:对象数组.length /对象数组.size()

六、操作元素属性

  1. 添加

    1. var span=$('<span>一段文字</span>');--创建一个元素对象

    2. jquery对象.append(span);--在父对象的里面加入一个子对象。

    3. before()--在当前对象前加入一个哥哥

    4. after()--在当前对象后加入一个弟弟

  2. 删除

    1. empty();--清空 当前标签对象下的所有子标签

    2. remove();--清空  当前标签对象下的所有子标签 包括本身

  3. 修改

    1. text()--操作标签体的内容  不会解析html标签

      1. $('#s2').text('<h1>老七</h1>');//修改标签体内容

      2. $('#s2').html()  --获取标签体内容

    2. html()--操作标签体的内容 会解析html

      1. $('#s2').html('<h1>老七</h1>');//修改标签体内容

      2. $('#s2').html() --获取标签体内容

    3. addClass() --给一个标签添加class属性

    4. removeClass() --移除标签的class属性

  4. 操作属性的

    1. prop(属性名) --得到对应属性的值

    2. prop(属性名,属性的新值) --给指定的属性重新赋值

    3. attr(属性名)--功能和prop一样  区别:attr jquery 1.6前       prop是jquery1.6之后的

    4. 表单相关的:

      1. val() --操作表单元素的value属性

    5. 动画相关





小编微信:15229076002,欢迎互侃,期待与你交流。


以上是关于Jquery的主要内容,如果未能解决你的问题,请参考以下文章

JQueryJQuery基本操作

jQueryjquery插件封装

jQueryjQuery与Ajax的应用

jQueryjquery.metadata.js验证失效

Jqueryjquery刷新页面(局部及全页面刷新)

JqueryjQuery获取URL參数的两种方法