jquery

 
20.jquery
 
jquery的事件方法 加()代表调用函数并返回函数运算的返回值,不加括号代表所声明的这个函数对象。
  1. jquery是js的封装,实质上就是DOM数组,jquery只能使用自己的方法,dom也是,juqery通过j.get(index)或者j[0]转化成dom对象,j.eq(index)得到的还是jquery对象,dom通过$(dom)转化成jquery对象,凡是$()这种的都是jquery对象,juqery对象的查询方法得到的大多数都是jquery对象,$(this)值得jquery对象,this代表当前的dom对象
  2. 使用要引入<script src>jquery库
  3. Jquery选择器  $("")
  1. 基本选择器
 元素 ID 类  子代> 后代 弟弟+  所有兄弟选择器~  this可代表本元素dom节点
  1. 过滤选择器
基本过滤选择器 :first :last :not() :even :odd :eq() :gt() :lt()
内容过滤: :contains(text) :empty  
属性过滤: [attr]
状态过滤::hidden :visible  :disabled :enabled :checked :selected
表单: :input 等
Obj.eq(i) 等价于 $(obj[i])
JQuery操作DOM。
读取或者修改节点信息:html("") text("") val("") attr(a,v) attr(a) 设置多个属性值attr({"":"","":""})
创建节点:$(“<p>你好</p>”)
插入节点:parent.append(obj) parent.prepend(obj) brother.after(obj) brother.before(obj)
删除自身节点: remove() remove(selector) 删除自身及子节点  empty()  删除自身的子节点
遍历节点:
遍历父节点:直接父节点 parent() 所有祖先节点 parents()parents(o) s节点到div父节点中间的所有节点 s.parentsUntil("div")         
     遍历直接子节点:children(o) children()
遍历所有后代子节点:find("li")
     前后兄弟节点:next(o) next() prev(o)  prev()  
     兄弟节点:siblings(o)  siblings()  括号里是可选的选择器 
     样式操作:obj.addClass(“”) 可以添加多个class  中间空格  hasClass("") 判断   removeClass(“”)移除指定样式  removeClass() 移除所有样式  toggleClass("") 对元素class增加删除
          获取css属性css(“”)  设置css属性值 css(“a”,”v”) 可以设置多个属性值  css({"a1":"v1","a2":"v2" })
