doubleyong
管理员
管理员
  • 最后登录2021-09-29
  • 发帖数1035
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:251回复:0

[框架]jquery 知识总结

楼主#
更多 发布于:2021-08-31 11:32
jquery最重要的工作就是替开发者解决了兼容性问题


1. jquery 选择器
    $(selector) : selector选择器,支持CSS2选择器,及CSS3大多数选择器,并且自身做了兼容性问题。基本上,各浏览器中都可以生效,如:IE7




2.解决window.onload函数冲突
 倘若页面中有多处都需要使用window.onload, 冲突问题十分棘手。 jquery 中的ready 方法很好的解决了上述问题,它能够自动将其中的函数在页面加载完成后运行,并且同一个页面中可以使用多个ready()方法,互相不冲突


   $(document).ready(
        function(){


        }
   );


  简写,省略(document).ready
 代码如下:
  $(
       function(){
      
       }
  );




3. jquery 直接创建DOM元素
   DOM:
  var oNewP = document.createElement("p");
 var oText = document.createTextElement("hello world");
oNewP.appendChild(oText);


  Jquery:
   var oNewP = $("<p>hello world</p>");
   oNewP.insertAfter("#myTarget");




4. 自定义添加“$”
   jquery 提供了用户自定义添加“$”的方法。
$.fn 是扩展jquery 时所必须的。
 如:
   定义一个禁用的方法
   $.fn.disable  = function (){
        return this.each(function(){
            if(typeof this.disabled != "undefined") this.disabled = true;
        });
   }
  调用禁用的方法:
$("input[name='xxx']").disable();




5.解决"$" 冲突
   因为其他框架中可能也使用了“$”,从而发生冲突。Juery 同样提供了noConflict(); 方法来解决“$”的冲突问题。
  如: jquery.noConfict();
  执行以上代码后,便可以使“$”按照其他的javascript 框架的方式运算,这时在jquery 中便不能再使用"$", 而必须使用Jquery.  如:$("div p")必须写成 jquery("div p")






6. 方法说明
   not() : 反向过滤
       如: $(":input:not(:checkbox):not(:radio)").addClass("myClass");


  addClass() : 给指定元素添加类
  size: 获取元素的个数      如:$("img").size();
  get(index) : 提取元素     注 : get() 方法在不设置任何参数时,可以将元素转化为一个元素对象的数组
  index(element) : 可以查找元素element所处的位置
  add() : 添加选择的元素   如: $("img[alt]").add("img[title]")   相当于   $(" img[alt],img[title]")
 filter() : filter可以接受两种类型的参数,一种与Not()方法一样,另一种类型的参数是函数。 注意,在fliter里不能使用直接的等于匹配(=)
 find() : 通过匹配选择器来筛选元素
 is():检查是否包含指定的元素,返回布尔值,当至少包含一个匹配项时为true, 否则为false;


jquery链,jquery的语句可以链接在一起,在jquery链中,后面的操作都是以前面的操作结果为对象的。
end() : 将操作的对象,设置为上一步的对象。
andSelf() : 将前面两个对象进行组合后共同处理。
    如: $("div")find("p").addClass("myBackground").andSelf().addClass("myBorder"); // myBorder样式,将对div 与 p 两个对象的第一次, 如果没有用andSelf, 将只对于p生效。


控制页面:
each():遍历元素  ,语法each(callback); 主要用于对选择器中的元素进行遍历
attr(name) : 获取属性 , 如果没有匹配项,返回undefined;
attr(name,value) : 设置属性的值
attr(name,fn):, attr,接受函数作为参数


样式控制:
addClass() : 添加样式
romoveClass() : 删除样式
toggleClass() : 动态切换CSS类别。 // 注:只能设定一种CSS类别,不能同时对多个CSS类别进行切换,如:$(this).toggleClass("highlight under"); 错误方式
css(): 直接获取、设置元素的样式风格;如:$(this).css("color");  //获取属性值    $(this).css("color","red"); //设置对应属性值
hasClass(name) : 判断某个元素是否设置了某个CSS类别。




获取、编辑见容
html(): 相当于节点的innerHTML
text(): 相当于节点的innerTEXT


empty() : 直接删除子元素  如: $("p").empty();
获取表单元素的值:
val() : 获取选择器中第一个表单元素的value值。
val(sValue): 将sValue的值,赋给表单元素的value属性


事件处理
绑定事件:
方式1:
   $("img").bind("click",function(){  w
       #("#show").append("<div>点击事件1</div>");
    }).bind("click",function(){
           #("#show").append("<div>点击事件2</div>")
  }).bind("click",function(){
          #("#show").append("<div>点击事件3</div>")
  });
IE, fireFox运行结果,都是点击事件1,点击事件2,点击事件3;
注: 对于多个事件,
     $("p").on("mouseenter mouseleave",function(){


     });
方法2:
   $("p").click(function(){
      
   });


方法3: 该方法绑定事件触发一次之后会自动删除,不再生效
  $("div").one("click",function(){
  });


移除事件
$("div").unbind();
$("div").unbind(click,myFunc);


单击事件的动态交互替: 动态交替,接受两个参数,这两个参数均为监听函数,在click事件中交替使用。
$(this).toggleClass(fun1,fun2);
实现感应鼠标:
hover(over, out );
   over: 鼠标指针移动到对象上时触发
   out: 鼠标指针移出对象时触发


show() : 显示元素
hide() : 隐藏元素
toggle() :实现显示,隐藏的切换
渐入渐出效果
show(duration, [callback]);
hide(duration,[callback]);
toggle(duration,[callback]);
fadeIn(): // 主要是透明度的改变
fadeOut(): //渐渐褪色
fadeTo(duration,opacity,callback); opacity : 0.0 - 1.0


slideUp(duration,[callback]);
slideDown(duration,[callback]);
 //模拟PPT中的类似幻灯片拉窗帘的特效
$.inArray(value,array) ;  返回第一个匹配元素在数组中的位置,如果没有找到则返回-1
获取外部代码 : $.getScript( url, [callback] );


eval() : 将类似的字符串转化为JSON格式

最新喜欢:

YuerYuer
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号