Jquery - 基础知识（待整理）

最新推荐文章于 2024-02-21 21:34:39 发布

yuxuac

最新推荐文章于 2024-02-21 21:34:39 发布

阅读量585

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/yuxuac/article/details/50823399

版权

Jquery 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

// 本元素相邻的label元素：
$("p+ label")
 
// 本元素之后的所有同级label元素：
$("p~ label")
 
// 本元素下层中的所有span元素
$("div  span")
 
// 本元素下第一层中的所有span元素
$("div> span")
 
// 本元素（class="div1"）下 第一个li元素/最后一个li元素/奇，偶数li元素
$(".div1li:first")
$(".div1li:last")
$(".div1 li:odd") //偶数
$(".div1 li:even") //奇数
 
// Not firstor not last
$(this).closest('tr').find('td:not(:last)')
$(this).closest('tr').find('td:not(:first)')
 
// 本元素（ul）下第一层索引为2的li元素，索引是从0开始
$("ul > li:eq(2)") //索引等于2
$("li:gt(2)") // 索引大于2
$("li:lt(2)") // 索引小于2
 
// 所有包含'jQuery'关键字的li
$("li:contains('jQuery')").css("background","green");
 
// 所有含有Label元素的li，'label'是选择器，可以任意定义。
$("li:has('label')").css("border","solid2px red")
 
// 所有可见p元素，所有隐藏li元素
$("li:hidden")
$("p:visible")
 
// 所有title 属性为'蔬菜'的li
$("li[title=蔬菜]").css("background-color","green");
 
// title 属性以'蔬菜'结尾
$("li[title^=蔬菜]").css("background-color","green");
 
// title 属性包含'蔬菜'
$("li[title*=蔬菜]").css("background-color","green");
 
// title 属性以'蔬菜'结尾
$("li[title$=蔬菜]").css("background-color","green");
 
// （1）所有title属性为'水果'，内容包含香蕉的，奇数位置的li;
$("li[title=水果]:contains(香蕉):even").css("background-color","yellow");
// [attribute=value]:属性等于值
// [attribute!=value]:属性不等于值
// [attribute*=value]:属性包含值
 
// 指所有含有li作为子元素的元素下，第一个（最后一个）li元素，可能是一个集合：
$("li:first-child").css("background-color","green");
$("li:last-child").css("background-color","green");
 
// 说明：
// （1）:多于一个选择器中间无需空格，直接写即可。
============================================================
// 选择表单元素：
:input
:password
:text
:radio
:checkbox
:submit
:image
 
// 根据属性
:checked
:selected
 
设置属性：           
$(":radio#Radio1").attr("disabled",true);
$(":radio#Radio2").attr("checked",true);
$(":radio#Radio3").hide();
 
CSS操作：
$("#content").addClass("red");
//$("#content").removeClass("red");
$("#content").addClass("blue");
$("#content").css({"background-color":"red","color":"white"});
 
// 在Selector中添加content
$(selector).append(content)
// 把content添加到selector中
$(content).appendTo(selector)
 
// 找到最近的父节点，并调用append():
var $html = "<span class='red'>小青蛙</span>"
$("#t1").closest("div").append($html);
 
// 向容器中添加元素，调用appendTo():
<span class="green">小乌龟</span>
var $html = "<span class='red'>小青蛙</span>"
$($html).appendTo($(".green"));
 
// Selector被content替换
$(selector).replaceWith(content)
// 使用content替换所有Selector的位置
$(content).replaceAll(selector)
 
//在selector位置之后添加content
$(selector).after(content)
//在selector位置之前添加content
$(selector).before(content)
 
//selector被content包裹（同appendTo）
$(selector).wrap(content)
//selector包裹content （同append）
$(selector).wrapInner(content)
 
