[JavaScript知识库]网页设计实验报告三之使用jQuery

网页设计实验报告三之使用jQuery

1.改变第二P的字体大小，变为18px，蓝色，斜体
我之前是写法如下，但是不知道为什么不能添加上样式

$("p:eq(2)").css({"font-size":"18px","color":"blue",
					"font-style":"italic"});

后来发现:eq()的下标index是从0开始的，改成如下代码就好

$("p:eq(1)").css({"font-size":"18px","color":"blue",
					"font-style":"italic"});

还有另外一种想法是：第一个p的后面一个，所以下面的代码可以实现同样的效果

$("p:first").next().css({
					"font-size":"18px","color":"blue",
					"font-style":"italic"});

2.所有的元素（可不包括内容2元素），鼠标经过时背景为#FF00，离开后变会黄色
错误写法：

$("h2,div,ul,li,p").live({
    mouseover:function(){
     $(this).css("background-color","#FF00");
   },
    mouseout:function(){
     $(this).css("background-color","yellow");
    }
  })

但是将live改为bind就可以了，这里我不太懂为什么。请求各位大佬解释以下。

另一种做法是不用这个bind，直接mouseover，mouseout也是可以的

$("h2,div,ul,li,p").mouseover(function(){
			 $(this).css("background-color","#FF0");
				});
			$("h2,div,ul,li,p").mouseout(function(){
			 $(this).css("background-color","white");
				});

3.为按钮”gogo”添加点击事件，当点击时，ID为” myBody”的div，向上收起来；再次点击，这个div向下展开出现
错误写法：

可能是因为这个mybody的id就是代表这个div，那就把div删除
在做这个实验的时候发现有同学跟我的代码一样但是ta的不能添加这个功能，可能是因为版本的问题。我用的是DW的2019版本。

4.用jQuery实现计算功能：在一个输入框内输入数字，按下下拉框的运算符号，再向输入框内填入数字，按下按钮再第三个输入框得出结果并且清除前面两个输入框的数字
别着急复制啊！看上去没什么问题但是就是不能计算。

$("cal").click(function(){
    var first = $("#d1").val();
    var second = $("#d2").val();
    var third = $("#d3").val();
    var jisuan = $("#op").val();
    if(jiusan == "+"){
     return third = parseFloat(frist) + parseFloat(second);
    }
    if(jisuan == "-"){
     third = parseFloat(frist) - parseFloat(second);
    }
    if(jisuan == "*"){
     third = parseFloat(frist) * parseFloat(second);
    }
    if(jiusan == "/"){
     if(second == "0")
      alert("0不能作为分母");
     else
      third = parseFloat(first) / parseFloat(second);
    }
    $("#d3").val() = third;
   });

先检查你的一些变量名有没有打错，DOM对象有没有加上id选择器的#符号等等。
我这里就是first打错了！（欲哭无泪，我还找了好久的解决办法结果是打错变量名了）
还有一个错误是val()函数用法错误，要更改某个id的值应该是

$('"id名").val(更改值)

上面那个题的答案：

$("#cal").click(function(){
				var first = $("#d1").val();
				var second = $("#d2").val();
				var jisuan = $("#op").val();
				var third = $("#d3").val();
				if(jisuan == "+"){
					third = parseFloat(first) + parseFloat(second);
				}
				if(jisuan == "-"){
					third = parseFloat(first) - parseFloat(second);
				}
				if(jisuan == "*"){
					third = parseFloat(first) * parseFloat(second);
				}
				if(jisuan == "/"){
					if(second == "0")
						return alert("0不能作为分母");
					else
						third = parseFloat(first) 
								/parseFloat(second);
				}
				$("#d3").val(third);
				$("#d1", "#d2").val('');
			});

id为cal是按钮的id，id为op为option的id，id为d1,d2,d3分别是三个输入框的id。
以上是我在做关于jQuery实验是所出现的问题，欢迎各位大佬前来指教！