jquery选择器整理

最新推荐文章于 2019-12-15 00:01:01 发布

easa

最新推荐文章于 2019-12-15 00:01:01 发布

阅读量358

点赞数 1

分类专栏： jquery 文章标签： jquery 选择器整理

本文链接：https://blog.csdn.net/qq_38031539/article/details/73123232

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery Selectors

Basics 基本选择器

$('code')
    $('#myid')
    $('.myclass')
    $('*')    通配 *
    $('code, #myid, .myclass')  交集选择器

Hierarchy 基本层级

$('div code')  派生选择器
    $('li > ul')   直接子元素选择器
    $('strong + em')  紧邻兄弟选择器
    $('strong ~ em')   ~ 后续兄弟选中

Basic Filters 基本过滤器并且选择器

$('li:first')  // first
$('li:last')   // last
$('li:not(li:first)')   // not(节点) 除了这个节点
$('li:even')    // even 偶数
$('li:odd')     // odd  奇数
$('li:eq(1)')   // eq(下标索引值 0)
$('li:gt(2)')   // gt: 大于一个范围
$('li:lt(2)')   // lt：小于一个范围
$(':header')    // header 标题
$(":header.pear")  // 获取下一层类
$(':animated')  
// lt gt 范围使用
    $("li:gt(4):lt(3)").css("color","blue");
// 可以在一些类前面加限制
    $("li.pear").css("background","orange");

Content Filters 内容过滤器

$('li:contains(second-level)')  // contains 包含内容
$(':empty')  // empty 控节点
$('li:has(a)')   // has(选择器)
$('p:parent')    // parent作为父节点存在的

Visibility Filters 可见性过滤器

$(':hidden') //display none
$(':visible') //display not none

$('li[class]')
$('a[xxx="self"]')
$('a[rel!="nofollow"]')
$('[class^="my"]')
$('[class$="my"]')
$('a[href*="zip"]')
$('a[rel][href][title="blog"]') 都满足 交集

Child Filters 子集过滤器

$('li:first-child')
$('li:last-child')
$('li:nth-child(even)')
$('li:nth-child(odd)')
$('li:nth-child(2)')
$('li:nth-child(2n)')
$('code:only-child')

Forms 表单

$(':input')
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':submit')
$(':image')
$(':reset')
$(':button')
$(':file')

Form Filters 表单过滤器

$('input:enabled')
$(':disabled')
$(':checked')  // checked 获取选框中被选中的内容
$(':selected')   // selected 选中下拉提交

筛选：

// eq()
    // $("span:eq(1)").css("background","red");
    // $("span").eq(0).css("background","red");

    // first() last()
    // $("span").first().css("font-size","40px");

    // parent()
    $("#sp").parent().css("background","gold");

    // siblings() 空所有兄弟  有内容限制条件
    $("#li04").siblings(".xiao").css("background","orange");

    // find() 查找后代元素
    $("div").find("#li04").css("font-size","40px");
    // filter:过滤
    // not：过滤的反义词
    // $("div").filter(".box").css("background","red");
    // $("div").not(".box").css("background","purple");

    // has ：包含
    // $("div").has("span").css("background", "red");
    // $("div").has(".box").css("background", "red");
    // 
    // $("span").filter("[title='hello']").css("background","red");
    // $("span").has("[title='hello']").css("background","red"); // 错误

    // children()孩子
    $("div").children().css("background","pink");

    // next() 下一个
    $("div").next().css("background","purple");

    // index()  index下标
    console.log($("#h").index());
    // 所有当前元素中兄弟节点中的位置

———————————————–
选项卡：

<!DOCTYPE html>
<html>
<head>
    <title>选项卡</title>
    <meta charset="utf-8">
    <style type="text/css">
    #bg div{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        display:none;
    }
    .active{
        background: orange;
    }
    </style>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>

<div id="bg">
    <input class="active" type="button" name="" value="财经" />
    <input type="button" name="" value="新闻" />
    <input type="button" name="" value="体育" />
    <div style="display: block;">财经报告内容</div>
    <div>新闻报告内容</div>
    <div>体育报告内容</div>