//each遍历
 $("span").each(function (index) {
                if (index % i == 0) {
                    $(this).attr("class","red");
                })
 
//清空selector的子元素
$(selector).empty();
//清空selector下满足selecter-sub的子元素
$(selector).empty(selector-sub);
 
//删除selector的子元素
$(selector).remove();
//删除selector下满足selecter-sub的子元素
$(selector).remove(selector-sub);
 
 ======================================
<input type="button" value="Input Button" /><br />
<input type="submit" value="点我就提交了" /><br />
<button>Button</button><br />
 
$(":sumbit") ->会选中 2和 3
$(":button") ->会选中 1和 3
$("input:submit") ->会选中2
$("input:button") ->会选中1

=========================================
<body>
        <h3>appendTo()方法插入内容</h3>
        <div>
            <spanclass="green">小乌龟</span>
        </div>
        <spanclass="red">小兔子</span>
        <scripttype="text/javascript">
            //插入内容
           $(".red").appendTo("div");
            //插入变量
            var $html ="<span class='red'>小青蛙</span>"
            $($html).appendTo("div");
        </script>
    </body>
=======================================
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>包裹元素和内容</title>
        <scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"type="text/javascript"></script>  
        <link href="style.css"rel="stylesheet" type="text/css" />
    </head>
   
    <body>
        <h3>使用wrapInner()方法包裹元素</h3>
        <spanclass="red" title='hi'>我的身体有点歪</span>
       
        <spanclass="span1">Hello I am span</span>
        <div class='div2'></div>
 
        <scripttype="text/javascript">
            // A被B包裹
           $(".span1").wrap("<divclass='div1'></div>");
            // A包裹B
           $(".div2").wrapInner("<span class='span2'>Hello Iam span2</span>");
           
            // .red被<i></i>包裹
           $(".red").wrapInner("<i></i>");
        </script>
    </body>
</html>

=======================================
<body>
        <h3>after()方法在元素之后插入内容</h3>
        <spanclass="green">我们交个朋友吧！</span>
        <div class="div1">
            <input type="text"value="t1"/>
            <input type="text"value="t4"/>
        </div>
        <scripttype="text/javascript">
            var $html1 ="<span class='red'>兄弟。</span>";
            $(".green").after($html);
           
            var $html2 = "<inputtype='text' value='t2'/>";
            var $html3 = "<inputtype='text' value='t3'/>";
           
            var $firstText = $(".div1:text:first-child");
            var $lastText = $(".div1:text:last-child");
           
            $firstText.after($html2);
            $lastText.before($html3);
 
        </script>
    </body>
=============================================
//页面初始化
$(document).ready(function(){})等价于$(function(){});
 
//绑定事件
$(selector).bind("event",function(){});
$(selector).on("event",function(){});
$(selector).live("event", function(){}); //可绑定动态元素（从 jQuery 1.7 开始，不再建议使用 .live()方法。1.9不支持.live()，本节代码编辑器里的js引用版本改为了1.8。）
 
//一次绑定多个事件，events中间用空格隔开
$(selector).bind("event1event2", function(){});
 
//解绑事件
$(selector).unbind("event");
 
//绑定一次事件
$(selector).one("event",function(){});
 
//触发事件
$(selector).trigger("event");
 
//hover,over
$(selector).hover(overFunc(){}，outFunc(){});
 
//focus(), blur()得到/失去焦点
 
//Toggle,会toggle selector指定的元素
$(selector).toggle(func1(){},funct2(){}, func3(){});
 
//显示,隐藏
// speed:毫秒; callback:完成之后调用
$(selector).hide(speed,[callback])
$(selector).show(speed,[callback])
 
//上划,下划
$(selector).slideUp(speed,[callback]) //应用于显示元素
$(selector).slideDown(speed,[callback]) //应用于隐藏元素
 
//上划下划切换
$(selector).slideToggle(speed,[callback])
 
//淡入淡出
$(selector).fadeIn(speed,[callback]) //应用于隐藏元素
$(selector).fadeOut(speed,[callback]) //应用于显示元素
$(selector).fadeTo(speed,opacity,[callback]) //指定透明度
 
//动画, callback中可再执行其他动画
$(selector).animate({params},speed,[callback])
//停止动画参数为bool
$(selector).stop([clearQueue],[goToEnd])
//延迟动画
$(selector).delay(duration)

==================================
// load
$(selector).load(url,[data],[callback])
 
//getJSON
jQuery.getJSON(url,[data],[callback])或
$.getJSON(url,[data],[callback])
 
//getScript
jQuery.getScript(url,[callback])或
$.getScript(url,[callback])
 
// get
$.get(url,[callback])
 
// post
$.post(url,[data],[callback])
=================================
 
//使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：
$(selector).serialize()
 
//使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
 
=====================================
//生成JSON对象
//var jsonStr='[{"姓名": "李晓明", "分数":99},{"姓名": "李二","分数":86 }]';
$.parseJSON(jsonStr);

 $("#btnShow").bind("click",function () {
                    var $this = $(this);
                   $.getJSON("http://www.imooc.com/data/sport.json",function(data){
                       $this.attr("disabled", "true");
                       
                        $.each(data, function(index, sport) {
                            //if(index==3)
                           $("ul").append("<li>" +sport["name"] + "</li>");
                        });
   
                    });
                })

    <body>
        <div id="divtest">
            <div class="title">
                <spanclass="fl">我最喜欢的一项运动</span>
                <spanclass="fr">
                    <inputid="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
        </div>
       
        <scripttype="text/javascript">
            $(function(){
               $("#btnShow").bind("click", function(){
                    var $this = $(this);
                   $.getJSON("http://www.imooc.com/data/sport.json",function(resultData){
                       
                       $($this).attr("disabled", true);
                        $.each(resultData,function(i, data){
                           $("ul").append("<li>" + data["name"]+ "</li>");
                        })
                    })
                });  
            })
        </script>
    </body>

======================================
//返回bool,检测contained是否在container内
$.contains(container, contained);

// 触发事件时传递参数：代码来自:http://stackoverflow.com/questions/3273350/jquerys-click-pass-parameters-to-user-function
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);
// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").attr('value', 'Save'); //versions older than 1.6

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").prop('value', 'Save'); //versions newer than 1.6

<!-- Different button types-->
<button id='btnAddProfile' type='button'>Add</button>
$("#btnAddProfile").html('Save');

yuxuac

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery - 基础知识（待整理）

// 本元素相邻的label元素：$("p+ label") // 本元素之后的所有同级label元素：$("p~ label") // 本元素下层中的所有span元素$("div span") // 本元素下第一层中的所有span元素$("div> span") // 本元素（class="div1"）下第一个li元素/最后一个li元素/奇，偶
复制链接

扫一扫

专栏目录