元素尺寸操作:
width()  height()   元素本身
Innerwidth() innerHeight()   包含内边距
outerWidth() outerHeight()  包含边框  参数设置true包含外边距
动画底层的实现原理:通过定时器的不断的修改元素的样式就是动画,定时器相当于线程,所以动画方法相当于启动了支线程,当前方法是主线程,二者并发执行,主线程启动后不等待支线程,会立刻自己执行自己的下一行代码。
把数据绑定在节点上:$("").data("",obj)    $("").data("")   $("").removeData("")  为空就是删除所有,不能缓存,一旦页面刷新data数据就丢失
$(“#book”).on("click","li",fn),表示给book节点的子元素li绑定click函数fn,动态绑定,后来加入的也可以绑定。
Jquery动画函数: speed参数可以使”slow””fast””normal”毫秒 call是回调函数,函数动画完成后就调用这个方法
  1. 显示、隐藏
  1.  hide(speed,callback) 
  2. toggle(speed,callback)  
  3. show(speed,callback)
  1. 滑动
  1. slideUp(speed,callback)
  2. slideDown(speed,callback)
  3. slideToggle(speed,callback)
  1. 淡入淡出
  1. fadeIn(speed,callback)  显示
  2. fadeOut(speed,callback)  隐藏
  3. fadeTo(speed,opacity,callback)  opacity必选0-1的透明程度  
  4. 自定义动画
animate({css:””,},speed,callback) 第一个必选,能操作几乎所有css,而且书写和css不同,如font-size应该写成 fontSize,css属性值加单/双引号,多个用逗号隔开,多个animate有一个排队的过程。
  1. 停止动画
stop(a1,a2) 两个可选参数默认false,前者true是停止当前动画,但允许后面的动画继续执行,后者true表示立即完成当前动画并停止(不是所有动画)
Jquery的event事件
直接绑定:和js一样
后绑定:页面加载  $(function(){}); 在页面中可以写多次 
   window.onload不能写多次,否则后面的会覆盖前面,jquery的文档加载 是 $(document).ready();这个可以简写成$(function(){});
定义: $obj.click(fn)
取消事件:和js一样 return false;
事件源:jquery取得的事件是经过封装的,只需要为函数传递一个参数event,$(“p”).click(function(event){}) 
获取事件源:e.target 返回dom对象  函数中写一个event
鼠标位置:e.pageX  e.pageY
事件冒泡:和js一样
取消冒泡:e.stopPropagation()    还有一种方法是在在方法函数最后写return false;就不会向上冒泡
Jquery新增合成事件
$obj.trigger(“evenName”)模拟事件
 
 
补充知识点:
$(".a").on("click",function(){
test();
});
test()函数正常被调用。
写法二 $(".tl").on("click",test)
test()函数正常被调用。
错误写法 $(".tl").on("click",test())
求问为什么第三种写法错误。不能再这个位置添加括号。
在附加一个问题,html中
<a onclick="test()"><a>
正常执行
<a onclick= test ><a>
不能执行,为什么?
 
1 评论
 
邀请回答
 
编辑 
 
更多

3个回答

 
已采纳
test() 这种语法是调用函数,$(".tl").on("click",test()) 这个意思是吧test()函数返回的结果传 给click事件的回调。
第一种写法里,function(){} 是一种引用对象,传给了click事件的回调,那么在这是function(){...}里的任何可执行代码都会在$(".a")触发click事件时执行。
第二种写法的意思是,test这个函数作为$(".tl")的click回调事件。 
题主的问题是不明白函数的本质是什么,加()代表调用函数并返回函数运算的返回值,不加括号代表所声明的这个函数对象。
 
评论 
 
编辑
jqueryjquery
xuecheng
249 声望
因为那样相当于函数执行后把返回值赋给那个事件要执行的操作,如果那个函数返回值是underfine,自然是不会执行任何东西的,如果你那个函数里面再return 一个function,那事件触发后会执行return的那个函数,你可以试一下
jqueryjquery
LL89757
367 声望
你要记住,function(){}这是个函数,你也可以理解成一个对象。这就相当于在内存中存了个地址(如果没懂请忽视)。jq呢是封装好了的js,一般on(event,fun)绑定的第一个 参数是事件名称(一般都不带on,这也是 jq区别js事件名的一个特征),第二个是函数,对,是指事件调用的函数。在原生的js里面 我们写 js事件的时候,一般都是这样写: object.eventName=function(){};比如 `object.onclick=function(){...};jq的on()只不过是把 onclick 跟 function(){}给分开了,当做两个参数;本质一样!而一般 在js里面,比如test()这种写法,是所谓的调用,是指之前你已经写好了个 function test(){...}函数,来调用他,即所谓的执行;你要记住带括号的就是调用 执行,只要是调用执行就一定会有返回值。好了扯了有点远,在回过头来看 jq是用js封装好了的,on()里面的第二个参数是指事件执行的函数,不是直接调用 ,function test(){};跟test();是不同的,前者只是个 叫 test的函数,只是个地址,并没有执行。只有调用才执行,并有返回值;on的第二个参数总不是要个返回值吧,是要执行的那个函数,函数里面执行什么代码那就随便你写咯,你在里面写的是 调用 test();(我尽力说明白了,感觉有点绕,请采纳~)
$.ajax({
    url:"http://www.microsoft.com",    //请求的url地址
    dataType:"json",   //返回格式为json
    async:true,//请求是否异步,默认为异步,这也是ajax重要特性
    data:{"id":"value"},    //参数值
    type:"POST",   //请求方式
    beforeSend:function(){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(){
        //请求完成的处理
    },
    error:function(){
        //请求出错处理
    }
});

jquery

上一篇:kubernetes之ingress部署


下一篇:.net core三个生命周期