jQuery基础(一)

来源：互联网发布：凯迪社区知乎编辑：程序博客网时间：2024/06/05 06:41

什么是jQuery？

jQuery是JavaScript的一种快速和简洁的框架，兼容css3，还兼容各种浏览器，文档说明齐全，应用详细，成熟插件也很多。为用户提供了优秀的代码块，封装了JavaScript常用的功能代码，jQuery具有独特的链式语法和短小清晰的多功能接口，有css选择器，同样可以优化HTML文档操作，事件处理，动画设计。

jQuery语法

导入：同JavaScript的外联式一样

基本语法：jQuery(选择器)或者$(选择器)

//页面加载函数---不会被覆盖                $(function(){//获得jQuery对象var $obj=$("#myText");alert($obj.value);});                             $(document).ready(function(){var $obj=$("#myText");alert($obj.value);});

DOM对象和jQuery对象的转换

//dom对象var userObj = document.getElementById("usernameId");//将dom对象转换成jquery对象    $(dom)var $userObj = $(userObj);//alert($userObj.val());//jquery对象转换成dom对象//jquery的底层是一个数组 对象[index] 或者  对象.get(index)//var user = $userObj[0];var user = $userObj.get(0);

五类选择器(详见博客)

效果

基本效果；滑动；淡入淡出

<script type="text/javascript">$(function(){//显示隐藏$("#b1").click(function(){$("#b1Div").toggle(3000);});//滑出滑入$("#b2").click(function(){$("#b2Div").slideToggle(3000,function(){alert(1);});});//淡入淡出$("#b3").click(function(){$("#b3Div").fadeToggle(3000,function(){alert(1);});});});</script>        <input type="button" id="b1" value="显示/隐藏 b1Div" /><div id="b1Div"></div> <br/><input type="button" id="b2" value="滑出/滑入b2Div"/><div id="b2Div"></div> <br/><input type="button" id="b3" value="淡出/淡入b3Div" /><div id="b3Div" style="background-color: red;"></div>

CSS类

addClass()和removeClass()

<style type="text/css">.myTrColor{background-color: red;}.myOverTrColor{background-color: blue;}</style><script>$(function(){$("tr:odd:gt(0)").addClass("myTrColor");//链式操作$("tr:gt(1)").mouseover(function(){$(this).addClass("myOverTrColor");}).mouseout(function(){$(this).removeClass("myOverTrColor");});});</script>

Html代码、text和val的比较
1、获取
html：获得标签
text：不会获得标签

        //显示：大家好alert($("#myDiv").text());//显示：<a href="">大家好</a>alert($("#myDiv").html());<div id="myDiv"><a href="">大家好</a></div>

2、赋值

text：不会解析标签

html：会解析标签

$(function(){//获得jQuery对象$("#myDiv").text("<a href=''>你好</a>");alert($("#myDiv").text());//显示：<a href=''>你好</a>$("#myDiv").html("<a href=''>你好</a>");alert($("#myDiv").html());//显示：你好});<div id="myDiv"></div>

3、val--一个方法两个用途

val():取值

val(参数):赋值

        //取值：hello worldalert($("#myText").val());//赋值：你好世界$("#myText").val("你好世界")<input type="text" id="myText" value="hello world" />

jQuery是JavaScript的框架，将JavaScript中复杂的代码简单化，给用户带来方便，大大提高效率，jQuery还有其他内容，请见下一篇博客

0 0