前端

jQuery小结

Posted by 曾思勇 on May 8, 2017

一、页面加载

  • JQ的页面加载比JS要快，当整个dom树结构生成完毕后就会加载
  • JQ页面加载不存在覆盖问题，加载的时候是顺序执行
  • JQ的页面加载最简写的方式为： 
    $(function(){
      alert("显示页面加载内容");
})
//对比JS的页面加载为：
window.onload = function(){
      alert("显示页面加载内容");
}

二、JQ的获取

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				//1.JS方式获取
				/*document.getElementById("btn").onclick= function(){
					location.href="惊喜.html";
				}*/
				
				//2.JQ方式获取=====>>>$("#btn")
				$("#btn").click(function(){
					location.href="惊喜.html"
				});
			});
		</script>

三、DOM对象和HQ对象的转化

  • 注意JQ不能操作JS中的属性和方法，一样的DOM对象也无法操作JQ对象里面的属性和方法！！！
  • JQ的html()方法：取得第一个匹配元素的html内容。
  • JQ的html(val)方法：用于设定HTML内容的值，其中val是String类型 
    //1.JS的DOM操作
function write1(){
      document.getElementById("span1").innerHTML = "js的dom操作";
}        
//2.JQ的DOM操作
$(function(){
      $("btn").click(function){
       //注意JQ不能操作JS中的属性和方法，例如 $("span1").innerHTML=""的写法是错的
              $("span1").html("jq的dom操作")
      });
})

  • JQ对象向DOM对象转化：使用jQuery 对象访问中的get()方法可以取得所有匹配的DOM元素集合，get(index)可以取得其中一个匹配的元素，即可调用JS中的属性方法。图中使用的是元素选择器，即可以通过角标获取多个 JQ对象向DOM对象转化

  • 将DOM对象转换成JQ对象：直接把dom对象用$括起来 
          var spanEle = document.getElementById("span1");
      //将DOM对象转换成JQ对象
      $(spanEle).html("DOM对象转换成JQ对象");
  • JQ效果中的方法可以实现淡入淡出，上下滑入滑出，使用toggle可以实现一个标签的显示和隐藏 toggle实现标签的显示和隐藏

四、JQ选择器

  • 基本选择器： id选择器：$(“#id名称”); 元素选择器：$(“元素名称”); 类选择器：$(“.类名”); 通配符：* 多个选择器共用(并集),在同一个括号中使用 空格隔开

  • 层级选择器： ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子) parent > child : 在给定的父元素下匹配所有的子元素(儿子) prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌) prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟) 层级选择器

  • 基本过滤选择器： $(‘li’).first() 等价于：$(“li:first”) 基本过滤选择器

五、案例——使用JQ完成表格的隔行换色

  1. 需求分析 在页面加载的时候让显示用户的表格进行隔行换色显示，效果如下：使用JQ实现！
  2. 技术分析 需要使用jquery的选择器(基本选择器、基本过滤选择器) 还需要使用jquery的CSS的方法(css(name,value)) 如果CSS样式已经由美工写好，此时可以使用jquery的CSS类操作 css类：addClass(class | fn)
  3. 步骤分析 第一步：引入jquery的类库 第二步：直接写页面加载函数 第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
  4. 代码实现