</div>
<script type="text/javascript">

    // 找到所有按钮
    $("#bg").find("input").click(function(){
        // 添加点击事件

        // 找到全部先设置为未选中
        $("input").attr("class","");
        // 找到属性 attr
        $(this).attr("class","active");

        // 所有div都隐藏
        $("#bg").find("div").css("display","none");

        $("#bg").find("div").eq($(this).index()).css("display","block");

    })
</script>
</body>
</html>

++++++++++++++++++++++++++++++++++++++++++++++++

// nextAll() 下面所有的兄弟节点，参数有筛选功能
    // $("span").nextAll("p").css("background","red");

    // prevAll() 上面所有的兄弟节点，参数有筛选功能
    // $("h2").prevAll("span").css("background","blue");

    // Until(): 截止
    // $("span").nextUntil().css("background","red");

==============================================

attr：
// 属性添加
    // $("div").attr("class","box");
    // $("div").attr("id","div1");
    // $("div").attr("title","123");

    // 添加类
    $("div").addClass("box bg");
    // 删除类
    $("div").removeClass("bg");
    // 添加删除共存
    $("div").click(function(){
        $("div").toggleClass("bg");
    })

$("div").width()   // width 
$("div").innerWidth()   // width + padding
$("div").outerWidth()   // width + padding + border
$("div").outerWidth(true)    width + padding + border + margin
$(window).scrollTop()  滚动距离

JQuery DOM Manipulation DOM操作

## 获取设定内容 [text(), html() and val()]
## 获取设定属性 [attr(),  removeAttr()]
## 获取设定 CSS Class [addClass(), removeClass(), hasClass(), toggleClass]
## 获取设定 CSS style [css()]

## append() 方法在被选元素的结尾插入指定内容。
 prepend() 方法在被选元素的开头插入指定内容。
##  appendTo()  把前面的放到后面 内容放在后面
    prependTo() 把前面的放到后面 内容放前 
    methods

## before() after() methods
## insertBefore()  插在前面
   insertAfter() 插在后面

## remove()  删除节点
   empty() 清空操作节点
  .detach() 移除被选元素，包括所有文本和子节点
detach()：跟remove（）方法一样，只不过删除后会保留这个元素的操作行为

## unwrap()  删除包装(删除父亲包装，不能删除body)
wrapInner() 内部包装 
wrap()   包装
, wrapAll() 整体包装
## target.replaceWith() and replaceAll(target)

## clone() 克隆新的事件和数据

JQuery Event Handlers event对象

* ready() : document.onload

* blur() : 当您离开某个元素时触发
* focus() : 在输入元素时触发。

* click() : 当你点击触发安元
* dblclick() : 双击元素时触发。

* mousedown() : 按下鼠标按钮时触发。
* mouseup() :当鼠标按钮被释放时触发
* mousemove() : 光标移动时触发。
* mouseover() : 当鼠标越过某个元素时触发。
* mouseout() : 当鼠标移动元素时触发。

* keydown() : 按下按键时触发。
* keypress() : 当按下键释放时触发。
* keyup() : 当释放密钥时触发。

* change() : 当元素被更改时触发。
* submit() : 按下提交按钮时触发。
#################################################
 offsetLeft 获取到屏幕左边距离
 position 定位的left值

JQuery Event Object Properties

* event.altKey : 事件属性返回一个布尔值。指示在指定的事件发生时，Alt 键是否被按下并保持住了。
* event.ctrlKey : 事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。
* event.data :  属性包含当前执行的处理程序被绑定时传递到事件方法的可选数据。
* event.keyCode : 包含最后按下的键的键码
* event.pageX : 返回X访问的鼠标坐标。
* event.pageY : 返回Y访问的鼠标坐标。
* event.screenX : 返回X访问相对于页面的鼠标坐标。
* event.screenY : 返回y访问相对于页面的鼠标坐标。
* event.shiftKey : 如果Shift键被按下，则值为true。
* event.target : 发出事件的元素名称。
* event.timeStamp : 包含时间戳，该列表在事件发生时列出。
* event.type : 发生的事件的类型

阻止默认事件

document.oncontextmenu=function(){ 
    return false; 
}

