请选择 进入手机版 | 继续访问电脑版

叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
123
返回列表 发新帖
楼主: rain

jQuery 网页特效编程

[复制链接]

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-26 19:58:56 | 显示全部楼层
本帖最后由 rain 于 2014-11-26 22:36 编辑

delegate()   事件委托
$('li').on('click',function(){
                this.style.background = 'red';
        
$('ul').delegate('li','click',function(){
                this.style.background = 'red';           效果等同于上一个

$('ul').undelegate();      阻止事件委托
$('#div1').trigger('click');  //主动触发*/

$('#div1').on('click',{name:'hello'},function(ev){         插入参数
alert(ev.data.name);                                                参数名称
alert( ev.target );                                           事件源
alert( ev.type );                                            事件类型
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-27 17:33:06 | 显示全部楼层
本帖最后由 rain 于 2015-4-7 18:41 编辑

$().css()  $().html()  $().val()  : 只能给JQ对象用
$.xxx()  $.yyy()  $.zzz()  : 不仅可以给JQ用,也可以给原生JS用 : 叫做工具方

$(function(){
        
        //var a = null;
        
        //$.type() : 也是判断类型
        
        //alert( typeof a );
        
        //alert( $.type(a) );    和上一行同等效果,判断a的类型为string。只是可以判断出更多的类型。
        
        var str = '   hello  ';
        
        alert('('+$.trim(str)+')');   去掉左右的空格trim
inArray  类似于 indexOf   返回查找的内容的位置,有则返回位置,没有则返回-1
var arr = ['a','b','c','d'];
        alert(  $.inArray('b',arr)  );      inArray()查找b是否在arr中,在则返回位置,不在则返回-1
  1. proxy()  : 改变this指向的
  2. function show(n1,n2){
  3.                 alert(n1);
  4.                 alert(n2);
  5.                 alert(this);
  6.         }

  7.         //show();
  8.         
  9.         //$.proxy(show , document,3)(4);        赋值过去
  10.         
  11.         $(document).click( $.proxy(show,window,3,4)  );           点击才触发
  12. noConflict() : 防止冲突的
  13. parseJSON()   解析js
  14. 例:var str = '{"name":"hello"}';       alert($.parseJSON( str ).name);
复制代码
MakeArray()  把类数组转化成数组
window.onload = function(){
        var aDiv = document.getElementsByTagName('div');  //类数组
        $.makeArray(aDiv).push();
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-12-8 10:28:31 | 显示全部楼层
本帖最后由 rain 于 2014-12-8 10:32 编辑

插件
//$.extend : 扩展工具方法下的插件形式  $.xxx() $.yyy()

//$.fn.extend  :  扩展到JQ对象下的插件形式  $().xxx()  $().yyy()

$.extend({
        leftTrim : function(str){
                return str.replace(/^\s+/,'');
        },
        rightTrim : function(){},
        aaa : function(){
                alert(1);
        },
        bbb : function(){}
});

$.fn.extend({
        
        drag : function(){
               
                //this : $('#div1')
               
                var disX = 0;
                var disY = 0;
               
                var This = this;
               
                this.mousedown(function(ev){
                        
                        disX = ev.pageX - $(this).offset().left;
                        disY = ev.pageY - $(this).offset().top;
                        
                        $(document).mousemove(function(ev){
                                
                                This.css('left' , ev.pageX - disX);
                                This.css('top' , ev.pageY - disY);
                                
                        });
                        
                        $(document).mouseup(function(){
                                $(this).off();
                        });
                        
                        return false;
                        
                });
               
        },
        aaa : function(){
                alert(2);
        }
        
});


</script>
<script>


//$.trim()
//$.leftTrim()

/*var str = '  hello  ';

alert( '('+$.leftTrim(str)+')' );*/

$(function(){
        
        $('#div1').drag();
        
});


$.aaa();  // 1
$().aaa();  //2

</script>

<div id="div1"></div>

回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-12-15 22:17:23 | 显示全部楼层
本帖最后由 rain 于 2014-12-18 09:30 编辑

$('*')  选择所有的元素
$('a')   选择所有的a
$('.link')   选择相同的class标签,如.link
$(':input[type="text"]').val()    选择表单元素
$(':checkbox:checked')   选择所有已勾选的复选框
$('select').val(2013)     指定下拉菜单的项目
$('div:contains("abc")').html()    选择包含特定内容的层
$('a').attr('href','http://xxx.com')   修改元素属性的值
$('span').text()    获取指定元素的内容
$('select','span')    一次性选择多个不同类的元素
$('p').remove(':contains("abc")')   删除包含abc的段落
$('<p><a href="#">link</a></p>').replaceAll('p:contains(''abc")')   替换所选择的元素
$('p').css('color','blue')   把段落的文字颜色改为蓝色
$('p').width()  获取实际元素的宽度,高度用height()
$('document').ready(function(){}) 指定页面加载完成的回调,也可以简写成$(function(){})
$(':button').click(function(){})   为按钮指定onclick事件
$('p').toggle()    自动实现显示、隐藏交替
$('p').slideDown('slow')     自动实现滑出效果,有slow  normal  fast 三个速度参数,也可以提供第二个参数,表示动画时长。
$('p').fadeIn('slow')   淡入效果,淡出为slideOut。

$.extend : 扩展工具方法下的插件形式  $.xxx() $.yyy()
$.fn.extend  :  扩展到JQ对象下的插件形式  $().xxx()  $().yyy()

eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
例:eval("x=10;y=20;document.write(x*y)")           结果为:200
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2017-1-6 16:48:52 | 显示全部楼层
本帖最后由 rain 于 2017-1-6 17:10 编辑

阮一峰博客:设计思想

阮一峰博客:最佳实践
回复

使用道具 举报

手机版|Archiver|叶子官网|杭州轩翼网络科技有限公司 ( 浙ICP备17027999号

GMT+8, 2024-3-29 19:41 , Processed in 0.239226 second(s), 19 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表