<script type = "text/javascript" src = "../js/jquery-1.8.3.js"></script>
<link rel = "styylesheet" type = "text/css" href = "../css/style.css">
<script>
        $(function(){
                //获取tbody标签中的偶数行
                $("tbody tr:even").addClass("even");
                //获取tbody标签中的奇数行
                $("tbody tr:odd").addClass("odd);
        })
</script>

六、案例——使用JQ完成全选和全不选

  1. 需求分析 在系统后台进行人员管理时，进行批量删除，使用jq完成全选和全不选 全选需求分析.png

  2. 技术分析 需要使用jquery的选择器(id选择器、类选择器) 需要使用jquery的属性操作方法 attr()或者prop()

  3. 步骤分析 第一步：引入jquery文件 第二步：书写页面加载函数 第三步：为上面的复选框绑定单击事件 第四步：将下面所有的复选框的选中状态设置成跟上面的一致！

  4. 代码实现

<script type = "text/javascript" src = "../js/jquery-1.8.3.js"></script>
<script>
        $(function(){
                //找到下面所有的复选框并设置属性checked()
                $("#select").click(function(){
                        //attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)
                        //使用选择框中input标签已有的类 class="selectOne"
                        $(".selectOne").attr("checked",this.checked);
                        //使用选择框中input标签，不使用其他类属性
                        $("tbody input").prop("checked",this.checked);
                        //使用this.checked使选择框中是否选中状态与表头 id="select" 的选择框选择状态相同，如果
                });
        });
</script>

七、数组的遍历操作

  • 方式一：
    1. jQuery对象访问方式中的 each(callback) each(callback)
    2. 全选/全不选案例示例代码
$(function(){
        $("#checkallbox").click(function){
                var isChecked = this.checked;
                //使用对象访问的方式进行遍历，语法：$().each(function(){})
                $("input[name = 'hobby']").each(function(){
                          this.checked = isChecked;
                });
        });
});
  • 方式二：
    1. 数组和对象操作中的 $.each(object,[callback]) $.each(object,[callback])
    2. object为被遍历的对象或数组，即如下示例代码中的[0,1,2]，其中i为角标，n为被遍历后的内容
        $.each( [0,1,2] , function(i , n ){
                alert( "Item #" + i + ": " + n );
        });

八、文档处理操作

  • 追加内容 apend: A.append(B) 将B追加到A的内容的末尾处 appendTo: A.appendTo(B) 将A加到B内容的末尾处

  • 删除内容 empty: 删除匹配元素集合中的所有的子节点。 remove: 从DOM中删除所有匹配的元素 remove

  • 案例——省市联动
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				//2.创建二维数组用于存储省份和城市
				var cities = new Array(3);
				cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
				cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
				cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
				cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
				
				$("#province").change(function(){
					//10.清除第二个下拉列表的内容
					$("#city").empty();
					
					//1.获取用户选择的省份
					var val = this.value;
					//alert(val);
					//3.遍历二维数组中的省份
					$.each(cities,function(i,n){
						//alert(i+":"+n);
						//4.判断用户选择的省份和遍历的省份
						if(val==i){
							//5.遍历该省份下的所有城市
							$.each(cities[i], function(j,m) {
								//alert(m);
								//6.创建城市文本节点
								var textNode = document.createTextNode(m);
								//7.创建option元素节点
								var opEle = document.createElement("option");
								//8.将城市文本节点添加到option元素节点中去
								$(opEle).append(textNode);
								//9.将option元素节点追加到第二个下拉列表中去
								$(opEle).appendTo($("#city"));
							});
						}
					});
					
				});
			});
		</script>

九、jQuery事件(常用)

  • 事件绑定

    1. 案例——单击显示/关闭新内容：使用绑定事件 bind(type,[data],fn)，如下代码中 bind 绑定单击事件 “click”，绑定的事件内容是 function(){}。（注意代码中的方法可以等效为JQ事件切换中的toggle()） 绑定事件 bind(type,[data],fn)

    2. 案例——鼠标滑过内容变换:（注意代码中的方法可以等效为JQ事件切换中的hover()） Paste_Image.png

十、JQ的validation插件完成对表单数据的校验优化

  • 特点： 内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则 自定义验证规则：可以很方便的自定义验证规则
  • 调用语法：$(“表单id”).validate({});
  • rules 规则语法：
        rules:{
                字段名:校验器，
                字段名:校验器
        }
  • 校验器语法：
       语法：{校验器:值，校验器:值}
  • message 提示语法：
        message:{
                字段名:{校验器:"提示", 校验器:"提示",....}
        }

validation插件的使用示例代码

简书链接

CATALOG
    FEATURED TAGS
    markdown 写作 tool 前端 数据库 web服务器技术