Javascript第五章获取DOM对象的属性第七课

注意：其中

function $(id){return document.getElementById(id);}

表示：这个就是个方法, 方法名字叫$ 参数为id. 这个是元素id.
传入这个id, 会帮你拿到你的html代码元素里相应的id的对象.

document.getElementById(id)　是获得id这个元素的。

相当于定义了一个方法，这样用 $(“id0”)就得到id为id0的控件了。

而这种定义的方法仅仅是在没有Jquery的工程中运用的，当你用啦$的话，再用Jquery的话，那么你所有关于Jquery的代码就都不能用啦，所以这里我们

不要被他的$唬住了，这只是一个变量名，随便取的，你用x也行，这样用的时候就是x(“id0”)。

将以上代码改成以下代码，即将$改成x即可

function x(id){

return document.getElementById(id);

}

$是jquery里面的运算符

第二种方法：原生js

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>

	<script type="text/javascript">
		
		function doChange(){
			if(document.getElementById("baidu").checked){
			document.getElementById("myFrm").action="https://www.baidu.com/s";
			
				document.getElementById("btn").value="百度搜索";
				document.getElementById("logo").src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"
				document.getElementById("txtSearch").name="wd";
				
				
			}else if(document.getElementById("goole").checked){
				document.getElementById("myFrm").action="https://www.sina.com.cn/";
				document.getElementById("btn").value="新浪网";
				document.getElementById("logo").src="img/google-search.png";
			}else{
				document.getElementById("myFrm").action="https://cn.bing.com/";
				document.getElementById("btn").value="必应搜索";
				document.getElementById("logo").src="img/google-search.png";
				document.getElementById("txtSearch").name="q";
			}			
		
		}
//function doChange(){
//	
//	var a=$("baidu").checked;
//	console.log(a)
//}
//		function $(name){
//			
//			return document.getElementById(name);
//		}
//	
	</script>
</head>
<body>
	<form action="https://www.baidu.com/"  id="myFrm">
		
		<input type="radio" name="search" id="baidu" checked="checked" onclick="doChange();"/>
		<label for="baidu">百度</label>
	
			<input type="radio" name="search" id="goole" onclick="doChange();" />
			<label for="goole">谷歌</label>
		
		<input type="radio" name="search" id="bing" onclick="doChange();" />
			<label for="bing">必应</label>
		
			</br>
			<img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png" style="height: 80px;width: 160px;" id="logo"/>
			<input type="text" name="wd" id="txtSearch" placeholder="请输入查询关键字" />
		<input type="submit" value="百度搜索" id="btn"/>
	</form>
</body>
</html>

结果：

Javascript第五章获取DOM对象的属性第七课

功能：在文本框输入你想查询的内容，
百度规则：name=wd action="https://www.baidu.com/s

必应规则：name=q action=“https://cn.bing.com/search”

解释原因：百度

Javascript第五章获取DOM对象的属性第七课

必应：

Javascript第五章获取DOM对象的属性第七课

q= 和wd = 后面分别对应的你查询的内容

Javascript第五章获取DOM对象的属性第七课

相关推荐