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

时间: 2024-11-03 21:11:28

jQuery(20161108)的相关文章

玩转web之JQuery(二)---改变表单和input的可编辑状态(封装的js)

var FormDeal = { /** * 功能 :将表单的所有input都设为可编辑的 *@param 要操作表单的id */ formWritable: function (formId) { $("#"+formId+" input,textarea").removeAttr("readonly"); $("#"+formId+" input,textarea").css('backgroundCo

Jquery(一)—— 样式篇(转)

Jquery(一)--样式篇1.$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码, 因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. 2.jQuery对象与DOM对象 DOM对象:var p = document.getElementById('imooc'); jQuery对象:var $p = $('#imooc');  $p是一个类数组对象 3.jQuery对象转化

强大的JQuery(三)--操作html与遍历

前两篇博客讲到了JQuery的基础知识以及其动画效果,本篇将为大家介绍jquery操纵html以及jquery的遍历. 一.jquery操作html 1.获取内容和属性 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 attr()- 方法用于获取属性值. 实例: <span style="font-size:18px;">$("#btn1").cl

Jquery(一)—— 样式篇

Jquery(一)--样式篇1.$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码, 因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. 2.jQuery对象与DOM对象 DOM对象:var p = document.getElementById('imooc'); jQuery对象:var $p = $('#imooc');  $p是一个类数组对象 3.jQuery对象转化

强大的JQuery(一)--基础篇

JQuery是一个优秀的Javascript框架,是轻量级的js库,使用jQuery将极大的提高编写javascript代码的效率,,让写出来的代码更加优雅,更加健壮. 学好了jquery,我们相当于站长了巨人的肩膀上. 我将分三篇博客为大家介绍jquery,本篇博客将主要介绍jquery的基本语法.智能感知.选择器和事件. 一.基本语法 <html> <head> <script type="text/javascript" src="Scri

从零开始,DIY一个jQuery(2)

在上篇文章我们简单实现了一个 jQuery 的基础结构,不过为了顺应潮流,这次咱把它改为模块化的写法,此举得以有效提升项目的可维护性,因此在后续也将以模块化形式进行持续开发. 模块化开发和编译需要用上 ES6 和 rollup,具体原因和使用方法请参照我之前的<冗余代码都走开——前端模块打包利器 Rollup.js 入门>一文. 本期代码均挂在我的github上,有需要的童鞋自行下载. 1. 基本配置 为了让 rollup 得以静态解析模块,从而减少可能存在的冗余代码,我们得用上 ES6 的解

【学习笔记】锋利的jQuery(四)AJAX

一.load()方法 /* *如果没有参数传递,采用GET方式传递 *如果有参数,则自动转换成POST方式传递 *无论Ajax是否请求成功,请求完成后回调函数触发 */ load("test.html") load("test.html .para") //加载html里中有para类的DOM load("test.php",{name:"rain",age:"22"},function(responseT

javaScript 笔记(5) --- jQuery(上)

这节整理整理 iquery.js 相关的内容... 目录 --- jQuery 语法 --- 文档就绪事件 --- jQuery 选择器 --- jQuery 事件 --- jQuery 效果 jQuery 语法:jQuery 语法是通过选取(查询,query) HTML 元素,并对它们执行"操作"(actions). jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合. 基础语法:$(selector).action() 美元符号定义 jQuery 选择符(sele

锋利的jQuery(1)——DOM对象与jQuery对象的转换

1.认识jQuery DOM对象:即文档对象模型 jQuery对象:通过jQuery包装DOM对象后产生的对象.这是jQuery对象所特有的,在jQuery对象中无法使用DOM对象的任何方法,同时DOM对象也不能使用jQuery对象的方法.(这也是我自己在写代码的时候经常弄混的一条) DOM对象和jQuery对象的互换:一般的在jQuery对象前面加上$ jQuery对象转换成DOM对象: Jquery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象 //代码如下 va