javaWeb学习笔记 --- jQuery

jQuery

jQuery概述

  1. 什么是jQuery

    jQuery 是一个"写的更少,但做的更多"的轻量级 JavaScript 函数库。

  2. jQuery的优势

    1. 可以简化JavaScript代码
    2. 可以像css那样获取元素
    3. 可以修改css来控制页面效果
    4. 可以兼容常用的浏览器
  3. jQuery版本支持

    • jQuery分为很多版本,还分为未压缩版和压缩版,根据需要选择对应的版本进行下载
      • 1.x 支持常用的浏览器和IE6+
      • 2.x 支持常用的浏览器和IE9+
      • 3.x 支持常用的浏览器和IE9+
    • 注意: jQuery不兼容老版本; 因为jQuery升级除了会做一些内部优化之外,还会删除以前的一些代码,比如删除一些方法,或者是添加一些新的方法。所以在升级之后, 以前的代码可能会无法执行
  4. jQuery引入

    • jQuery类库其实就是一个普通的js文件,和在html中引入js文件方式是一样的
    <head>
        <meta charset="utf-8"/>
        
        <script type="text/javascript" src="js/jQuery-1.4.2.js">script>
        <script>
            //在整个html文档加载完之后立即执行
            $(function(){
                alert(1);
            });
            // 等价于
            $(document).ready(function(){
                alert(1);
            });
        script>
    head>
    

