<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css" media="screen"> div {width: 100px;height: 100px;border:1px solid #ccc; margin: 10px;} #qq{ position: absolute; } </style> </head> <body> <script type="text/javascript"> //元素 动作 //$(select).action() 选择器语法。 $(document).ready(function(){ //文档就绪函数,文档加载完成后才执行,防止文档没有加载完就可以执行, 类似于JS的window.onload事件。 $str = "你好,我是李全权!"; //alert($str); // $("div").hide() $("button").click(function() { $("div").show(); }) //顺序选择器 //$('E:first') 匹配第一个 //$('E:last') 匹配最后一个 //比较选择器X重0开始 //$('E:gt(x)') //大于 //$('E:lt(x)') //小于 //$('E:eq(x)') //等于 // // $('p:eq(2)').css( // 'background','red' // ); //even奇数选择器 //odd双数选择器 // $('p:even').css( // 'background','red' // ); // $('p:odd').css('background','blue') // :not(selector) not非意思 // :empty 选择元素内部没有包含元素内容的元素 // $('div:not(:empty)').css('background','blue') //去反。 不是空得元素 都选中 // $('div:empty').css('background','red') //选择元素没有包含元素或文本得元素。 //:parent 匹配含有子元素或者文本的元素 与empty相反 // $('div:parent').css('background','red') //:contains(text) 包含指定字符串的所有元素 // :has(select) 选择包含特定元素的元素 // $('div:has(p)').css('background','blue') //匹配div下面包含P元素的元素 // $('div:contains(q)').css('background','blue') //匹配div下包含文本为q的元素 //["type='text'"] ^开头 $结尾 *包含 !取反 // $("input[type=text]").css('background','blue') $("input[type!=text]").css('background','blue') //表单选择器 // $(":checked") 所有被选中的 input 元素 $(":selected")所有被选取的 input 元素 $(":enabled")所有激活的 input 元素 $(":disabled")所有禁用的 input 元素 //$(":checked").parent() $('input[name=lqq]').click(function() { $('#lqq').hide('1000', function() { }); }); $('input[name=qq]').click(function() { $('#qq').animate({fontSize:"40px",right:"400px",background:"red",width:"500px",height:"500px"},1500, function() { }); }); }) </script> <input type="button" name="lqq" value="点击隐藏"> <input type="button" name="qq" value="点击变大"> <div style="width: 100px;height:100px;background: pink;"> 你好! </div> <button>注册</button> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <div> <div id="lqq"> 你好! </div></div> <div id="qq">121<p></p></div> <div></div> <div>lqq</div> <label>1</label><input type="text" name="" disabled><br> <label>2</label><input type="password" name=""><br> <label>3</label><input type="" name=""><br> <label>4</label><input type="qq" name=""><br> <label>5</label><input type="" name=""><br> <select name="" multiple> <option value=" option">option</option> <option value=" option">option</option> <option value=" option">option</option> </select> </body> </html>
总结
通过jQuery学习了基本语法,操作html DOM,知道了方法()调用的基本要求。先要选中元素。