假设你要设为焦点的id为yyy，例如<input type='text' id='yyy' />
然后在页面里先引入Jquery，然后自定义函数
<script type='text/javascript'>
$(function(){
yyy.focus()
})
</script>
CSS :focus 伪类CSS 参考手册
定义和用法
:focus 伪类在元素获得焦点时向元素添加特殊的样式。
注释：IE 浏览器不支持此属性。
说明
这个伪类应用于有焦点的元素。例如 HTML 中一个有文本输入焦点的输入框，其中出现了文本输入光标；也就是说，在用户开始键入时，文本会输入到这个输入框。其他元素（如超链接）也可以有焦点，不过 CSS 没有定义哪些元素可以有焦点。
a:link {color: #FF0000} /* 未访问的链接 */
a:focus {color: #00FF00} /* 获得焦点的链接 */
注释：伪类的名称对大小写不敏感。
注释：伪类可与 CSS 类配合使用：
a.red:visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
如果上面这个例子中的链接已被访问过，那么它会显示为红色。
实例
规定获得焦点的输入字段的颜色：
input:focus
{
color:yellow
}
<head><meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul,li{margin:0padding:0}
ul{list-style:none}
.slide{
width:500px
height:100px
border:1px solid #ddd
margin:20px auto 0
position:relative
overflow:hidden
}
.slide ul{
position:absolute/*相对于slide进行绝对定位*/
width:1000px/*比slide宽度大一倍，做这种连续滚动效果的时候，要在后面把内容复制一份*/
height:100px
left:0/*可以改变该值让其动起来*/
top:0
}
.slide ul li{
width:90px
height:90px
margin:5px
background-color:#ccc
line-height:90px
text-align: center
font-size:30px
float:left
}
.btns{
width:500px
height:50px
margin:10px auto 0
}
</style>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $ul = $('#slide ul')
var left = 0
var deraction = 2//每次滚动的距离
//内容为两套li
$ul.html($ul.html() + $ul.html())
//反复循环定时器，30ms动一下可以看起来比较平滑
var timer = setInterval(move, 30)
function move(){
left -= deraction
//当第2套li完全显示出来的时候，整个移回原点重新移动，实现向左连续滚动
if(left <-500){
left = 0
}
//瞬间跳回，实现向右连续滚动
if(left >0){
left = -500
}
$ul.css({left: left})
}
$('#btn1').click(function() {
deraction = 2
})
$('#btn2').click(function() {
deraction = -2
})
$('#slide').mouseover(function() {
clearInterval(timer)
})
$('#slide').mouseout(function() {
timer = setInterval(move,30)
})
})
</script>
</head>
<body>
<div class="btns">
<input type="button" name="" value="向左" id="btn1">
<input type="button" name="" value="向右" id="btn2">
</div>
<div class="slide" id="slide">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
鼠标移入要做的事情mouseover
鼠标移出要做的事情mouseout
<head>
<meta charset="UTF-8">
<title>鼠标移入移出</title>
<style type="text/css">
.box{
width: 200px
height: 200px
background-color: gold
margin: 100px auto 0
}
.son{
width: 100px
height: 100px
background-color: green
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*进入子元素也触发*/
/*$('#div1').mouseover(function() {
$(this).animate({marginTop: 50})//.stop()
})
$('#div1').mouseout(function() {
$(this).animate({marginTop: 100})//.stop()
})*/
/*进入子元素不触发*/
/*$('#div1').mouseenter(function() {
$(this).stop().animate({marginTop: 50})//
})
$('#div1').mouseleave(function() {
$(this).stop().animate({marginTop: 100})//
})*/
/*通过hover（mouseenter+mouseleave）实现简写*/
$('#div1').hover(function() {
$(this).stop().animate({marginTop: 50})
}, function() {
$(this).stop().animate({marginTop: 100})
})
})
</script>
</head>
<body>
<div id="div1" class="box">
<div class="son"></div>
</div>
</body>
创建一个子元素 促使鼠标移入到子元素才能移动
是由于时间mouse影响
则要使用mouseenter和mouseleave进行改变
也可以运用hover简化
autofocus
表单元素的值发生变化
<head>
<meta charset="UTF-8">
<title>input框事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）
// $('#txt01').focus()
// //文本框获取焦点的时候（有光标闪烁的时候）
// $('#txt01').focus(function() {
// alert('focus')
// })
// //失去焦点的时候（光标离开的时候）
// $('#txt01').blur(function() {
// alert('blur')
// })
// //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在
// $('#txt01').change(function() {
// alert('change')
// })
//松开键盘按键就触发
$('#txt01').keyup(function() {
alert('keyup')
})
})
</script>
</head>
<body>
<input type="text" id="txt01">
</body>
<head>
<meta charset="UTF-8">
<title>jQuery其他事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// // JS原生写法
// window.onload = function(){
// }
// / /jQuery写法，等同于上面写法
// $(window).load(function(){
// })
// //ready的写法
// $(document).ready(function(){
// })
// //ready的简写
// $(function(){
// })
// 窗口改变尺寸的时候，会高频触发
$(window).resize(function() {
console.log('3')
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
鼠标移入要做的事情mouseover
鼠标移出要做的事情mouseout
