2018-10-11:JS与jQuery基础

作者: 神坛下的我 | 来源:发表于2018-10-12 08:52 被阅读0次

JQuery
2018-10-11:JS与jQuery基础
第八周第四天笔记之jQuery知识点
htmlday8总结
jQuery第四天
20、jQuery 事件机制
You might not need jQuery——笔记
03-$符号-jquery与js相互转换
day11
js -- jQuery（基础）

JS基础

Java：面向对象编译型强变量服务器
JS：基于对象解释型弱变量客户端

编译和解释：
编译是将源代码和类库编译成目标代码，特点是一句错误编译不通过不能运行。
解释是逐行解释，遇到错误，可能只影响有错部分的输出。
基于对象：不能使用继承，浏览器提供了一些内置的对象，也可以定义一些自定
义的对象，但他们之间不能继承。
强变量和弱变量
强变量：强制申明数据类型，可以防止算错（防止内存不够，防止不能执行的
计算比如数字*字符）
JavaScript（原名livescript）

一些界面效果和数据处理（数据验证）由浏览器（客户机）执行，减轻了服
务器的压力。
替代用户的基本操作（点击，鼠标移入移出），完成与服务器的数据交互。

步骤

所有的html元素可以找到指定的元素

<input type="text" id="txt" name="txt" class="txt" value="aaa"/>
<script type="text/javascript">
 var txt = document.getElementById('txt');
 alert(txt);
 //for(var i=0;i<txt.length;i++){}
 //txt[i].innerHTML='qqwe';修改元素的值
 //txt[i].onclick = function(){alert('abc');
 this.innerHMTL='adf';对象绑定函数（匿名函数）中才使用this
 }
</script>

//获取对象 getElementById,getElementsByName,getElementsByTagName
//对象的属性 value,innerHTML,getAttribute,length

找到指定元素
修改或访问这个元素的某个属性值.
这个元素的响应用户动作。

申明变量通过多种方式获得html元素，如果是id直接获取，name循环获取
，class需要循环加判断获取
访问和修改获得html元素的值
给指定元素添加onclick事件绑定响应用户点击动作

获得一个文本框的内容通过id

<input type="text" id="txt" name="txt" value="abcde"/>
<script type="text/javascript">
 var txt = document.getElementById('txt');
 alert(txt.value);
</script>

获得一组p块的内容通过name

<p name="txt1">this is a p.</p>
<p name="txt1">this is a p2.</p>
<script type="text/javascript">
 
 var txt1 = document.getElementsByName('txt1');
 for(var i=0;i<txt1.length;i++){
     alert(txt1[i].innerHTML);
 }
</script>

给一个按钮（通过TagName+getAttribute获得）添加点击事件，修改文本
框的值

<input type="text" id="txt" name="txt" value="abcde"/>

<input type="button" class="btn" value="click"/>
<script type="text/javascript">
 var txt = document.getElementById('txt');
 var btn = document.getElementsByTagName('input');
 for(var i=0;i<btn.length;i++){
     var classvalue = btn[i].getAttribute('class');
     if(classvalue == 'btn'){
         btn[i].onclick = function(){
             txt.value='changed';
         }
     }
 }
</script>

JQuery基础

<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//1. $(document).ready(test);
//1.  function test(){
//1.   alert('1');
//1.  }

//2. $(document).ready(function(){  匿名函数
//2.   alert('2');
//2.  }

//3. var myJQuery = new $();  自行获得jQuery对象
//3. myJQuery.ready(function(){alert('3');} ready方法是所有元素加载完毕执行的方法

//4. $(function(){alert('4');}); 使用jQuery预制对象的ready方法
</script>
<input type="text" id="txt" name="txt" class="txt" value="aaa"/>

js变量和jQuery变量
区别在于js用属性.value,jQuery用方法.val()。
jQuery基本方法(访问或者修改值）
val() 没有参数，取出value值，元素要有value属性，有参数修改value值。

$(function(){
 //var txt = $('#txt').val();
 //var txt = $('input[name="txt"]').val();
 //var txt = $ ('.txt').val();
 //var txt = $('.divtxt > input').val();
 // alert(txt);
 

 //$('input[type="button"]').click(function(){
  $('.txt').val('ccc');
  $('.txt').attr('alt','ccc');
 });
});

attr() 只有一个参数，取出这个属性的值，两个参数，修改某个指定属性的值。

 //$('input[type="button"]').click(function(){
  $('.txt').attr('alt','ccc');
 });

html() 没有参数，取出innerHTML的内容；有参数，修改innerHTML的值和text()相比要取出全部标签。

var $p = $('.p');
alert($p.html());
<p class="p">2222</p>

$('input[type="button"]').click(function(){$('p').html('123');});

text() 只会取出文本内容。
css() 取出和修改指定css属性的值。

$('input[type="button"]').click(function(){$('p').css('color','red');});

选择器

基本选择器：#,.,空格,>,~,tab
属性选择器：[name="aa"]
过滤器
关系方法
next(),prev(),parent(),children()

通过class alt属性 id name 等各种方式获得文本框和p的值
通过找到父亲的儿子这种方式找到元素
使用 text，html修改内容
使用css方法修改元素的显示效果，颜色，大小
点一个按钮旁边div变大
参考：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.divtxt{width:100px;height:100px;background-color:black;}
</style>
<script type="text/javascript" src="../../tools/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">

