jQuery（20161108）

Posted 2020-08-21 5572

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery（20161108）相关的知识，希望对你有一定的参考价值。

jQuery的引入包必须要在其他引入包的最上方，否则会出错。因为如果在页面加载完成后还未执行jQuery包，那么jQuery的引入包就没用了

如果浏览器报错：Uncaught Error: Bootstrap\'s javascript requires jQuery_...

就要注意文件引入的先后顺序，应该先引入jquery再引入bootstrap

//js或jquer y里面有数据存储的方式
//名字叫JSON
/* var json = {
code:"n001",
name:"张三",
js:{c:"p001",n:"回族"}
};

//取值用点或者是索引
alert(json["code"]);
alert(json.js.n);
*/

//去空格
/*var str = " hello ";
str = str.trim(); //重要非空验证的时候可以用来去空格，还可以在ajax返回值的时候去空格
alert(str.length);
*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--引入JQUERY包(要先引入jequery，再写js，否则有些功能无法实现，因为如果js在上面，加载完上面的js后并没有加载上jequery，有些功能就无法实现，，，，所以jequery要在所有的引入前面)    min:压缩版-->
<script src="jquery-3.1.1.min.js"></script>

<style type="text/css">
#a1{
    color:red;
    }
.aa{ width:100px; height:100px; background-color:#39F}
</style>

<title>无标题文档</title>
</head>

<body>

<div id="a1" class="tt" style="width:100px; height:200px;">11</div>

<div class="aa" bs="1">aaaa</div>
<div class="aa" bs="2">bbbbb</div>
<div class="aa" bs="3">ccccc</div>

<div name="cc"></div>
<div bs="1"></div>
<input type="text" id="p1" />
<input type="button" id="b1" value="挂事件" />
<input type="button" id="b2" value="移除事件" />
<script type="text/javascript">

    //JS
    //根据ID取元素,取到的是具体的元素
    //var a = document.getElementById("a1");
    //根据CLASS取 （取到的是数组）
    //var a = document.getElementsByClassName("aa");
    //根据标签名取
    //var a = document.getElementsByTagName("div");
    //根据name取
    //var a = document.getElementsByName("cc");    
    //alert(a); 
    
    //操作元素
    //操作内容
        //非表单元素    只能通过ID找
        //a.innerText = "hello"; 取值
        //a.innerHTML = "<span style=\'color:red\'>world</span>"; 赋值
        //表单元素  赋值 取值
        //a.value = "hello";
    //操作属性
        //a.setAttribute("bs","1");
        //a.getAttribute("bs");
        //a.removeAttribute("bs");
    //操作样式    样式表里的样式和js里的样式不一样;js只能获取内联的
        //a.style.color = red;
    
    //三个DIV隐藏
    //找到后交给一个变量存起来
    /*var a = document.getElementsByClassName("aa");
    
    for(var i=0;i<a.length;i++)
    {
        a[i].style.display = "none";
    }*/
    
    //事件    在标签里面直接加
    
    /**************************************************/
    
    //Jquery
    //根据ID找元素,取到的是JQUERY对象;$是选取元素的方法
    //var b = $("#a1");
    
    //根据CLASS取
    //var b = $(".aa");
    //alert(b.eq(0)); //取jquery对象用eq()取元素本身用[]
    
    //根据标签名取
    //var b = $("div");
    
    //根据属性筛选
    //var b = $("[name=aa]");
    
    //操作元素
    //操作内容    取值不给参数，赋值给参数
        //非表单元素
        //b.text();
        //b.html();
        //表单元素
        //b.val();
    //操作属性
        //b.attr("bs","1");    设置属性
        //b.attr("bs");    获取属性
        //b.removeAttr("bs"); 移除属性
    //操作样式    jquery还可以获取内嵌的和外部的
        //alert(b.css("color"));
        //b.css("font-size","50px");
     
    //alert(b[0]);  //取jquery对象用eq()取元素本身用[]
    
    
    //隐藏三个元素
    //$(".aa").css("display","none");
    
    //Jquery【加】事件    先找元素，找到之后挂上事件；     document：页面文档    匿名函数：function(e) {}    一般还是使用加
        
    //页面加载完成之后执行的事件    "#a1" 代表事件源 e代表事件数据
    $(document).ready(function(e) {
        
        /*//给a1加点击client
        $("#a1").click(function(){
                alert(\'aa\');
            })
        //给class为aa的所有元素加事件
        $(".aa").click(function(){
                //alert($(this).attr("bs"));
                $(".aa").css("background-color","#39F");
                $(this).css("background-color","red");
            })*/
            
        //第二种方式【挂】事件 bind("要绑定的事件名"，执行的方法)      unbind("要移除的事件名")
        $("#b1").click(function(){
                
                $("#a1").bind("click",function(){
                    
                    alert("我是挂上的事件");
                    
                    });
            
            })
        $("#b2").click(function(){
            
                $("#a1").unbind("click");
            })
            
        
        
    });
    
    
    
    
    
</script>



</body>
</html>

1108testjs.php

以上是关于jQuery（20161108）的主要内容，如果未能解决你的问题，请参考以下文章

jQuery应用代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

20161108

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）