网页开发和设计之JQuery基础

JQuery学习

  • JQuery基础
  • 相关代码演示
  • 总结

JQuery基础

全称:Java script query 也是一个js的框架
特点:语法简单 支持主流浏览器 插件扩展机制和丰富的插件

  1. 引入jquery文件
  2. jquery的封装原理
  3. jquery的选择器
  4. jquery操作元素的属性
  5. jquery操作元素的内容和样式
  6. jquery操作元素的文档结构
  7. jquery中的事件
  8. jquery的动画效果

相关代码演示


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery学习title>


    <script>
    //id
        function testId() {
            var inp=window.$("#uname");
            alert(inp.val());
        }
        //元素
        function testTag() {
            var iup=window.$("input");
            alert(iup.length);
        }
        //类
        function testClass() {
         var cs=window.$(".con ")  ;
         alert(cs.length);
        }
        //组合选择器
        function testAll() {
            var al=window.$("h3,input");
            alert(al.length);
        }
        //子选择器
        function testChild() {
            var nps=window.$("div>input");
            alert(nps.length);
        }
        //jquery操作元素的属性
        function testFile() {
            var name=$("#name");
            alert(name.attr("type"));
        }
        function testFile1() {
            var na=$("#name");
            na.attr("type","button");
        }
        //jquery操作元素的样式和内容
        function testHtml() {
            var cont=window.$("#show");
            alert(cont.html());
        }
        function testHtml1() {
            var cont=window.$("#show");
            cont.html("今天天气很好!");
        }
        function testCss() {
            var css1 = window.$("#show");
            //获取
            alert(css1.css("height"));
            //添加
            css1.css("background-color","red");
            //删除
            css1.css("width","20px");
        }
        function testCss1() {
            var css2 = window.$("#show");
            css2.css({"font-size":"15px","color":"red","border-radius":"50px"});
        }
        function addClass() {
            var cl=window.$("#show");
            cl.addClass("cca");
        }
        function removeClass() {
            var ca=window.$("#show");
            ca.removeClass("cca");
         }
         //jquery操作元素的文档结构
        function t1() {
            var we1=window.$("#we");
                we1.append("Linyuqi");
        }
        function t2() {
            var we2=window.$("#we");
            we2.appendTo("#showdiv");
        }
        function t3() {
            var we3=window.$("#we");
            we3.prepend("Linyuqi");
        }
        function t4() {
            var we4=window.$("#we");
            we4.prependTo("#showdiv");
        }
        function s1() {
            var w=window.$("#we");
            w.after("fuck!")
        }
        function s2() {
            var w=window.$("#we");
            w.before("you!")
        }
        //jquery中的事件
        function bind() {
            window.$("#btn").bind("click",function(){alert("bangding")});
        }
        function unbind() {
            window.$("#btn").unbind("click");
        }
        function one() {
            window.$("#btn").one("click",function(){alert("one事件")});
        }
        //页面载入
        $(document).ready(function () {
            alert("Jquery!");
        })

        //jquery的动画效果
        function ee() {
            window.$("#ee").show(3000);
            window.$("#ee").hide(5000);
            window.$("#ee").toggle(4000);
        }
    script>

    <script src="../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8">script>


    <style>
        #showdiv{
            width: 180px;
            height: 120px;
            border: solid 1px aqua; 
        }
        #show{
            width: 180px;
            height: 120px;
            border: solid 1px aqua;
        }
        .cca{
            background-color: #333333;
            font-size: larger;
        }

        #we{
            width: 300px;
            height: 100px;
            border: solid red 2px;
        }
        #q{
            width: 300px;
            height: 200px;
            border: solid 2px red;
        }
        #ee{
            height: 200px;
            background-color: aqua;
        }
    style>
head>
<body onload="ee()">
<h3>jquery的选择器h3>
<hr>





<input type="text" id="uname" class="con" name="uname">
<hr>

<div id="showdiv">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
div>
<h3>jquery操作元素的属性h3>
<hr>
<input type="button" value="获取属性" onclick="testFile()">
<input type="button" value="修改属性" onclick="testFile1()">
用户名:<input type="text" name="name" id="name" value="张三">
<h3>jquery操作元素的样式和内容h3>
<hr>
<input type="button" value="获取内容" onclick="testHtml()">
<input type="button" value="修改内容" onclick="testHtml1()">
<input type="button" value="修改样式" onclick="testCss()">
<input type="button" value="JSON修改样式" onclick="testCss1()">
<input type="button" value="添加类样式" onclick="addClass()">
<input type="button" value="删除类样式" onclick="removeClass()">
<div id="show">
    <b>前面有人!b>
div>
<h3>jquery操作元素的文档结构h3>
<hr>
<input type="button" value="Append" onclick="t1()">
<input type="button" value="Appendto" onclick="t2()">
<input type="button" value="prepend" onclick="t3()">
<input type="button" value="prependto" onclick="t4()">

<input type="button" value="after" onclick="s1()">
<input type="button" value="before" onclick="s2()">

<div id="we">
    <p>Welcome!p>
div>
<h3>jquery的事件h3>
<hr>
<div id="q">

    <input type="button" value="绑定事件" onclick="bind()">
    <input type="button" value="解绑事件" onclick="unbind()">
    <input type="button" value="one绑定事件" onclick="one()">
    <br>
    <input type="button" id="btn" value="事件">
div>
<h3>jquery的动画效果h3>
<hr>

<div id="ee">


div>

body>
html>

总结

jquery封装了很多javascript的代码集合,简化了开发。

你可能感兴趣的:(Java后端)