$(function(){//ready方式 ，所有元素加载完毕执行的方法
    //var txt = $('input[name="txt"]').val(); 
    //var txt = $('#txt').val();
    //var txt = $('.txt').val();
    //var txt = $('.divtxt > input1').val();
    //var txt = $('input[alt="txt"]').val();
    //alert(txt);
    
    //js变量和jquery变量区别在 js用属性.value; jquery用方法 val();
    //var $p = $('.p');
    //alert($p.html());
    
    //var p = (document.getElementsByTagName('p'))[0];
    //alert(p.innerHTML);
    
    $('input[type="button"]').click(function(){
        //$('.txt').val('ccc');//对应jquery找到一组元素执行操作为全部操作 全部改为ccc
        //alert($('.txt').attr('alt'));
        //$('.txt').attr('alt','ccc');
        //alert($('p').text());
        //$('p').html('123');
        //$('p').css('color','red');
        //$('p').css('font-size','30px');
        $('.divtxt').css('width','300px');
        $('.divtxt').css('height','300px');
        $('.divtxt').css('background-color','#d3ccd9');
    });
 });
 //ready方法需要一个整数做参数，而test方法的返回值就是整数，
                         //我们将test方法调用放在ready方法参数位表示，将返回值给ready用
                         //如果test方法只为了ready的调用而存在,干脆放在ready的参数位申明,
                         //没有名字

</script>
</head>
<body>
<div class="divtxt">
</div>
  <input type="button" name="btn" value="click"/>
  <input type="text" alt="txt" id="txt" name="txt" class="txt" value="aaa"/>
  <input type="text"  name="txt" class="txt" value="bbb"/>
  
  <p class="p"><span>2222</span></p>
  
</body>
</html>

JQuery导航条

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    .navi {width:1000px; margin-left:auto;margin-right: auto;height:24px;line-height: 24px;}
    .navi > ul{width:1000px;margin:0;padding:0;margin-left:auto;margin-right: auto;height:24px;
    text-align: center;}
    .navi > ul > li{float: left;width:198px;height:100px;color:white;
    list-style-type: none;margin-left:2px;font-family: "微软雅黑";font-size: 14px;}
    .navi > ul > li > span{width: 198px;height:24px;display: inline-block;background-color: #abe0ab;}
    .submenu {width:198px;margin:0;padding:0;margin-left:auto;margin-right: auto;height:24px;
    text-align: center;display: none;}
   .submenu > li{width:198px;height:24px;background-color: #caecca;color:white;
    list-style-type: none;margin-top:1px;font-family: "微软雅黑";font-size: 14px;}
   .submenu > li > a{color: white;text-decoration: none;}
</style>
<script type="text/javascript" src="../../tools/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
    //1. 使用点击事件  
    //1. $('.navi > ul > li').click(function(){
    //1. var state = $(this).children('.submenu').css('display');
    //1. $('.submenu').css('display','none');//关闭所有二级菜单
    //1. if(state == 'none'){
    //1.    $(this).children('.submenu').css('display','block');
    //1. }else{
    //1.    $(this).children('.submenu').css('display','none');
    //1. }
    //1. });
    
    //2. 使用toggle方法 奇偶次点击 
    //2. $('.navi > ul > li').click(function(){
    //2.    $(this).children('.submenu').toggle();
    //2. });
    
    //3. 鼠标移入移出
     $('.navi > ul > li').hover(function(){
          $(this).children('.submenu').css('display','block');
       },function(){
          $(this).children('.submenu').css('display','none');
      });
});
</script>
</head>
<body>
<div class="navi">
 <ul>
  <li><span>首页</span></li>
  <li><span>校园风光</span>
   <ul class="submenu">
    <li><a href="#">无镜湖</a></li>
    <li><a href="#">樱花路</a></li>
    <li><a href="#">图书馆</a></li>
   </ul>
  </li>
  <li><span>新闻中心</span>
   <ul class="submenu">
    <li><a href="#">校内新闻</a></li>
    <li><a href="#">国内新闻</a></li>
    <li><a href="#">国际新闻</a></li>
    <li><a href="#">新闻一角</a></li>
   </ul>
  </li>
  <li><span>联系我们</span></li>
  <li><span>关于我们</span></li>
 </ul>
</div>
</body>
</html>

JQuery
JQuery 基础：概念快速入门JQuery对象和JS对象区别与转换选择器DOM操作案例 JQuery 基础：概...
2018-10-11:JS与jQuery基础
JS基础 Java：面向对象编译型强变量服务器JS：基于对象解释型弱变量客户端编译和解释：编...
第八周第四天笔记之jQuery知识点
jQuery知识点 1 基础知识 jQuery API网站：jQuery库网站知识点解读原生JS与jQuery代...
htmlday8总结
jQuery基础 jQuery实质就是对js的封装，封装的目的是为了更方便的使用js。js的代码写在哪儿，jq代码...
jQuery第四天
前言前面讲了jQuery基础,属性以及值,但是jQuery为什么比原生js好用呢?它除了封装了js之外,肯定有比...
20、jQuery 事件机制
20、jQuery 事件机制原生js事件与jQuery事件：（1）用原生的js给div注册事件原生js注册相...
You might not need jQuery——笔记
元素操作jQuery JS jQuery JS jQuery JS element.insertAdjacentH...
03-$符号-jquery与js相互转换
$符号-jquery与js相互转换作者：曾庆林获取Dom对象 JavaScript方式 jQuery方式 js...
day11
今天学了什么外部JS与JQuery依赖关系处理 1配置JQuery JQuery官网下载jquery-3.3.1...
js -- jQuery（基础）
jquery是什么？ jQuery is a fast, small, and feature-rich Java...

2018-10-11:JS与jQuery基础

JS基础

JQuery基础

相关文章

JQuery

2018-10-11:JS与jQuery基础

第八周第四天笔记之jQuery知识点

htmlday8总结

jQuery第四天

20、jQuery 事件机制

You might not need jQuery——笔记

03-$符号-jquery与js相互转换

day11

js -- jQuery（基础）

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读