[JavaScript知识库]JQuery

jQuery

<script src='jquery.js'></script>
<script>
	var mydiv = $('#mydiv');
    mydiv.css(width="");
</script>

关系：JQuery的本质是JS，对JS功能的扩展

JQuery与JS的相互转换

1. JS对象 => JQ对象

   $(‘JS对象’)

2. JQ对象 => JS对象

   JQ对象[0]

<script>
	// 需求：给div设置一个title属性
    // mydiv.setAttribute('title','hello')
    
    // JS对象 => JQ对象
    var mydiv = document.getElementByid('mydiv');
    // 给JS对象包裹一层$()
    $(mydiv);
    
    // JQ对象 => JS对象
    $('#mydiv')[0]
</script>

解决冲突

1. JQuery == $

2. 让出$符号

   JQuery.noConfilter()

*页面加载完成后

1. $(document).ready(function(){……})

   省略：$().ready(function(){……})

   省略：$(function(){……})

2. 与window.onload的区别：

   onload：表示页面内容全部加载完成

   ready：表示页面加载结构全部完成。不包含媒体（如：图片、视频、音频……）

   ready先执行，onload后执行

   ready可以写多次

选择器

注：伪类不适用

<script>
	// 标签选择器
    $('ul').css('color','red')
    // 类选择器
    $('li.five').css()
    // ID选择器
    $('#four').css()
    // 后代选择器
    $('ul li').css()
        // 子级选择器
        $('ul > li').css('color','orange')
        //相邻兄弟选择器
        $("#woniu + a").css("color", "orange");
        // 兄弟选择器
        $("#woniu ~ a").css("color", "orange");
        // 上一个兄弟节点
        $('.four').prev('li').css("color", "orange");
        // 下一个兄弟节点
        $('.four').next('li').css("color", "orange");
        // 所有上兄弟节点
        $('.four').prevAll('li').css("color", "orange");
        // 所有下兄弟节点
        $(".four").nextAll("li").css("color", "orange");
        //所有的兄弟节点
        $(".four").siblings().css("color", "orange");
        // 等于 eq(下标)
        $("a:eq(0)").css("color", "orange");
        // 获取第一个元素
        $("li:first").css("color", "orange");
        // 获取最后一个元素
        $('li:last').css("color", "orange");
        // 除了
        $('li:not(li:last)').css("color", "orange");
        // 偶数
        $('li:even').css("color", "orange");  // 从0开始
        // 奇数
        $('li:odd').css("color", "orange");
        // 大于
        $('li:gt(2)').css("color", "orange");
        // 小于
        $("li:lt(2)").css("color", "orange");
</script>

可见性过滤选择器

/*
	display:none;
	visibility:hidden;
	opacity:0;
	hidden
	type:hidden
*/
// 找到所有看不见的标签：opacity、visibility 除外
console.log((li:hidden))
// :visible可以找到所有看得见的标签：包括opacity、visibliity：hidden隐藏的元素
console.log($("body :visible"));

内容过滤选择器

<script>
    // 包含某个文本的div 
	$('li:contents('我的').css()')
    // 不包含任何子节点的div
    console.log($(div.empty));
    // has()包含span的div标签
    $('div:has(span)').css()
    // :parent 含有子节点的标签
    $('div:parent').css({
        color : red;
    })
</script>

边框染色，默认跟着字的颜色变化

属性选择器

<script>
    //寻找带有href属性的a标签
    $("a[href]").css('color','red');
    //寻找href属性值等于mother的a标签
    $("a[href=mother]").css('background','yellow');
    //寻找href属性值不等于mother的a标签
    $("a[href!=mother]").css('background','pink');
    //寻找href属性值以http开头的a标签
    $("a[href^=http]").css('background','yellowgreen');
    //寻找href属性值以com结尾的a标签
    $("a[href$=com]").css('font-weight','900');
    //寻找href属性值包含字母o的a标签
    $("a[href*=o]").css('font-weight','400');   
</script>

表单选择器

<script>
    //:input寻找所有的表单标签
    console.log($(":input"))

    //根据input的type寻找表单元素
    console.log($(":text"));
    console.log($(":password"));
    console.log($(":radio"));
    console.log($(":checkbox"));

    //寻找按钮
    console.log($(":submit"));
    console.log($(":reset"));
    console.log($("button[type=button]"));

    //文件上传
    console.log($(":file"));

    //查找被禁用的input元素
    console.log($("input:disabled"));

    //查找未被禁用的input元素
    console.log($("input:enabled"));

    //寻找被选中的那些元素(单选框、复选框、下拉菜单)
    console.log($(":checked"));
    //下拉菜单中被选中的元素
    console.log($(":selected"));
</script>

Each

<script>
	    //each():既可以遍历jquery的元素集合，也可以遍历普通原生数组
    $("h1").each(function (index, element) {
      console.log(index, element);
    });

    var arr = [5, 6, 7, 8];
    $.each(arr, function (index, element) {
      console.log(index, element);
    });
</script>

attr

<script>
    //保存一个属性
    $("a").attr("title","爱你");

    //获取一个属性
    console.log($("a").attr("title"))

    //保存多个属性
    $("a").attr({
        id:"woniu",
        class:"xiao woniu"
    })

    //删除属性
    $("a").removeAttr("class")
</script>

prop

    <script>
      //如果设置了checked，attr获取的结果也是checked
      //如果没有设置checked，attr获取的结果是undefined
      console.log($("input").attr("checked"));
      console.log($("input").attr("disabled"));

      //prop针对于单属性比较合适，返回true或false结果
      console.log($("input").prop("checked"));
      console.log($("input").prop("disabled"));
</script>

CSS

    <script>
      console.log($("div").css("width"));
      // 使用驼峰命名法，可以不加引号
      $("div").css({
        backgroundColor: "red",
        borderRadius: "20px",
      });
      // 使用数组的方式查询
      console.log($("div").css(["width", "height", "background-color"]));
    </script>

Class

    <script>
      // toggle 切换
      $("div").addClass("a b");
      $("div").removeClass("a");
      $("div").toggleClass("c");
      $("div").toggleClass("c");
    </script>

text_val

    <script>
      //获取或设置文本框的值 value
      $("input").val("大家好");
      console.log($("input").val());

      //取出div里面的所有内容，包括html
      //设置div里面的内容，并解析html标签的
      console.log($("div").html());

      //取出div里面的所有内容，不包括html
      //设置div里面的内容，不解析html标签
      console.log($("div").text());
      $("div").html("<b>" + $("div").html() + "</b>");
    </script>

Size

<script>
    var div = $("div");
    console.log(div.width());//原始宽度
    console.log(div.innerWidth());//原始宽度 + padding
    console.log(div.outerWidth());//原始宽度 + padding + border
    console.log(div.outerWidth(true));//原始宽度 + padding + border + margin
    console.log($(window).height());//窗口的可视高度
    console.log($(document).height());//文档高度


    div.mouseover(function(){
        $(this).css('background','yellow');
    })
</script>

Offset

<script>
    //到body的距离：left，top
    console.log($("p").offset().left);
    //到最近一个设置了定位的祖先元素距离：left，top
    console.log($("p").position().left);
</script>