文档章节

jQuery学习

eatnothing
 eatnothing
发布于 2016/05/13 15:42
字数 1655
阅读 42
收藏 4
点赞 2
评论 0

jQuery

jquery.js->完整无压缩版

jquery.min.js->经过工具压缩或服务器开启gzip压缩,主要用于产品和项目

编写简单的jQuery代码

在jQuery库中,$就是jQuery的一个简写形式,例如$("#foo")jQuery("#foo")是等价的。$.ajaxjQuery.ajax是等价的,如果没有特别说明,程序中的$都输jQuery的一个简写形式。


		//这段代码类似于传统的window.onload方法
        $(document).ready(function(){
           alert("hello world");
        });

实现一个导航栏

        $(document).ready(function () {
            $(".level1 > a").click(function(){
            //当鼠标点击到a标签(它是class含有level1的子元素)给其加一个名为current的class,然后将紧邻其后面的元素显示出来,同时将它的父辈的同辈元素<a>都去掉一个名为current的class
                $(this).addClass("current")
                        .next().show()
                        .parent().siblings()
                        .children("a")
                        .removeClass("current")
                        .next().hide();
                return false;
            });
        });

DOM对象(Document Object Model,文档对象模型)

jQuery对象就是通过jQuery包装DOM对象后产生的对象,jQuery对象无法使用DOM对象的任何方法,DOM对象也不能使用jQuery里的方法。

jQuery对象转成DOM对象

jQuery提供了两种方法将一个jQuery对象转换成DOM对象既[index]和get(index).

var $cr = $("#cr");
var cr = $cr[0];

var $cr = $("#cr");
var cr = $cr.get(0);

DOM对象转成jQuery对象
var cr = document.getElementById("cr");
var $cr = $(cr);

jQuery选择器

实现列表下拉效果

    <script>
        $(document).ready(function(){
          var $category = $("ul li:gt(5):not(:last)");
            //获取ul元素下索引大于5的li元素的集合元素,然后去掉集合的最后一个元素,并隐藏
            $category.hide();
            //获取按钮
            var $toggleBtn  = $("div.showmore > a");
            $toggleBtn.click(function(){
                //如果是可见的则隐藏
                if($category.is(":visible")){
                   $category.hide();
                    $(this).find('span').css("background","red").text("fuckitup");
                }else{
                    //如果不可见则显示
                    $category.show();
                    $(this).find('span').css("background","red").text("收起来");
                    $('ul li').filter(":contains('放假')").addClass("promoted");
                }
              return false;
            });
        });

    </script>

jQuery选择器

基本选择器:Jquery最常用的选择器,它通过元素的ID,CLASS和标签名来查找DOM元素(每个ID名称只可以使用一次,class允许重复使用)

根据ID匹配一个元素 : $("#id")
根据类名来匹配元素:   $(".id")
根据标签来匹配元素:   $("p")
匹配所有元素:        $("*")
  • 层次选择器:通过DOM元素之间的层次关系来获取特定的元素
$("div span") 获取div里面所有的span元素
$("div > span")选取div下元素名是span的子元素
$(".one + div")选取class为one的下一个div同辈元素,可用$(".one").next("div")替代
$("#two ~ div")选取id为two的元素后面所有div同辈元素
可用$("#two").nextAll("div")来替代
  • 过滤选择器:通过过滤定则来筛选出所需的DOM元素,选择器都以一个冒号(:)开头
$("div:first")选取所有DIV元素的第一个DIV元素
$("div:last")选取所有的DIV元素的最后后一个DIV元素
等
......
  • 内容过滤选择器
$("div:contains('我')")选取文本含有我的元素
$("div:has(p)"):选取含有<p>的元素的DIV元素

如果选择器含有特殊字符需要转义使用

jQuery的DOM操作
  • 查找元素节点:使用jQuery选择器
  • 查找属性节点:利用jQuery找到需要的元素后,就可以使用attr()方法来获取它的各种属性值
  • 创建节点:使用jQuery的append()等方法来创建节点
append():向每个匹配的元素内部追加内容
appendTo():将匹配的元素追加到指定的元素中
prepend():向每个匹配的元素内部前置内容
prependTo():同~
等....
  • 删除节点:jQuery提供了三种删除节点的方法remove(),detach(),empty()
  • 包裹节点:如需要将某个标签包裹起来,jQuery()提供了wrap(),wrapAll()来包裹相应的节点
  • 属性操作:
使用addClass()向标签来追加一个类,
使用removeClass()从标签删除掉一个类
html()用来读取某个元素的html内容
text()用来读取某个元素的文本内容
val()用来设置和获取元素的值
  • 遍历节点
children():用于取得匹配元素的子元素的集合
next():匹配元素后面紧邻的同辈元素
prev():匹配元素前面紧邻的同辈元素
siblings():用去匹配元素前后所有的同辈元素
jQuery中的事件和动画

加载DOM:window.onload方法是在网页中所有元素完全加载到浏览器之后才执行,$(document).ready()方法,在DOM就绪的时候就可以被调用。

$(function(){

});

$(document)也可以使用简写为$().当$()不带参数的时候,默认参数就是document因此可以简写为
$().ready(function(){

})