// :hover 链式运动
    $("#div1").hover(function(){
        // $("#div1").hide(3000);
        // 淡出
        // $("#div1").fadeOut(1000);
        // 淡出
        // $("#div1").fadeTo(1000,0.1);
        // 划入
        $("#div2").slideUp();
    },function(){
        // $("#div1").show(3000);
        // 淡入
        // $("#div1").fadeIn(1000);
        // $("#div1").fadeTo(1000, 1);
        // 划出
        $("#div2").slideDown();
    })

    // 淡入淡出共存
    $("#div2").click(function(){
        // $("#div1").fadeToggle();
        // $("#div1").fadeToggle(1000);
        $("#div1").fadeToggle("slow");
    })

// parents() :获取当前元素的所有祖先节点， 参数就是筛选功能
    // closest() : 获取最近的祖先节点（包括当前元素自身），必须写筛选参数，只能找到一个元素
    // $("#div2").parents(".box").css("background","red");

// 克隆clone（）

    $("#div1").clone(true).appendTo($("span"));

工具方法:
实例方法
1.有一个创建好的实例，单独个体添加方法
2.创建特点 $().css()$ ().html() $().val()

    类方法
    Math.floor() String.toSting()
    1.用类名去调用
    2.类方法可以是多个对象的方法
    jQuery.xxx() -> $.xxx()  
    不仅可以给JQ使用，也可以给原生JS使用： 工具方法

// $.type() 判断数据类型   console.log($.type(a));
// trim()去掉首尾空格   console.log("("+$.trim(str)+")");
工具方法:
// inArray() : 类似于indexOf 
// proxy():改变this的指向
// noConflict() : 防止冲突
// parseJSON 将字符串转json
// makeArray 
// console.log(arr.push(1)); // 获取类数组

JQuery UI 入门

Draggable:拖拽
Droppable:放置
Sortable:排序
Selectable:选择
Resizable:改变大小
Accordion:折叠菜单
dialog 对话框
slider 滑动条
Tablesorter 表格排序

# JQuery Animation  动画

基本动画 show hide toggle
show( speed, [callback])
hide( speed, [callback])
toggle( speed, [callback])
Speed: //number: 毫秒
(“slow”, “normal”, or “fast”)
预制动画
slideDown(speed, [callback])
slideUp(speed, [callback])
slideToggle(speed, [callback])
fadeIn( speed, [callback] )
fadeOut( speed, [callback] )
fadeTo(speed, opacity, [callback])
自定义动画
animate( params, [duration], [easing], [callback])
animate( params, options)
stop([clearQueue], [gotoEnd])

动画:
animate():
第一个参数：{} 运动的值和属性
第二个参数：时间（运动快慢）默认：400
第三个参数：运动形式只有两种 swing（慢快慢默认） linear（匀速）
第四个参数：回调函数

$("#div1").click(function(){
    $(this).animate({width:300,height:300}, 4000, "linear", function(){
    alert(1);
})

$("#div2").animate({width:300,height:300}, 4000, "swing", function(){
    alert(1);
    })
})

JQuery AJAX

load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

$.get( url, [data], [callback] )：使用GET方式来进行异步请求

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

$.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

$.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。

$.ajax({
    // the URL for the request
    url: "post.php",

    // the data to send (will be converted to a query string)
    data: {
        id: 123
    },

    // whether this is a POST or GET request
    type: "GET",

    // the type of data we expect back
    dataType : "json",

    // code to run if the request succeeds;
    // the response is passed to the function
    success: function( json ) {
        $( "<h1/>" ).text( json.title ).appendTo( "body" );
        $( "<div class=\"content\"/>").html( json.html ).appendTo( "body" );
    },

    // code to run if the request fails; the raw request and
    // status codes are passed to the function
    error: function( xhr, status, errorThrown ) {
        alert( "Sorry, there was a problem!" );
        console.log( "Error: " + errorThrown );
        console.log( "Status: " + status );
        console.dir( xhr );
    },

    // code to run regardless of success or failure
    complete: function( xhr, status ) {
        alert( "The request is complete!" );
    },

    beforeSend: function() {
    },
    cache: true //false
});

easa

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选择器整理

# jQuery Selectors## Basics 基本选择器 (‘code′)(‘code’) (‘#myid’) (‘.myclass′)(‘.myclass’) (‘*’) 通配 * $(‘code, #myid, .myclass’) 交集选择器 ## Hierarchy 基本层级 (‘divcode′)派生选择器(‘div
复制链接

扫一扫