开源达人常用jquery标签

作者: jiukeshuju 分类: JQUERY 发布时间: 2021-08-09 22:18
//基本,层次,基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单过滤

        //基本
        $(".one")
        $("#one")
        $("p")
        $("*")
        $("select")

        //层次
        $("body div");//内的所有
        $("body > div"); //内的子元素
        $(".one + div");//.one的下一个
        $(".one ~ div");//.one后的同辈元素

        //基本过滤
        $("div:first");
        $("div:last");
        $("div:not(.one)");
        $("div:even");//偶数
        $("div:odd");//奇数
        $("div:eq(3)");//等于3
        $("div:gt(3)");//大于
        $("div:lt(3)");//小于
        $(":header");//标题
        $(":animated");//动画
        $(":focus");

        //内容过滤
        $("div:contains('我')");
        $("div:empty");
        $("div:has('p')");
        $("div:parent");

        //可见性过滤
        $("div:hidden");
        $("div:visible");

        //属性过滤
        $("div[id]");
        $("div[title=abc]");//等于abc
        $("div[title!=abc]");//不等于abc
        $("div[title^=abc]");//以abc开始
        $("div[title$=abc]");//以abc结尾
        $("div[title*=abc]");//含有abc
        $("div[id][title*=abc]");//div 含有id 并且属性 等于abc的

        //子元素过滤
        $("div :nth-child(2)");
        $("div :first-child(1)");
        $("div :last-child(2)");
        $("div :only-child(1)");

        //表单过滤
        $("#form :enabled");
        $("#form :disabled");
        $("#form :checked");
        $("#form :selected");
		
		

        //DOM操作
        //jq选择器查找
        attr();
        append(); appendTo(); preappend(); prependTo(); after(); insertAfter(); before(); insertBefore();
        remove(); detach(); empty(); clone();
        replaceWith();
        wrap(); wrapAll(); wrapInner();

        attr("title","我们");
        removeAttr("title");
        attr("class","highcss");
        addClass("classcss");
        removeClass("classidname");
        toggleClass(function (){ //切换样式
             //方法1
        },function (){
            //方法2
        });
        hasClass("classcss"); is("classcss");

        html(); $("p").html(); $("p").html("<p>内容</p>");
        text(); $("p").text(); $("p").tetx("内容");
        val(); $(this).val();

        //遍历节点
        children();//遍历子元素
        next();//遍历后同辈元素
        prev();//前同辈元素
        siblings();//前后所有同辈元素
        closest();//最近的匹配元素
        parent(); parents(); closest();//父级,祖先级,向上最先匹配的父级

        //CSS-DOM操作
        css(); attr();
        height(); width();
        offset(); postinon(); scrollTop(); scrollLeft(); //相对偏移 相对绝对 顶端左侧
		
		//事件
		$(function (){
			//代码块
		})
		
		hove(function (){ //悬停
			//事件
		},function (){
			//事件
		});	
		
		toggle(function (){ //点击
			//事件
		},function (){
			//事件
		});
		
		bind("click",function(){ }).bind("click",function (){  }); //绑定事件
		one("click",function() { }).one("click",function(){  });
		unbind("click"); //删除事件
		
		trigger();//模拟点击
		
		//动画
		show();
		hide();
		fadeIn(); fadeOut(); //透明 不透明
		slideUp(); slideDown(); //改变高度
		animate(); //动画   animte(样式,速度,函数)
		stop();
		if($("abc").is(":animate")){   }
		delay(2000)	
		toggle();
		slideTo();
		fadeTo();
		fadeToggle();
		
		//ajax 
		<input type="button" onclick="ajax()" />
		<div id="resText">
		function ajax(){
			//...........
		}	
		
		load(url,[data],[function]);
		$.post(url,[data],[function],[type xml,html,script,json,text,default]);
		$.get(url,[data],[function],[type xml,html,script,json,text,default]);
		$.getScript();
		$.getJson();
		
		serialize();
		serializeArray();
		console.log();//输出字段数
		$.param();
		ajaxStart(); ajaxStop();
		




如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论