jQuery——一个快速,简介的javaScrip框架

作用:将我们的页面的js代码和HTML页面代码进行分离

   提供工作效率

 

引入jQuery的库

<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

 

jQuery函数创建:文档加载完成的事件

jQuery(document).ready(function(){

});

$(document).read(function(){

});

$(function(){

});

三种方式都可以

 

window.onload = function(){

  //文档加载事件

}

 

jq绑定事件例子

$("选择器").click(function(){

});

事件:

.html("文本内容")——替换两个尖括号里面的内容

 

js和jq对象互换:

var div = $("选择器"),日常开发通常在di对象名前面加个$,标识为jq转成js的对象 

var $div = $("id选择器");

var jsDiv = $div.get(0);

var jsDiv = $div[0];

$(jq对象).事件()——直接将js对象放到$里面

 

jq开发步骤:

  1、导入jq的相关文件

  2、文档加载完成事件:

    $(function(){});页面初始化的操作,绑定事件,启动页面定时器

  3、确定相关操作的事件

  4、事件触发函数

  5、函数里面再去操作相关的元素

 

jq动画效果:

show(speed,[callback])——显示

hide(speed,[callback])——隐藏

  speed速度:slow,normal,fast,毫秒值,有缩放效果

slideDown()/slideup()——滑动,按照窗帘的方式往上缩小,如果要做到这种效果,需要确定图片的宽度,让图片宽度不随高度的改变而改变

fadeIn()/fadeOut()——淡入淡出

animate(params,[speed],[easing],[fn])——自定义,params没有中括号,是i必须的

例子:$("#img1").animate({width:"800px",opacity:"1"},5000);

  opacity是显示与隐藏,0-1

 

setTimeout("函数名()",毫秒值)——定时器,定时执行对应函数

 

jq中的选择器:

基本选择器:

  ID——#ID的名称

  类——以.开头  .类名

  元素——标签的名字

  通配符选择器——*

  选择器,选择器:选择器1,选择器2

层级选择器:

  子元素选择器:选择器1>选择器2

  后代选择器:选择器1 儿孙

  相邻兄弟选择器:选择器1+选择器2:找出紧挨着的一个弟弟

  找出所有的弟弟:选择器1~选择器2:找出所有的弟弟

过滤:

  div:first(过滤的规则)——只要div1中的第一个

  div:even——只要第0,2,4等的偶数位的div

  div:odd——只要第1,3,5等的奇数位的div

  div:gt(3)——只要索引大于3的div

  div:lt(3)——只要索引小于3的div

  div:eq(3)——只要索引等于3的div

属性选择器:

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

表单选择器:

  $(":input").css("background-color","red");——找出来不止是input,还有select,button,textarea

  $(option:selected).css("属性","要修改的属性")——可以找到被选中的按个下拉选项

var 属性对象 = $("选择器").css("属性");

 $("选择器").css("属性","要修改的值");

 

表格每行不同颜色:$(tr:even:gt(0)).css("background-color","red");

多选框全选/取消多选:$("input[type=checked]:gt(0)").prop("check",this.checked);

另外一种方式层级:$("tbody>tr>td>input").prop("check",this.checked);

attr()——操作定义的属性<img abc="123"/>

addClass()——添加一个class样式

removeClass()——删除class样式

 

this代表的是当前函数的所有者,谁调用,就是谁

 

 

append()——追加内容,String,Element,jQuery对象都可以

appendTo()——将自己追加指定的地方,相当于上面的方法调用对象和入参反过来

prepend()——追加指定元素里面的内容的前面

after()——在指定元素的同级后面增加内容

before()——在指定元素的同级前面增加内容

empty()——jq的清空元素

focus()——焦点事件

trigger()——触发事件,会执行类似浏览器将光标移到输入框内的这种浏览器行为

triggerHandler()——也会触发事件,但不会执行浏览器行为,只会触发第一个函数,如果是类选择器,只会调用第一个

$(this).is(选择器)——判断当前的选中的选择器是否括号里面的选择器 

remove()——删除调用这个方法的对象

find()——找到对应的元素

 

遍历的操作:

  $(数组对象).each(function(i,n){

    i;——i就是数组里面每一个元素

  });

  $.each(数组对象,function(i,n){

    console.log(i + "  "+  n);——i是索引,n是数组里面的元素

  });

 

一套检验代码多次调用:

$().blur(function(){

  //校验逻辑

}).focus(function(){

  this.triggerHandler("blur");——触发上面的代码逻辑

}).keyup(function(){

  this.triggerHandler("blur");——触发上面的代码逻辑

});

 

发送请求:

$.get(url,function(data){

  console(data);//data是url请求后接收的数据

});

 

 Ajax

 

 

posted on 2019-12-09 16:20  大景少  阅读(396)  评论(0编辑  收藏  举报