网页基础学习 day03_综合

网页基础学习-jQuery

jQuery的定义和作用和优点：
定义：Query是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。
作用：jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。
优点： jQuery兼容了现在主流的浏览器，增加了程序员的开发效率，jQuery简化了 JavaScript 编程，代码编写更加简单。
jQuery的入口函数
我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

    <script>//原生js的写法window.onload=function(){
      var oDiv=document.getElementById('div1');alert("原生获取div的方法"+oDiv);}//使用jquery方法$(document).ready(function(){
      var $div=$('#div1');alert("使用iquery实现div的形式"+$div);});</script>

jquery入口函数：

 // 完整写法$(document).ready(function(){...});// 简化写法$(function(){...});

jQuery选择器的介绍

$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签

注意事项： jquery的选择器的使用得方法个css使用的方法一致

    <script>$(function(){
      var $p=$('p');//获取的是元素的对象。alert($p);alert($p.length);//使用jquery进行控制样式$p.css({
      'color':'red'})//类选择器的使用var $div=$('.div');alert($div.length);//id选择器的使用var $div1=$('#box1');alert($div1.length);//层级选择器的使用var $div2=$('div h1');alert($div2.length);//属性选择器的使用,先根据标签选择html标签，然后再根据属性进过滤标签var $input=$("input[type=text]");alert($input.length);});</script>
</head>
<body><p>hello</p><p>world</p><div class="div">哈哈</div><div id='box1'>嘻嘻</div><div><h1>使用的是一个父类的子标签的使用</h1></div><input type="text"><input type="button">
</body>

选择集过滤
使用has的关键字实现特定的模块的样式的变换

<script>window.onload=$(function(){
      // has方法的使用var $div = $("div").has("#mytext");// 设置样式$div.css({
      "background":"red"});});</script>
</head>
<body><div>这是第一个div<input type="text" id="mytext"></div><div>这是第二个div<input type="text"><input type="button"></div>