事件绑定:jQuery可以使用bind()方法来对匹配元素进行特定事务的绑定,bind(type,[,data],fn)第一个参数为事件类型eg:click,focus;第二个参数为可选参数;第三个参数用来绑定处理函数

jQuery合成事件:hover():模拟光标悬停事件,toggle()用于模拟鼠标连续单机事件

事件冒泡:事件会按照DOM层次结构像水泡一样不断向上至顶端

$('element').bind('click',function(event){

	event.stopPropagation();//停止冒泡
})

阻止默认行为:jQuery中提供了preventDefault()方法来组织元素的默认行为,如果同时对事件停止冒泡和默认行为,可以在事件处理返回false; 对于只需要出发一次,随后就要接触绑定的情况,jQuery提供了一种简写one()方法,当处理函数出发一次之后,立即被删除。

jQuery的动画:

$('element').show(1000),show()方法和hide()方法在不带任何参数的情况下相当于css("display","none/block/inline");
当使用show()或者hide()方法可以为其指定一个速度

fadeIn(),fadeOut()方法改变元素的不透明度
自定义动画:animate()
jQuery对表单的操作

对checkbox的操作 全选/全不选


 $("#checkNo").click(function(){ 
 $('[name=items]:checkbox').
 attr('checked',false);
            });

            $("#checkRev").click(function(){
               $('[name=items]:checkbox').
           each(function(){
                  this.checked!=this.checked;
               });

            });
            $("#send").click(function () {
                var str="";
              $('[name=items]:checkbox:checked')
                .each(function(){
                   str += $(this).val();
                });
                alert(str);
            })

....很多不详细列举

jQuery和Ajax的应用

Ajax的核心是XMLHttpRequest对象,发送异步请求,接受相应和执行回调都是通过它来完成。

jQuery中 $.ajax()是属于最底层的方法,第二层是$.load(),$.get(),$.post()第三层是$.getScript()和$.getJson()方法。

load方法的传递方法根据data参数指定,如果没有参数那么采用GET传递,反之,则会自动转换为POST方式,load()方法主要用来获取静态文件,如需要传递一些参数那么使用$.get(),$.post()方法

via:<<锋利的jQuery>>

© 著作权归作者所有

共有 人打赏支持
eatnothing
粉丝 36
博文 128
码字总数 68736
作品 0
昌平
程序员

暂无文章

Win10专业版安装GIT后使用Git Bash闪退解决办法

百度后把过程和最终解决办法记录下来: 百度首先出来的解决办法如下: 来自:https://segmentfault.com/q/1010000012722511?sort=created 重启电脑 重新安装 安装到C盘 尝试网上的教程 \Git...

特拉仔
17分钟前
0
0
设计模式

1.装饰器模式 概念 允许向一个现有的对象添加新的功能,同时又不改变其结构。装饰者可以在所委托被装饰者的行为之前或之后加上自己的行为,以达到特定的目的。 实现 增加一个修饰类包裹原来的...

EasyProgramming
32分钟前
1
0
用python2和opencv进行人脸识别

一、安装cv2 sudo apt-get install python-opencv opencv-data 二、 Haar特征分类器 Haar特征分类器就是一个XML文件,该文件中会描述人体各个部位的Haar特征值。包括人脸、眼睛、嘴唇等等。 ...

wangxuwei
32分钟前
0
0
python模板中循环字典

{% for k,v in user.items %} {{ k}} {{ v}} {% endfor %}

南桥北木
今天
0
0
Java8系列之重新认识HashMap

简介 Java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap、Hashtable、LinkedHashMap和TreeMap,类继承关系如下图所示: 下面针对各个实现类...

HOT_POT
今天
0
0
获取调用方的className

/** * 获取调用方的class * @return */private static String getInvoke() { StackTraceElement[] stackTrace = Thread.currentThread().getStackTrace(); S......

iborder
今天
0
0
深入了解一下Redis的内存模型!

一前言 Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Redis是实现网站高并发不可或缺的一部分。 我们使用Redis时,会接触Redis的5种对象类型(字符...

Java填坑之路
今天
1
0
从实践出发:微服务布道师告诉你Spring Cloud与Spring Boot他如何选择

背景 随着公司业务量的飞速发展,平台面临的挑战已经远远大于业务,需求量不断增加,技术人员数量增加,面临的复杂度也大大增加。在这个背景下,平台的技术架构也完成了从传统的单体应用到微...

老道士
今天
1
0
大数据学习的各个阶段

第一阶段:Linux课程讲解Linux基础操作,讲的是在命令行下进行文件系统的操作,这是Hadoop学习的基础,后面的所有视频都是基于linux操作的。鉴于很多学员没有linux基础,特增加该内容,保证零linux...

董黎明
今天
0
0
CVE-2013-0077 堆溢出分析

找了很久才发现这个环境比较容易搭建分析... 环境: 系统---Win XP SP3 漏洞程序:QQPlayer 3.7.892.400 出错DLL:quartz.dll 6.5.2600.5512 调试工具:x32db+gflag.exe 过程: 首先gflag设置...

Explorer0
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部