jQuery语法

  1. $符号

    • $符号等价于jQuery, 是jQuery单词的简写

    • 例如:$()相当于调用jQuery(),该函数会返回一个jQuery对象, 这个jQuery对象中包含零个或多个html元素, 比如: $(“div”),可以通过jQuery中提供的方法来操作这些匹配的元素,比如$("div").remove()

  2. 文档就绪事件

    所谓的文档就绪事件, 就是在整个html文档加载完之后立即触发, 执行一些操作,格式如下:

    $(document).ready(function(){
    	//xxxx
    });
    

    该函数会在整个html文档加载完之后立即执行,其作用相当于:
    window.onload = function(){ //xxx }

    其简写形式为:

    $(function(){
    	//xxxx
    });
    
  3. DOM对象和jQuery对象互相转化

    • JS对象只能调用JS上提供的属性和方法, 不能调用jQuery提供的属性和方法,如果非要使用,必须将JS对象转化成jQuery对象,反之亦然。

    dom对象转jQuery对象:

    var dom = document.getElementById("username");
    var $jQuery= $(dom);   // js对象转成jQuery对象
    

    jQuery对象转dom对象:

    var $jQuery = $("#username");
    // 方式一: 
    var dom1 = \$jQuery[0];    // jQuery对象转成js对象
    //方式二:
    var dom2 = \$jQuery.get(0);  // jQuery对象转成js对象
    

    示例:

    <script>
        /*通过点击按钮获取用户名的值,分别将jQuery对象转换成js对象和js对象转换为jQuery对象*/
        // js对象转为jQuery对象
        $(function(){  // 文档就绪事件
            // 动态添加click事件
            $("#btn").click(function(){
                // 获取js对象
                var inp = document.getElementById("username");
                // 将js对象转化为jQuery对象
                var $jq = $(inp);
                alert($jq.val());
    
                // 将jQuery对象转为js对象
                var inp2 = $jq[0]
                // 或者
                var inp3 = $jq.get(0)
                alert(inp2.value)
            })
        });
    
    script>
    

jQuery选择器

基本选择器

  1. 元素名选择器
    $("div") – 匹配所有的div元素

  2. class选择器
    $(".c1") – 匹配所有class值为c1的元素
    $("div.c1") – 匹配所有class值为c1的div元素

  3. id选择器
    $("#d1") – 匹配所有id值为d1的元素
    $("div#d1") – 匹配所有id值为d1的div元素

  4. *号匹配符
    $("*") – 匹配所有的元素

  5. 多元素选择器
    $("div,span,#d1,.c1") – 匹配所有的div/span元素以及id值为d1的元素和class值为c1的元素

层级选择器

如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。

  1. $("div span") – 匹配div下所有的span元素
  2. $("div>span") – 匹配div下所有的span子元素
  3. $("div+span") – 匹配div后面紧邻的span兄弟元素
  4. $("div~span") – 匹配div后面所有的span兄弟元素
<script type="text/javascript">
	$().ready(function() {
		/* ---------层级选择器练习--------- */
		//改变  内所有 
的背景色为 #F08080", id="b1" $("#b1").click(function(){ $("body div").css("background-color","#F08080"); }); //改变 内子
的背景色为 #FF0033",id="b2" $("#b2").click(function(){ $("body > div").css("background-color","#FF0033"); }); //改变 id 为 one 的下一个
的背景色为 #0000FF" id="b3" $("#b3").click(function(){ $("#one + div").css("background-color","#0000FF"); }); //改变 id 为 two 的元素后面的所有兄弟
的元素的背景色为 #9ACD32",字体颜色为蓝色 id="b4" $("#b4").click(function(){ $("#two ~ div").css({"background-color":"#9ACD32", "color":"blue"}); }); //改变 id 为 two 的元素所有
兄弟元素(包括前面的和后面的)的背景色为 #FF6347",字体颜色为蓝色 id="b5" // 水平遍历 // siblings()(所有同层元素) next()(下一个) nextAll()(后面所有的) prev()(前一个) prevAll()(前面所有的) $("#b5").click(function(){ // 所有 $("#two").siblings("div").css({"background-color":"#FF6347", "color":"blue"}); }); }) script>

基本过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 ":" 开头

  1. $("div:first") – 匹配所有div中的第一个div元素

  2. $("div:last") – 匹配所有div中的最后一个div元素

  3. $("div:even") – 匹配所有div中索引值为偶数的div元素,0开始

  4. $("div:odd") – 匹配所有div中索引值为奇数的div元素,0开始

  5. $("div:eq(n)") – 匹配所有div中索引值为n的div元素,0开始

  6. $("div:lt(n)") – 匹配所有div中索引值小于n的div元素,0开始

  7. $("div:gt(n)") – 匹配所有div中索引值大于n的div元素,0开始

  8. $("div:not(.one)") – 匹配所有class值不为one的div元素

内容选择器

  1. $("div:contains('abc')") – 匹配所有div中包含abc内容的div元素
    如:

    xxxabcxx

  2. $("div:has(p)") – 匹配所有包含p元素的div元素
    如:

  3. $("div:empty") – 匹配所有内容为空的div元素
    如:

  4. $("div:parent") – 匹配所有内容不为空的div元素
    如:

    xxxxx

可见选择器

  1. $("div:hidden") – 匹配所有隐藏的div元素

    让所有隐藏的div元素显示: $("div:hidden").show();

  2. $("div:visible") – 匹配所有可见的div元素

属性选择器

  1. $("div[id]") – 匹配所有具有id属性的div元素
  2. $("div[id='d1']") – 匹配所有具有id属性并且值为d1的div元素
  3. $("div[id!='d1']") – 匹配所有id属性值不为d1的div元素
  4. $("div[id^='d1']") – 匹配所有id属性值以d1开头的div元素
  5. $("div[id$='d1']") – 匹配所有id属性值以d1结尾的div元素

子元素选择器

  1. $("div:nth-child(n)") – n从1开始, 匹配div中第n个子元素。
  2. $("div:first-child") –匹配div中第1个子元素。
  3. $("div:last-child") –匹配div中最后一个子元素。。。

表单选择器

  1. $(":input") – 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。
  2. $(":password") – 匹配所有的密码框
  3. $(":radio")– 匹配所有的单选框
  4. $(":checkbox") – 匹配所有的复选框
  5. $(":checked") – 匹配所有的被选中的单选框/复选框/option
  6. $("input:checked") – 匹配所有的被选中的单选框/复选框
  7. $(":selected") – 匹配所有被选中的option选项
<script type="text/javascript">
	$(function() {
		/* ---------表单选择器练习--------- */
		//改变所有:input 元素的背景色为 #F08080" id="b1"
		$("#b1").click(function(){
			// "input" 选中所有input标签
			// ":input" 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button
			$(":input").css("background-color","#F08080")
		});
		
		//弹出 :radio 元素的个数" id="b3"
		$("#b3").click(function(){
			alert($(":radio").length)
		});

		
		//弹出所有 :checked 元素的value值" id="b4"
		$("#b4").click(function(){
			// each遍历所有选中的元素,并对每个元素执行function()
			$(":checked").each(function(){
				// js中this表示当前元素,在jquery中用$(this)表示
				alert($(this).val())
			});
		});
	})
script>

文档操作

  • parent()
    $("#d1").parent() – 获取id为d1元素的父元素

  • parents()
    $("#d1").parents() – 获取id为d1元素的祖先元素
    $("#d1").parents("tr") – 获取id为d1元素的tr祖先元素

  • next()
    $("div").next() – 获取所匹配元素后面紧邻的兄弟元素
    $("div").next("span") – 获取所匹配元素后面紧邻的span兄弟元素

  • nextAll()
    $("div").nextAll() – 获取所匹配元素后面所有的兄弟元素
    $("div").nextAll("span") – 获取所匹配元素后面所有的span兄弟元素

  • prev()
    $("div").prev() – 获取所匹配元素前面紧邻的兄弟元素
    $("div").prev("span") – 获取所匹配元素前面紧邻的span兄弟元素

  • prevAll()
    $("div").prevAll() – 获取所匹配元素前面所有的兄弟元素
    $("div").prevAll("span") – 获取所匹配元素前面所有的span兄弟元素

  • siblings()
    $("div").siblings() – 获取所匹配元素前后所有的兄弟元素
    $("div").siblings("span") – 获取所匹配元素前后所有的span兄弟元素

  • find(“span”) – 获取所匹配元素后代中的所有span元素

  • each(function(){}) – 遍历选中元素

  • $(“

    abc

    ”) – 创建一个游离的p元素。
  • append()
    $("div").append("内容") –为所匹配元素追加一个span子元素

  • remove()
    $("div").remove() – 删除所匹配元素

  • html()
    $("div").html() – 获取所匹配元素的html内容
    $("div").html("xxx") – 为所匹配元素设置html内容

  • text()
    $("div").text() – 获取所匹配元素的文本内容
    $("div").text("xxx") – 为所匹配元素设置文本内容

  • attr()
    $("div").attr("id") – 获取所匹配元素的id属性值
    $("div").attr("id", "xx") – 为所匹配元素设置id属性

  • css
    $("div").css("width") – 获取所匹配元素的width样式属性值
    $("div").css("width", "200px") – 为所匹配元素设置width样式属性
    $("div").css({"width":"200px", "color":"red","font-size":"24px" }) ; – 为所匹配元素设置多个样式属性

事件

  • click()
    $("div").click(function(){}) – 为所匹配元素绑定点击事件

  • blur()
    $("input").blur(function(){}) – 为所匹配元素绑定失去输入焦点事件

  • focus()
    $("input").focus(function(){}) – 为所匹配元素绑定获得输入焦点事件

  • change()
    $("select").change(function(){}) – 为所匹配元素绑定选项切换事件

  • ready()
    $(document).ready(function(){}) – 文档就绪事件
    其作用相当于: window.onload = function(){}
    简写形式为:
    $(function(){}) – 在整个文档加载完成后立即执行

效果

  • show()
    $("div").show() – 将隐藏元素设置为显示(底层操作的是display)

  • hide()
    $("div").show() – 将显示元素设置为隐藏(底层操作的是display)

  • toggle()
    $("div").toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏,如果元素隐藏则设置为可见

JSON

json是什么

  • json是JavaScript提供的一种轻量级数据交换(存储)格式

创建JS对象:

var person = {
    "name":"lili",
    "age": 18,
    "gender": "女"
}

json语法

  • {}括起来的就是一个对象
  • json的属性名只能用双引号引起来,不能用单引号
  • json的属性值:
    1. 数字(整数或浮点数)
    2. 字符串(在双引号中)
    3. 逻辑值(true 或 false)
    4. 数组(在方括号中)
    5. 对象(在花括号中)
    6. null

json和xml比较

  • 可读性: xml比json具有更好的可读性
  • 解析度: xml解析麻烦, 而json是js提供的对象, 可以非常方便的进行解析
  • 流行度: xml虽然发展了很多年,但是由于json易于操作,所以在某些场景中json比xml更常用

7.4.json格式:

格式一:

var p1 = {
    "name" : "lili",
    "age" : 18,
    "gender" : "女"
}

格式二

var p2 = {
    "name" : "Sam",
    "age" : 22,
    "friends" : ["Kim","Potter"]
}

格式三

var p3 = {
    "name" : "Sam",
    "age" : 22,
    "friends" : [{"name":"Kim","age":20},{"name":"Potter","age":22}]
    "girlfriend": {"name":"lili","age":20}

}

你可能感兴趣的:(java,jquery,javascript,前端)